Last active
May 14, 2018 12:15
-
-
Save robinhouston/bc7dd3b3c3cdbe115a37 to your computer and use it in GitHub Desktop.
How to make a map of the world with D3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| all: world.topo.json libs | |
| libs: d3.geo.projection.v0.min.js d3.v3.min.js topojson.v1.min.js | |
| clean: | |
| rm -f world.*.json ne_10m_admin_0_countries.* *.min.js | |
| .PHONY: all clean libs | |
| %.topo.json: %.geo.json | |
| topojson -o $@ --simplify 0.0001 --id-property ADM0_A3 --properties name=NAME,continent=CONTINENT -- $^ | |
| world.geo.json: ne_10m_admin_0_countries.shp | |
| @rm -f $@ | |
| ogr2ogr -f GeoJSON $@ $< | |
| %.shp: %.zip | |
| unzip $< && touch $@ | |
| ne_10m_admin_0_countries.zip: | |
| curl -LO http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_0_countries.zip | |
| %.min.js: | |
| curl -LO http://d3js.org/$@ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Example D3 world map</title> | |
| <script src="d3.v3.min.js"></script> | |
| <script src="d3.geo.projection.v0.min.js"></script> | |
| <script src="topojson.v1.min.js"></script> | |
| <style> | |
| body { font-family: sans-serif; } | |
| #map .country { stroke: #ccc; } | |
| #map .country:hover { fill: #ccb; } | |
| /* Colour the continents */ | |
| .country[data-continent="North America"] { fill: #0067A5; } | |
| .country[data-continent="South America"] { fill: #FF70DB; } | |
| .country[data-continent="Asia"] { fill: #00A86B; } | |
| .country[data-continent="Africa"] { fill: orange; } | |
| .country[data-continent="Europe"] { fill: #CC3333; } | |
| .country[data-continent="Oceania"] { fill: purple; } | |
| .country[data-continent="Antarctica"] { fill: #DDD; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>A map of the world</h1> | |
| <div id="map"></div> | |
| <script> | |
| var width = 1000, | |
| height = 500; | |
| var svg = d3.select("#map").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var projection = d3.geo.robinson() | |
| .translate([width / 2, height / 2]); | |
| d3.json("world.topo.json", function(error, world) { | |
| if (error) return console.error(error); | |
| var path = d3.geo.path().projection(projection); | |
| // Draw the provinces | |
| var provinces = svg.selectAll(".subunit") | |
| .data(topojson.feature(world, world.objects["world.geo"]).features); | |
| provinces.enter().append("path") | |
| .attr("id", function(d) { return d.id; }) | |
| .attr("data-name", function(d) { return d.properties.name; }) | |
| .attr("data-continent", function(d) { return d.properties.continent; }) | |
| .attr("class", function(d) { return "country"; }) | |
| .attr("d", path); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment