Public
Edited
Feb 21, 2024
1 fork
8 stars
chart()
h3 = require("h3-js@3") // needs an update for v4, the API has changed
hexworld = level => ({
type: "FeatureCollection",
features: h3.getRes0Indexes()
.map(i => h3.h3ToChildren(i, level))
.flat()
.map(d => ({
type: "Feature",
properties: { id: d, pentagon: h3.h3IsPentagon(d) },
geometry: {
type: "Polygon",
coordinates: [h3.h3ToGeoBoundary(d, true).reverse()]
}
}))
})
hexagons = hexworld(1) // level 2 is fine, level 3 a bit slow… level 4 oh my
color = d3.scaleSequential(d3.interpolateCool)
projection = d3.geoAirocean()
.angle(-150)
.fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" })
contours = d3.geoContour().value(() => Math.random())(
hexagons.features.map(d3.geoCentroid)
)
function chart() {
const context = DOM.context2d(width, height),
path = d3.geoPath(projection).context(context);
context.beginPath();
path({ type: "Sphere" });
context.fillStyle = color(0);
context.fill();
context.lineWidth = 3;
context.stroke();
context.clip();
context.lineWidth = 0.5;
for (const c of contours) {
context.beginPath();
path(c);
context.strokeStyle = context.fillStyle = color(c.value);
context.fill();
context.stroke();
}
context.beginPath();
context.fillStyle = "orange";
for (const penta of hexagons.features.filter(d => d.properties.pentagon))
path(penta);
context.fill();
context.strokeStyle = "#fff";
context.beginPath();
path(land);
path(hexagons);
context.lineWidth = 0.5;
context.stroke();
context.strokeStyle = "black";
context.beginPath();
path(land);
context.lineWidth = 1.5;
context.stroke();
return context.canvas;
}
d3 = require("d3@7", "d3-geo-voronoi@2", "d3-geo-polygon@1")
land = {
const world = await fetch(
"https://cdn.jsdelivr.net/npm/visionscarto-world-atlas@0.1.0/world/110m.json"
).then((d) => d.json());
return topojson.feature(world, world.objects.countries);
}
height = width * 2.1
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.
