Stats | Art | Data Science | SciComm | Teaching
Public
Edited
Oct 1, 2023
2 stars
{
playAgain;
var data = d3.range(25); // Creates a range of values
const myColor = myPalette; // Color palette (see below)
var r = 150, // Set up big circle
w = r * 4,
slices = 360 / data.length;
var svg = d3.select(DOM.svg(500, 500));
svg
.selectAll("circle") // Select all matching elements (not yet created...)
.data(data) // Data used to create
.join("circle") // Circles get joined to data
.attr("fill", (d, i) => myColor[i]) // Fill circles by index position from interpolated palette
.attr("r", 20) // Individual dot radii
.attr("cx", 250) // Recenter horizontal
.attr("cy", 250) // Recenter vertical
.transition() // Add a transition
.duration(1000) // How long for each
.ease(d3.easeBackOut.overshoot(5)) // What type of transition
.delay((d, i) => i * 100) // How long to delay transition for each dot
.attr(
// Where the dots end up
"transform",
(d, i) =>
"translate(" +
(w / 2 - r) * Math.cos((slices * i * Math.PI) / 180) +
"," +
(w / 2 - r) * Math.sin((slices * i * Math.PI) / 180) +
")"
);
return svg.node();
}
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.
