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