This map demonstrates the TopoJSON us-atlas. The same TopoJSON file can also be used to show counties.
Last active
August 11, 2022 21:42
-
-
Save mbostock/4090848 to your computer and use it in GitHub Desktop.
U.S. States TopoJSON
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
| license: gpl-3.0 | |
| height: 600 | |
| border: no | |
| redirect: https://observablehq.com/@d3/u-s-map |
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> | |
| <style> | |
| .states :hover { | |
| fill: red; | |
| } | |
| .state-borders { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 0.5px; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| pointer-events: none; | |
| } | |
| </style> | |
| <svg width="960" height="600"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v2.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"); | |
| var path = d3.geoPath(); | |
| d3.json("https://d3js.org/us-10m.v1.json", function(error, us) { | |
| if (error) throw error; | |
| svg.append("g") | |
| .attr("class", "states") | |
| .selectAll("path") | |
| .data(topojson.feature(us, us.objects.states).features) | |
| .enter().append("path") | |
| .attr("d", path); | |
| svg.append("path") | |
| .attr("class", "state-borders") | |
| .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))); | |
| }); | |
| </script> |
for what stands this?:
.attr("class", "states")
and
.attr("class", "state-borders")
@Ognami: not sure if you found the solution, but I had the same problem. The IDs weren't ordered alphabetically or statehood, but by their ANSI standardized code. You can find the codes here: https://www2.census.gov/geo/docs/reference/state.txt
And if you want to match county polygons to their names: https://www2.census.gov/geo/docs/reference/codes/files/national_county.txt
THANKS!! Searched for an hour for this... I was looking at altair vega's us by income plot (https://altair-viz.github.io/gallery/us_incomebrackets_by_state_facet.html) and could not figure out what the key='id' meant, I definitely thought it was alphabetical but then wasn't confident what happens to e.g. District of Columbia. Not sure how I found this but much appreciated
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
please give me a tutorial to enter latitude and longtitude data, using this map