Public
Edited
Aug 3, 2020
3 forks
Importers
13 stars
projection = {
/* https://github.com/d3/d3-geo#geoBounds */
const [ bottomLeft, topRight ] = d3.geoBounds(germany)
/* https://bl.ocks.org/mbostock/4282586 */
const lambda = -(topRight[0] + bottomLeft[0]) / 2
/* Coordinates for the center of the map*/
const center = [
(topRight[0] + bottomLeft[0]) / 2 + lambda,
(topRight[1] + bottomLeft[1]) / 2
]
const scale = Math.min(
width / (topRight[0] + bottomLeft[0]),
height / (topRight[1] - bottomLeft[1])
)
/* Creating the projection */
return d3.geoAlbers()
.parallels([bottomLeft[1], topRight[1]])
.translate([width / 2, height / 2])
.rotate([lambda, 0, 0])
.center(center)
.scale(scale * 200)
}
map = svg`
<svg width="${width}" height="${height}">
<path d="${d}" fill="rebeccapurple" stroke="rebeccapurple" fill-opacity='0.2'></path>
</svg>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
