Public
Edited
Sep 8, 2022
2 forks
78 stars
Also listed in…
Geo
chart = {
const context = DOM.context2d(width, height),
path = d3
.geoPath(projection)
.context(context);
yield context.canvas;
while (animate) {
const rotate = projection.rotate();
rotate[0] += 0.3;
projection.rotate(rotate);
render(context, path);
yield context.canvas;
}
const sel = d3.select(context.canvas).style("cursor", "grab");
d3.geoInertiaDrag(sel, () => render(context, path), projection);
invalidation.then(() => sel.on(".drag", null));
render(context, path);
}
function render(context, path) {
// dark blue sphere
context.fillStyle = "#000";
context.fillRect(0, 0, width, height);
context.beginPath();
path({ type: "Sphere" });
context.fillStyle = "#003";
context.fill();
const clipAngle = projection.clipAngle();
context.globalAlpha = 0.3;
projection.clipAngle(180);
draw(context, path.pointRadius(0.7));
// front globe
context.globalAlpha = 1;
projection.clipAngle(clipAngle);
draw(context, path.pointRadius(1.5));
}
function draw(context, path) {
for (const [value, points] of groups) {
context.beginPath();
path({
type: "MultiPoint",
coordinates: points.map(p => [p.lon, p.lat])
});
context.fillStyle = value === "NA" ? "#666" : color(value);
context.fill();
}
}
data = d3.csv(await FileAttachment("warmer.csv").url())
groups = d3.group(data, d => d.change)
color = d3.scaleSequential(d3.interpolateRdBu).domain([3, -3])
projection = d3.geoSatellite()
.rotate([360 * Math.random(), -45])
.translate([width / 2, height / 2])
height = Math.min(550, width)
d3 = require("d3@7", "d3-inertia@0.2", "d3-geo-projection@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.
