gistfile1.txt

<script>
        function createMap() {
            $("#map").kendoMap({
                center: [30.2681, -97.7448],
                zoom: 3,
                layers: [
                    {
                        type: "shape",
                        dataSource: {
                            type: "geojson",
                            transport: {
                                read: "sea.json"
                            }
                        },
                        style: {
                            fill: {
                                opacity: 1
                            }
                        }
                    },
                    {
                        type: "shape",
                        dataSource: {
                            type: "geojson",
                            transport: {
                                read: "geo.json"
                            }
                        },
                        style: {
                            fill: {
                                opacity: 0.7
                            }
                        }
                    }],
                shapeCreated: onShapeCreated,
                shapeFeatureCreated: onShapeFeatureCreated,
                shapeMouseEnter: onShapeMouseEnter,
                shapeMouseLeave: onShapeMouseLeave
            });
        }

        // this is what i changed to get purest green (1) and purest red (1000)
        // Add risk index in geo.json (1-1000)
        var scale = chroma
            .scale(["green", "red"])
            .domain([1, 1000]);

        function onShapeCreated(e) {
            var shape = e.shape;
            var risk = shape.dataItem.properties.risk;
            if (risk) {
                var color = scale(risk).hex();
                shape.options.fill.set("color", color);
            } else {
                shape.options.fill.set("color", '#CCF');
            }
        }

        function onShapeFeatureCreated(e) {
            e.group.options.tooltip = {
                content: e.properties.name,
                position: "cursor",
                offset: 10,
                width: 80
            };
        }

        function onShapeMouseEnter(e) {
            e.shape.options.set("fill.opacity", 1);
        }

        function onShapeMouseLeave(e) {
            e.shape.options.set("fill.opacity", 0.7);
        }

        $(document).ready(createMap);
    </script>