Créer une heat map sur une carte du monde avec d3.js et topojson


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

Heatmap sur une carte du monde avec d3.js et topojson

<!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

Image

of