Tracer une simple carte du monde avec d3.js et topojson


Simple exemple sur comment tracer une carte du monde avec d3.js et topojson dans une page web. Pour avoir la carte du monde dans une page web (voir figure) copier le code javascript ci-dessous, télécharger le fichier world-110m.json, pour executer le code en local lancer la commande dans votre interpréteur de commandes

 python -m SimpleHTTPServer 8001

(ou en passant par un logiciel de gestion d'un environnement local de serveur comme MAMP sur mac par exemple) et finalement ouvrer une page web et taper l'url http://localhost:8001/ puis sur le nom sous lequel vous avez sauvegardé le code ci-dessous.

Tracer une simple carte du monde avec d3.js et topojson
Tracer une simple carte du monde avec d3.js et topojson

Code javascript:

<!DOCTYPE html>
<meta charset="utf-8">

<style>

path {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}

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

</body>
</html>

Recherches associées

Liens Site
Data-Driven Documents d3js
topojson github
World Atlas TopoJSON github.com
Let’s Make a Map bost.ocks.org
U.S. TopoJSON bl.ocks.org
Choropleth bl.ocks.org
d3.geomap - Create Geographic Maps for the Web d3-geomap
The GeoJSON Format Specification geojson.org
GeoJson World Database stackoverflow
Download QGIS for your platform qgis.org
Download vector maps geojson-maps.kyd.com
Natural Earth naturalearthdata
HIGHMAPS - MAP COLLECTION code.highcharts.com
Image

of