Skip to content

Instantly share code, notes, and snippets.

@HarryStevens HarryStevens/.block

Last active Apr 28, 2018
Embed
What would you like to do?
Don't Mess With Texas
license: gpl-3.0
height: 700
border: no
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
#map {
width: 100%;
height: 100vh;
}
#map .boundary {
stroke-width: 5px;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- CDNs for d3-request and topojson -->
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-request.v1.min.js"></script>
<script src="https://unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script>
<script src="https://unpkg.com/swiftmap@0.2.6/dist/swiftmap.min.js"></script>
<script>
var map = swiftmap.map("#map");
var scheme = swiftmap.schemeContinuous()
.from(d => {
var c = map.path.centroid(d);
return c[1] * -c[0];
})
.to(["#f7f4f9", "#e7e1ef", "#d4b9da", "#c994c7", "#df65b0", "#e7298a", "#ce1256", "#980043", "#67001f"]);
d3.json("cb_2017_texas_county_20m.json", (error, data) => {
map
.layerPolygons(data)
.draw();
scheme
.data(topojson.feature(map.layers[0].data, map.layers[0].object).features);
map.layers[0].polygons.style("fill", scheme).style("stroke", scheme);
window.onresize = () => map.resize();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.