drawCountries = {
const context = DOM.context2d(width, height),
path = d3.geoPath(projection, context);
yield context.canvas;
context.beginPath();
path({ type: "Sphere" });
context.stroke();
context.lineWidth = .5;
for (const circle of countries.features.map(encloseFeature)) {
context.beginPath();
path(
d3
.geoCircle()
.center(circle.c)
.radius(circle.r)()
);
context.fillStyle = color(circle.r);
context.globalAlpha = .2;
context.fill();
context.globalAlpha = 1;
context.stroke();
}
context.globalAlpha = .1;
context.fillStyle = "#000";
context.beginPath();
path(countries);
context.fill();
}
import { enclose } from "@fil/spherical-smallest-circle-problem"
function encloseFeature(f) {
const { type, coordinates } = f.geometry;
return enclose(
coordinates.flat(type == "Polygon" ? 1 : 2) /*.map(d => ((d[2] = 0.1), d))*/
);
}
d3 = require("d3@5", "d3-geo-projection@2")
countries = fetch(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_countries.geojson"
).then(d => d.json())
projection = d3
.geoLarrivee()
.rotate([-10, 0])
.fitExtent([[2, 2], [width - 2, height - 2]], { type: "Sphere" })
color = d3.scaleOrdinal(d3.schemeDark2)
import { select } from "@jashkenas/inputs"
height = 720
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.
