An example to add a heat map on a global map using d3.js and topojson. To run the code use the file: world-110m.json.
<!DOCTYPE html><meta charset="utf-8"><style>path {fill: none;stroke: #000;stroke-width: .5px;}.land-boundary {stroke-width: 1px;}.county-boundary {stroke: #aaa;}</style><body><script src="//d3js.org/d3.v3.min.js"></script><script src="//d3js.org/topojson.v1.min.js"></script><script>var width = 960,height = 480;var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);/* ------------------------------------------------------------------------------------ */var data = [{"x_axis": 0, "y_axis": 0, "width": 320, "height": 240, "color" : "green"},{"x_axis": 320, "y_axis": 0, "width": 320, "height": 240, "color" : "blue"},{"x_axis": 640, "y_axis": 0, "width": 320, "height": 240, "color" : "red"},{"x_axis": 0, "y_axis": 240, "width": 320, "height": 240, "color" : "red"},{"x_axis": 320, "y_axis": 240, "width": 320, "height": 240, "color" : "green"},{"x_axis": 640, "y_axis": 240, "width": 320, "height": 240, "color" : "blue"}];var rects = svg.selectAll("rect").data(data).enter().append("rect").attr("x", function (d) { return d.x_axis; }).attr("y", function (d) { return d.y_axis; }).attr("width", function (d) { return d.width; }).attr("height", function (d) { return d.height; }).attr("fill", function (d) { return d.color; }).attr("opacity", 0.5);/* ------------------------------------------------------------------------------------ */var projection = d3.geo.equirectangular().scale(153).translate([width / 2, height / 2]).precision(.1);var path = d3.geo.path().projection(projection);d3.json("world-110m.json", function(error, topology) {if (error) throw error;svg.append("path").datum(topojson.feature(topology, topology.objects.land)).attr("d", path).attr("class", "land-boundary");});</script>
References
| Links | Site |
|---|---|
| Heat map | wikipedia |
| Tracer une simple carte du monde avec d3.js et topojson | science-emergence.com |
| Using JSON to Simplify Code | dashingd3js |
