Skip to content

Instantly share code, notes, and snippets.

@curran

curran/.block

Last active October 11, 2018 09:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save curran/307c61f2b30d449c3f5f08d6a67d324f to your computer and use it in GitHub Desktop.
Save curran/307c61f2b30d449c3f5f08d6a67d324f to your computer and use it in GitHub Desktop.
Download ZIP
[unlisted] map boxes
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Let's make a map with D3.js!</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script>
</head>
<body>
<svg width="960" height="600"></svg>
<script>
const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');
var projection = d3.geoAlbersUsa()
.scale(400)
.translate([width / 2, height / 2]);
var path = d3.geoPath()
.projection(projection);
d3.json('https://d3js.org/us-10m.v1.json')
.then(data => {
console.log(path);
const states = topojson.feature(data,data.objects.states);
svg.selectAll('path').data(states.features)
.enter().append('path')
.attr("class", "state")
.attr('d', path);
});
</script>
</body>
</html>
Raw
styles.css
.state {
fill: #ccc;
stroke: black
}
.state-boundary {
fill: none;
stroke: #fff;
}
.state.selected {
fill: orange;
stroke: #000;
}1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment