Skip to content

Instantly share code, notes, and snippets.

@Zhenmao
Last active May 20, 2018 14:10
Show Gist options
  • Save Zhenmao/da5271205d93cf2b968a9db32e0bc920 to your computer and use it in GitHub Desktop.
Save Zhenmao/da5271205d93cf2b968a9db32e0bc920 to your computer and use it in GitHub Desktop.
US State Capitals
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>US State Capitals</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,
text {
font-family: sans-serif;
font-size: 14px;
}
.capital:hover {
stroke: #7A7A7A;
stroke-width: 1.5;
}
.tooltip {
position: absolute;
background: #fff;
pointer-events: none;
padding: 8px 12px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
var margin = { top: 30, right: 30, bottom: 30, left: 30 };
var width = 960 - margin.left - margin.right;
var height = 560 - margin.top - margin.bottom;
var projection = d3.geoAlbersUsa();
var geoPath = d3.geoPath(projection);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip");
Promise
.all([
d3.json("us-states.json"),
d3.json("us-state-capitals.json")
])
.then(function(data) {
var states = data[0];
var capitals = data[1];
projection.fitSize([width, height], states)
svg.append("g")
.attr("class", "states")
.selectAll("path")
.data(states.features)
.enter().append("path")
.attr("class", "state")
.attr("stroke", "#7A7A7A")
.attr("fill", "#EDEDED")
.attr("d", geoPath);
svg.append("g")
.attr("class", "capitals")
.selectAll("circle")
.data(capitals)
.enter().append("circle")
.attr("class", "capital")
.attr("fill", "steelblue")
.each(function(d) {
var pos = projection([d.lon, d.lat]);
d.cx = pos[0];
d.cy = pos[1];
})
.attr("cx", function(d) {
return d.cx;
})
.attr("cy", function(d) {
return d.cy;
})
.attr("r", 4.5)
.on("mouseover", showTooltip)
.on("mouseout", hideTooltip);
});
function showTooltip(d) {
var html = "<span>" + d.city + "</span>, <span>" + d.state + "</span>";
tooltip.html(html);
tooltip
.style("left", window.pageXOffset + d3.event.x + 12 + "px")
.style("top", window.pageYOffset + d3.event.y + 12 + "px")
.transition()
.style("opacity", 1);
}
function hideTooltip() {
tooltip
.transition()
.style("opacity", 0);
}
</script>
</body>
</html>
[
{"lon":-86.279118, "lat":32.361538, "state":"Alabama", "city":"Montgomery"},
{"lon":-134.41974, "lat":58.301935, "state":"Alaska", "city":"Juneau"},
{"lon":-112.073844, "lat":33.448457, "state":"Arizona", "city":"Phoenix"},
{"lon":-92.331122, "lat":34.736009, "state":"Arkansas", "city":"Little Rock"},
{"lon":-121.468926, "lat":38.555605, "state":"California", "city":"Sacramento"},
{"lon":-104.984167, "lat":39.7391667, "state":"Colorado", "city":"Denver"},
{"lon":-72.677, "lat":41.767, "state":"Connecticut", "city":"Hartford"},
{"lon":-75.526755, "lat":39.161921, "state":"Delaware", "city":"Dover"},
{"lon":-84.27277, "lat":30.4518, "state":"Florida", "city":"Tallahassee"},
{"lon":-84.39, "lat":33.76, "state":"Georgia", "city":"Atlanta"},
{"lon":-157.826182, "lat":21.30895, "state":"Hawaii", "city":"Honolulu"},
{"lon":-116.237651, "lat":43.613739, "state":"Idaho", "city":"Boise"},
{"lon":-89.650373, "lat":39.78325, "state":"Illinois", "city":"Springfield"},
{"lon":-86.147685, "lat":39.790942, "state":"Indiana", "city":"Indianapolis"},
{"lon":-93.620866, "lat":41.590939, "state":"Iowa", "city":"Des Moines"},
{"lon":-95.69, "lat":39.04, "state":"Kansas", "city":"Topeka"},
{"lon":-84.86311, "lat":38.197274, "state":"Kentucky", "city":"Frankfort"},
{"lon":-91.140229, "lat":30.45809, "state":"Louisiana", "city":"Baton Rouge"},
{"lon":-69.765261, "lat":44.323535, "state":"Maine", "city":"Augusta"},
{"lon":-76.501157, "lat":38.972945, "state":"Maryland", "city":"Annapolis"},
{"lon":-71.0275, "lat":42.2352, "state":"Massachusetts", "city":"Boston"},
{"lon":-84.5467, "lat":42.7335, "state":"Michigan", "city":"Lansing"},
{"lon":-93.094, "lat":44.95, "state":"Minnesota", "city":"Saint Paul"},
{"lon":-90.207, "lat":32.32, "state":"Mississippi", "city":"Jackson"},
{"lon":-92.189283, "lat":38.572954, "state":"Missouri", "city":"Jefferson City"},
{"lon":-112.027031, "lat":46.595805, "state":"Montana", "city":"Helena"},
{"lon":-96.675345, "lat":40.809868, "state":"Nebraska", "city":"Lincoln"},
{"lon":-119.753877, "lat":39.160949, "state":"Nevada", "city":"Carson City"},
{"lon":-71.549127, "lat":43.220093, "state":"New Hampshire", "city":"Concord"},
{"lon":-74.756138, "lat":40.221741, "state":"New Jersey", "city":"Trenton"},
{"lon":-105.964575, "lat":35.667231, "state":"New Mexico", "city":"Santa Fe"},
{"lon":-73.781339, "lat":42.659829, "state":"New York", "city":"Albany"},
{"lon":-78.638, "lat":35.771, "state":"North Carolina", "city":"Raleigh"},
{"lon":-100.779004, "lat":48.813343, "state":"North Dakota", "city":"Bismarck"},
{"lon":-83.000647, "lat":39.962245, "state":"Ohio", "city":"Columbus"},
{"lon":-97.534994, "lat":35.482309, "state":"Oklahoma", "city":"Oklahoma City"},
{"lon":-123.029159, "lat":44.931109, "state":"Oregon", "city":"Salem"},
{"lon":-76.875613, "lat":40.269789, "state":"Pennsylvania", "city":"Harrisburg"},
{"lon":-71.422132, "lat":41.82355, "state":"Rhode Island", "city":"Providence"},
{"lon":-81.035, "lat":34, "state":"South Carolina", "city":"Columbia"},
{"lon":-100.336378, "lat":44.367966, "state":"South Dakota", "city":"Pierre"},
{"lon":-86.784, "lat":36.165, "state":"Tennessee", "city":"Nashville"},
{"lon":-97.75, "lat":30.266667, "state":"Texas", "city":"Austin"},
{"lon":-111.892622, "lat":40.7547, "state":"Utah", "city":"Salt Lake City"},
{"lon":-72.57194, "lat":44.26639, "state":"Vermont", "city":"Montpelier"},
{"lon":-77.46, "lat":37.54, "state":"Virginia", "city":"Richmond"},
{"lon":-122.893077, "lat":47.042418, "state":"Washington", "city":"Olympia"},
{"lon":-81.633294, "lat":38.349497, "state":"West Virginia", "city":"Charleston"},
{"lon":-89.384444, "lat":43.074722, "state":"Wisconsin", "city":"Madison"},
{"lon":-104.802042, "lat":41.145548, "state":"Wyoming", "city":"Cheyenne"}
]
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment