Adding color to Voronoi Seeds based on condition from data

130 views Asked by At

I am very new to D3. I have plotted the bus stop coordinates of Singapore using Voronoi Diagram. I wish to add colour to the voronoi seeds based on the population density attribute of the data (means if populationDensity> 480, color = red and so on). How do I do this?

I am posting my entire code and the sample JSON file.

<!DOCTYPE html>
<html>
<head>
<title>D3.js GoogleMap Voronoi Diagram</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script   src="http://shimz.me/example/d3js/geo_example/geo_template/topojson.v0.min.js">   </script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?   sensor=false"></script>
<style type="text/css">
html, body{
margin: 0px;
padding: 0px;
}
html, body, #map_canvas {
width: 100%;
height: 100%;
}

.SvgOverlay {
position: relative;
width: 900px;
height: 600px;           
}

.SvgOverlay svg {
position: absolute;
top: -4000px;
left: -4000px;
width: 8000px;
height: 8000px;        
}

</style>
</head>
<body>
<div id="map_canvas"></div>
<br>

<script type="text/javascript">

d3.json('point.geojson', function(pointjson){
main(pointjson); 
});

function main(pointjson) {


    var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(1.290270,103.851959),       
    });


    var overlay = new google.maps.OverlayView(); //OverLayオブジェクトの作成


    overlay.onAdd = function () {

    var layer =   d3.select(this.getPanes().overlayLayer).append("div").attr("class",   "SvgOverlay");
    var svg = layer.append("svg");
    var svgoverlay = svg.append("g").attr("class", "AdminDivisions");


    overlay.draw = function () {
        var markerOverlay = this;
        var overlayProjection = markerOverlay.getProjection();


        var googleMapProjection = function (coordinates) {
            var googleCoordinates = new google.maps.LatLng(coordinates[1],   coordinates[0]);
            var pixelCoordinates =    overlayProjection.fromLatLngToDivPixel(googleCoordinates);
            return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
        }


        var pointdata = pointjson.features;


        var positions = [];

        pointdata.forEach(function(d) {     
            positions.push(googleMapProjection(d.geometry.coordinates)); 
        });


        var polygons = d3.geom.voronoi(positions);

        var pathAttr ={
            "d":function(d, i) { return "M" + polygons[i].join("L") + "Z"},
            stroke:"red",
            fill:"none"         
        };


        svgoverlay.selectAll("path")
            .data(pointdata)
            .attr(pathAttr)
            .enter()
            .append("svg:path")
            .attr("class", "cell")
            .attr(pathAttr)


        var circleAttr = {
                "cx":function(d, i) { return positions[i][0]; },
                "cy":function(d, i) { return positions[i][1]; },
                "r":2,
                fill:"red"          
        }


        svgoverlay.selectAll("circle")
            .data(pointdata)
            .attr(circleAttr)
            .enter()
            .append("svg:circle")
            .attr(circleAttr)




    };

};


overlay.setMap(map);


};

</script>

</body>
</html>

The sample JSON file is as follows:

{
"type": "FeatureCollection",

"features": [{
        "type": "Feature",
        "id": 45,
        "populationDensity": 143.75,
        "properties": {},
        "geometry": {
            "type": "Point",
            "coordinates": [103.81722480263163, 1.28210155945393]
        }
    }, {
        "type": "Feature",
        "id": 46,
        "populationDensity": 1131.25,
        "properties": {},
        "geometry": {
            "type": "Point",
            "coordinates": [103.83749709165197, 1.2777380589964]
        }
    }, {
        "type": "Feature",
        "id": 47,
        "populationDensity": 1.25,
        "properties": {},
        "geometry": {
            "type": "Point",
            "coordinates": [103.83762574759974, 1.27832046633393]
        }
    }, {
        "type": "Feature",
        "id": 48,
        "populationDensity": 1.25,
        "properties": {},
        "geometry": {
            "type": "Point",
            "coordinates": [103.83860360621959, 1.27900819665099]
        }
    }, {
        "type": "Feature",
        "id": 49,
        "populationDensity": 1131.25,
        "properties": {},
        "geometry": {
            "type": "Point",
            "coordinates": [103.83838894560753, 1.27744837946643]
        }
    }

]
}
1

There are 1 answers

0
Somnath Banerjee On
        var pathAttr ={
            "d":function(d, i) { return "M" + polygons[i].join("L") + "Z"},
            stroke:"red",
            fill:function (d, i){ if (d.populationDensity < 9.5238)  return"red"; else if (d.populationDensity >= 9.5238 && d.populationDensity  <725.5000)return"blue";else if (d.populationDensity >= 725.5000 &&  d.populationDensity <1374.5098)return"yellow"; else return"green"; }       
             };// This adds colour to the Voronoi Polygons based on condition


        svgoverlay.selectAll("path")
            .data(pointdata)
            .attr(pathAttr)
            .enter()
            .append("svg:path")
            .attr("class", "cell")
            .attr(pathAttr)
            .style("opacity", 0.2)// This makes the color of the Voronoi polygons translucent so that the underlying map is visible


        var circleAttr = {
                "cx":function(d, i) { return positions[i][0]; },
                "cy":function(d, i) { return positions[i][1]; },
                "r":3,
                fill:function (d, i){ if (d.populationDensity < 9.5238) return"red"; else if (d.populationDensity >= 9.5238 && d.populationDensity <725.5000)return"blue";else if (d.populationDensity >= 725.5000 && d.populationDensity <1374.5098)return"yellow"; else return"green";}           
        }// This adds color to the Voronoi seeds based on condition

I tried the above code and it works for my case