Public
Edited
Oct 10, 2023
7 stars
// loading with skypack, yay!
placekey = import("https://cdn.skypack.dev/@placekey/placekey@1")
// 🌶 order of arguments is latitude, longitude
placekey.geoToPlacekey(47.812, 0.963)
placekey.placekeyToGeo("@53v-rnn-b6k") // 🌶 latitude, longitude
data = d3.csv("https://cdn.unfolded.ai/sample-datasets/data/uf-acs2018-income-ord.csv")
projection = d3
.geoAzimuthalEqualArea()
.rotate([87.76239613684656, -42.01983008099722])
.fitExtent([[10, 10], [width - 10, height - 10]], chicago)
{
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context).pointRadius(1.75);
for (let i = 0; i < data.length; i++) {
const p = data[i];
context.beginPath();
path({
type: "Point",
coordinates: placekey.placekeyToGeo(p.placekey).reverse()
});
context.fillStyle = color(p["income_less_10k_percentage"]);
context.fill();
if (i % 5000 === 0) yield show();
}
yield show();
function show() {
context.lineWidth = .1;
context.beginPath();
path(chicago);
context.stroke();
return context.canvas;
}
}
color = d3.scaleSequential(d3.interpolateBlues).domain([0, 24])
chicago = {
const c = await d3.json(
"https://raw.githubusercontent.com/aepton/chicago-maps/master/json/chicago.topojson"
);
return topojson.feature(c, c.objects.chicago);
}
height = 1200
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.
