Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
sunset = {
replay;
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("rect")
.attr("stroke", "none")
.attr("fill", backgroundColor)
.attr("x", "0")
.attr("y", "0")
.attr("width", width)
.attr("height", height);
svg
.selectAll("circle")
.data(circles)
.join("circle")
.attr("stroke", "black")
.attr("stroke-width", lineWidth)
.attr("cy", -100) // Start the sun above the image...
.attr("cx", (d) => d.x * width)
.attr("r", (d) => d.r)
.transition()
.duration(nLines * 300 + 1000) // ...and slowly move it...
.attr("cy", (d) => d.y * height) // ...down to its intended y position
.attr("fill", circleColor);
svg
.append("g")
.selectAll("path")
.data(lines)
.join("path")
.attr("stroke", "black")
.attr("stroke-width", lineWidth)
.attr("d", startArea) // Start the mountains (areas) at the startArea positions, i.e. flat horiz. lines at y=height...
.transition()
.duration(800)
.delay((d, i) => (nLines - i) * 200) //... and transition them one by one...
.attr("fill", (_, i) =>
d3.interpolateInferno(0.9 * ((i + 1) / (lines.length + 1)))
)
.attr("d", area); // ...to their real areas (series of points with varying y positions)
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.
