here to learn
MathJaxPolygon inputMultiple SankeysDrag to re-arrange (vertical edition)Dijkstra's algorithm (huge version)d3 quadtrees with more dataDLA + CA rules!Fullscreen CanvasD3 ScatterplotD3 Log-Scaled HistogramDijkstra's algorithm (d3-delaunay version)TOCNotebook Visualizer (Firefox-compatible)Lazy DownloadDOM.download(callback) feature request [solved]Version Pinning for Notebooks
Hexagonal World (coloring by country)
{
const offscreenContext = DOM.context2d(width, height, 1);
const offscreenPath = d3.geoPath(projection, offscreenContext);
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
// Initialize the context’s path with the desired boundary.
for (const c of countries){
offscreenContext.beginPath();
offscreenPath(c);
// hacky random color string
context.fillStyle = '#' + (Math.random().toString(16) + "000000").substring(2, 8);
// Iterate over the grid and test whether points are inside.
for (let j = 0, y = j * dy; y < height + r; y += dy, ++j) {
for (let x = (j & 1) * dx / 2; x < width + dx / 2; x += dx) {
if (offscreenContext.isPointInPath(x, y)) {
context.beginPath();
hexagonPath(context, x, y, r);
context.fill();
}
}
yield context.canvas;
}
}
}
function hexagonPath(context, x, y, r) {
context.moveTo(x, y - r);
for (let a = 1; a < 6; ++a) {
const angle = a * Math.PI / 3;
context.lineTo(x + Math.sin(angle) * r, y - Math.cos(angle) * r);
}
context.closePath();
}
function cells(j) {
const offscreenContext = DOM.context2d(width, height, 1);
const offscreenPath = d3.geoPath(projection, offscreenContext);
const rings = [];
// Initialize the context’s path with the desired boundary.
offscreenContext.beginPath();
offscreenPath(countries[j]);
// Iterate over the grid and test whether points are inside.
for (let j = 0, y = j * dy; y < height + r; y += dy, ++j) {
for (let x = (j & 1) * dx / 2; x < width + dx / 2; x += dx) {
if (offscreenContext.isPointInPath(x, y)) {
rings.push(hexagonPoints(x, y, r));
}
}
}
return {
type: "MultiPolygon",
coordinates: rings.map(ring => [ring])
};
}
function hexagonPoints(x, y, r) {
const points = [[x, y - r]];
for (let a = 1; a < 6; ++a) {
const angle = a * Math.PI / 3;
points.push([x + Math.sin(angle) * r, y - Math.cos(angle) * r]);
}
points.push([x, y - r]);
return points;
}
// The following works but is slow and useless
// {
// const context = DOM.context2d(width, height);
// const path = d3.geoPath(null, context);
// context.beginPath();
// for (let j = 0; j < countries.length; j++) {
// path(cells(j));
// context.fillStyle = "#eee";
// context.fill();
// context.stroke();
// }
// return context.canvas;
// }
topology = (j) => topojson.topology({cells:cells(j)}, 1e6)
merge = j => {
const top = topology(j);
return topojson.merge(top, [top.objects.cells]);
}
{
const context = DOM.context2d(width, height);
const path = d3.geoPath(null, context);
context.beginPath();
for (let j = 0; j<countries.length; j++) {
path(merge(j));
context.fillStyle = "#eee";
context.fill();
context.stroke();
}
return context.canvas;
}
height = {
const [[minX, minY], [maxX, maxY]] = d3.geoPath(projection).bounds({type: "Sphere"});
return Math.round(maxY - minY + dy);
}
projection = d3.geoEqualEarth().fitWidth(width, {type: "Sphere"})
countries = topojson.feature(world, world.objects.countries).features
land = topojson.feature(world, world.objects.land)
world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.json")
topojson = require("topojson-server@3", "topojson-client@3")
d3 = require("d3@5")
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.
