Exemple de code pour tracer une heat map sur une carte du monde avec d3.js et topojson. Pour executer le code il faut telecharger au prealable le fichier world-110m.json (voir l'article Tracer une simple carte du monde avec d3.js et topojson). Pour comprendre comment utiliser JSON avec d3.js il existe le tutoriel en anglais suivant: Using JSON to Simplify Code
<!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>
Recherches associées
Liens | Site |
---|---|
Heat map | wikipedia |
Tracer une simple carte du monde avec d3.js et topojson | science-emergence.com |
Using JSON to Simplify Code | dashingd3js |