{
const width = 640;
const height = 640;
const inset = 40;
const radius = 12;
const data = d3.cross(d3.ticks(-1, 1, 20), d3.ticks(-1, 1, 20));
const circle = d3.geoCircle()();
const projection = d3.geoOrthographic().translate([0, 0]).scale(radius);
const path = d3.geoPath(projection);
const scaleX = d3.scaleLinear([-1, 1], [inset, width - inset]);
const scaleY = d3.scaleLinear([-1, 1], [inset, height - inset]);
return SVG.svg({
width,
height,
style: "background:black",
children: [
SVG.g(data, {
transform: ([x, y]) => `translate(${scaleX(x)}, ${scaleY(y)})`,
children: [
([x, y]) => {
// prettier-ignore
const l = ((Math.hypot(x, y) + Math.atan2(y, x) / (Math.PI * 2) - (now / 3000)) % 1) * -360;
projection.rotate([0, l, -l]);
return SVG.path({ d: path(circle), fill: "white" });
}
]
})
]
});
}
SVG = cm.SVG
cm = require(await FileAttachment("charming.umd.min.js").url())
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.
