Skip to content

Instantly share code, notes, and snippets.

@skoslitz

skoslitz/.d3-basic-map-functions

Forked from HarryStevens/.block
Last active November 2, 2016 08:43
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 skoslitz/e8003c7d79ae677fb63d130a1e9a0789 to your computer and use it in GitHub Desktop.
Save skoslitz/e8003c7d79ae677fb63d130a1e9a0789 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Map Functions
Raw
README.md

Some simple, frequently used functions for creating a map with D3.js and Topojson.

  • centerZoom - Automatically centers and scales your map to its container, and returns your map's outer boundaries in case you want to draw them.
  • drawOuterBoundary - Uses the boundary returned from centerZoom to draw a boundary around your whole map.
  • drawPlaces - Draws place names, if your topojson has places.
  • drawSubunits - Draws subunits.

See this tutorial for more on making maps with D3. I got most of the centerZoom function from this block.

Raw
index.html
<html>
<head>
<style>
body {
margin: 0;
font-family: "Helvetica Neue", sans-serif;
}
.subunit {
fill: #ddd;
stroke: #fff;
stroke-width: 1px;
}
.subunit-boundary {
fill: none;
stroke: #3a403d;
}
.place-label {
font-size: .7em;
text-shadow: 0px 0px 2px #fff;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script>
var width = window.innerWidth, height = window.innerHeight;
var projection = d3.geoMercator();
var path = d3.geoPath()
.projection(projection)
.pointRadius(2);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
d3.json("map.json", function(error, data) {
if (error) throw error;
var boundary = centerZoom(data);
drawSubUnits(data);
drawPlaces(data);
drawOuterBoundary(data, boundary);
});
// This function "centers" and "zooms" a map by setting its projection's scale and translate according to its outer boundary
// It also returns the boundary itself in case you want to draw it to the map
function centerZoom(data){
var o = topojson.mesh(data, data.objects.polygons, function(a, b) { return a === b; });
projection
.scale(1)
.translate([0, 0]);
var b = path.bounds(o),
s = 1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection
.scale(s)
.translate(t);
return o;
}
function drawOuterBoundary(data, boundary){
g.append("path")
.datum(boundary)
.attr("d", path)
.attr("class", "subunit-boundary");
}
function drawPlaces(data){
g.append("path")
.datum(topojson.feature(data, data.objects.places))
.attr("d", path)
.attr("class", "place");
g.selectAll(".place-label")
.data(topojson.feature(data, data.objects.places).features)
.enter().append("text")
.attr("class", "place-label")
.attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
.attr("dy", ".35em")
.attr("x", 6)
.style("text-anchor", "start")
.text(function(d) { return d.properties.name; });
}
function drawSubUnits(data){
g.selectAll(".subunit")
.data(topojson.feature(data, data.objects.polygons).features)
.enter().append("path")
.attr("class", "subunit")
.attr("d", path);
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
map.json
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