Public
Edited
Sep 18, 2023
2 stars
<svg
viewBox="0 0 ${width} ${width}"
stroke-linecap="square"
fill="none"
>
${levels.map(resolution => htl.svg`<g stroke=${color(resolution)} stroke-width=${resolution / 100} opacity="0.5">
${d3.range(0, width + 1, resolution)
.map((d) => htl.svg`<path d="M 0 ${d} H ${width}"></path>`)}
${d3.range(0, width + 1, resolution)
.map((d) => htl.svg`<path d="M ${d} 0 V ${width}"></path>`)}
</g>`)}
</svg>
update = {
let j = 0;
const full = [width / 2, width / 2, width / 2];
let window = full;
while (playing) {
const newWindow = j === 10 ? full : [
Math.random() * width,
Math.random() * width,
2 ** (Math.random() * Math.log2(width / 2))
];
const i = d3.interpolateZoom(window, newWindow);
console.log(d3.select(grid));
const transition = d3
.select(grid)
.transition()
.duration(3000)
.attrTween(
"viewBox",
() =>
function (t) {
const [cx, cy, w] = i(t);
return `${cx - w} ${cy - w} ${w * 2} ${w * 2}`;
}
);
await transition.end();
window = newWindow;
j++;
yield true;
await Promises.delay(2000);
}
}
levels = d3.range(10).map(d => width / 2 ** d).reverse()
color = d3.scaleSequentialLog(d3.extent(levels), d3.interpolateRainbow)
import {PlayButton} from "@tophtucker/scrapbook"
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.
