Published
Edited
Sep 26, 2022
1 fork
3 stars
draw(municipalities);
draw(districts);
function draw(data) {
//width is global
let height = 300;
let projection = d3.geoIdentity()
.reflectY(true)
.fitSize([width, height], data);
let geoPath = d3.geoPath()
.projection(projection);
let paths = [];
data.features.forEach( f => {
// f.geometry.coordinates is an array of arrays
f.geometry.coordinates.forEach( coordinates => {
let path = [];
coordinates.forEach(point => {
let translatedPoint = projection(point);
path.push( new Two.Anchor( translatedPoint[0], translatedPoint[1] ));
});
paths.push(path);
});
});
let two = new Two({
type: Two.Types.canvas,
width: width,
height: height
});
let group = two.makeGroup();
paths.forEach( points => {
let path = two.makePath(points);
group.add(path);
});
two.update();
return two.renderer.domElement;
}
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.
