Adapted from http://bl.ocks.org/mbostock/4707858
Built with blockbuilder.org
license: mit |
Adapted from http://bl.ocks.org/mbostock/4707858
Built with blockbuilder.org
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/topojson.v2.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
path { | |
stroke: gray; | |
fill: none; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
const width = 960; | |
const height = 960; | |
const svg = d3.select('body').append('svg') | |
.attr('height', width) | |
.attr('width', height); | |
d3.queue() | |
.defer(d3.json, 'la.json') | |
.await(render) | |
function render(error, la) { | |
if (error) return console.warn(error); | |
// Create a unit projection. | |
const laProjection = d3.geoAlbers() | |
.scale(1) | |
.translate([0, 0]); | |
// Create a path generator | |
const path = d3.geoPath() | |
.projection(laProjection); | |
// Compute the bounds of a feature of interest, | |
// then derive scale & translate. | |
const laBounds = path.bounds(la); | |
const laScale = 0.95 / Math.max( | |
(laBounds[1][0] - laBounds[0][0]) / width, | |
(laBounds[1][1] - laBounds[0][1]) / height | |
); | |
const laTranslate = [ | |
(width - laScale * (laBounds[1][0] + laBounds[0][0])) / 2, | |
(height - laScale * (laBounds[1][1] + laBounds[0][1])) / 2 | |
]; | |
// Update the projection to use computed scale & translate. | |
console.log(laBounds); | |
console.log(laScale, laTranslate) | |
laProjection.scale(laScale) | |
.translate(laTranslate); | |
svg.append('path') | |
.datum(la) | |
.attr('d', path); | |
} | |
</script> | |
</body> |