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]
}
}
]
}
I tried the above code and it works for my case