Geovember 2: lines
Geovember 2019
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, width * 0.66]);
yield html`<div'>${svg.node()}</div>`;
for (let i = 0; i < centroids.length; i++) {
let r = Infinity;
for (let j of delaunay.neighbors(i)) {
r = Math.min(
r,
Math.sqrt(
Math.pow(centroids[j][0] - centroids[i][0], 2) +
Math.pow(centroids[j][1] - centroids[i][1], 2)
)
);
}
// Create a circle for each county
svg
.append("circle")
.attr("r", r / 2)
.attr('fill', d3.scaleQuantize([0, 10], d3.schemeOrRd[4])(r))
.attr('transform', `translate(${centroids[i]})`);
if (i % 100 === 0) yield html`<div'>${svg.node()}</div>`;
}
yield html`<div'>${svg.node()}</div>`;
}
d3 = require('d3@5') // d3, for rendering to svg and… everything
topojson = require("topojson-client@3") // topojson, for parsing the compressed data
us = FileAttachment("counties-albers-10m.json").json() // the data
path = d3.geoPath().projection(d3.geoIdentity().scale(width / 975)) // project / print method
centroids = topojson
.feature(us, us.objects.counties)
.features.map(path.centroid)
delaunay = d.Delaunay.from(centroids)
d = require('d3-delaunay')
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.
