-
-
Save amydegenaro/f4f80ff4cf97edffd1daa525014cae43 to your computer and use it in GitHub Desktop.
Introduction to Digital Cartography: GeoJSON and D3.js
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> | |
| <title>World Map</title> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v2.min.js"></script> | |
| <style> | |
| path { | |
| fill: lightgray; | |
| stroke: #000; | |
| } | |
| .graticule { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: .5px; | |
| } | |
| .foreground { | |
| fill: none; | |
| stroke: #333; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="600"></svg> | |
| <script> | |
| const svg = d3.select("svg") | |
| const myProjection = d3.geoNaturalEarth1() | |
| const path = d3.geoPath().projection(myProjection) | |
| const graticule = d3.geoGraticule() | |
| function drawMap(err, world) { | |
| if (err) throw err | |
| svg.append("path") | |
| .datum(graticule) | |
| .attr("class", "graticule") | |
| .attr("d", path); | |
| svg.append("path") | |
| .datum(graticule.outline) | |
| .attr("class", "foreground") | |
| .attr("d", path); | |
| svg.append("g") | |
| .selectAll("path") | |
| .data(topojson.feature(world, world.objects.countries).features) | |
| .enter().append("path") | |
| .attr("d", path); | |
| } | |
| d3.json("https://unpkg.com/world-atlas@1.1.4/world/110m.json", drawMap) | |
| // FOR A MORE DETAILED MAP, USE THE BELOW JSON LINK INSTEAD: | |
| // d3.json("https://unpkg.com/world-atlas@1.1.4/world/50m.json", drawMap) | |
| </script> | |
| </body> | |
| </html> |
Works for me. Maybe they have updated it?
I had the same issue with it not working in d3-v5, v4 still works fine. In d3-v5 d3.json changed its signature. Instead of taking a callback it returns a promise so line 58 would need to change to
d3.json("https://unpkg.com/world-atlas@1.1.4/world/110m.json").then(drawMap)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A note for anyone in the future... The above does not seem to work with d3-v5.