Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active May 18, 2021
Embed
What would you like to do?
U.S. States TopoJSON
license: gpl-3.0
height: 600
border: no
redirect: https://observablehq.com/@d3/u-s-map
<!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>
@mvnmin

This comment has been minimized.

Copy link

@mvnmin mvnmin commented Mar 2, 2016

Question. How might I be able to show only the Continental United States (minus Alaska & Hawaii)?

@Jakobud

This comment has been minimized.

Copy link

@Jakobud Jakobud commented May 9, 2016

@mvnmin by editing the us.json file and removing the Alaska and Hawaii elements.

@nani3105

This comment has been minimized.

Copy link

@nani3105 nani3105 commented Aug 5, 2016

How can we display putero rico and virgin islands bellow texas/lousiana

@jsj14

This comment has been minimized.

Copy link

@jsj14 jsj14 commented Apr 11, 2017

Any updates on this? How to show puerto rico along with USA states

@Ognami

This comment has been minimized.

Copy link

@Ognami Ognami commented May 3, 2017

Not to be a total noob but... how do I associate these regions with state names? I only see them referred to as IDs.

@rbndelrio

This comment has been minimized.

Copy link

@rbndelrio rbndelrio commented May 21, 2017

@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

@helixmat

This comment has been minimized.

Copy link

@helixmat helixmat commented Feb 26, 2018

Also cannot get Puerto Rico to display. It has coordinates in the json, but d for the path is empty when the map is drawn.

@suriyacs

This comment has been minimized.

Copy link

@suriyacs suriyacs commented Apr 19, 2018

How to draw individual state's counties!!? I mean Draw counties of a particular state by passing state name or anything related to state!!?

@cassiodorus

This comment has been minimized.

Copy link

@cassiodorus cassiodorus commented Nov 29, 2018

Hi suriyacs ... I have the same need. Have you determined how to draw the counties for an individual state?

@ErwinPrimaisa

This comment has been minimized.

Copy link

@ErwinPrimaisa ErwinPrimaisa commented Dec 16, 2019

please give me a tutorial to enter latitude and longtitude data, using this map

@TheDuelist

This comment has been minimized.

Copy link

@TheDuelist TheDuelist commented May 18, 2021

for what stands this?:
.attr("class", "states")

and
.attr("class", "state-borders")

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment