Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Apr 23, 2020
1 fork
21 stars
chart = {
replay;
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.style("background", "#333")
.attr("stroke", "currentColor")
.attr("stroke-width", 1.5);
svg.selectAll("circle")
.data(circles)
.join("circle")
.attr("fill", d => color(d.angle = Math.atan2(d.y, d.x)))
.attr("cx", d => Math.cos(d.angle) * (size / Math.SQRT2 + 30))
.attr("cy", d => Math.sin(d.angle) * (size / Math.SQRT2 + 30))
.attr("r", d => d.r - 0.25)
.transition()
.ease(d3.easeCubicOut)
.delay(d => Math.sqrt(d.x * d.x + d.y * d.y) * 10)
.duration(1000)
.attr("cx", d => d.x)
.attr("cy", d => d.y);
return svg.node();
}
color = d3.scaleSequential([0, 2 * Math.PI], d3.interpolateRainbow)
circles = d3.packSiblings(d3.range(2000)
.map(d3.randomUniform(8, 26))
.map(r => ({r})))
.filter(d => -500 < d.x && d.x < 500 && -500 < d.y && d.y < 500)
width = 954
height = width
size = Math.max(width, height)
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.
