An example of how to plot a simple global map using d3.js and topojson. The code need the file world-110m.json.
To test the code locally, a solution is to use python and launch a local testing server:
python -m http.server 8001
then go to http://localhost:8001/ in the browser.
Source code
<!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>
References
| Links | 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 |
