dataviz engineer w/ passion for algorithms, maps & music
Published
Edited
Oct 18, 2019
5 stars
data = projections.map((p, i) => {
const w = 800, h = 400;
const context = DOM.context2d(w, h);
const proj = p.value().fitSize([w, h], sphere);
const path = d3.geoPath(proj, context);
context.fillStyle = "#000000";
context.fillRect(0, 0, w, h);
context.fillStyle = "#010000";
context.beginPath(), path(sphere), context.fill();
const [[x0, y0], [x1, y1]] = path.bounds(sphere);
const imageData = context.getImageData(x0, y0, x1 - x0, y1 - y0);
let n = 0;
for (let i = 0; i < imageData.data.length; i += 4) {
n += imageData.data[i];
}
return Object.assign(p, {
index: i,
aspectRatio: (x1 - x0) / (y1 - y0),
spaceEfficency: n / (imageData.data.length / 4)
});
})
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.
