Sequential drawing
On how to draw shapes in a sequential fashion
{
const width = 1000
const height = 700
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
showCircles()
function showCircles(i = 0){
if (i < 200) {
const randy = 200-400*Math.random()
const randx = 400-800*Math.random()
const randc = Math.random()
group
.append("circle")
.attr("cx", 500 + randx)
.attr("cy", 300 + randy)
.attr("r", 10 + 6 * Math.random() )
.style("opacity", 0)
.attr("fill", d3.rgb(80,50+205*randc,50+205*randc))
// .attr("fill", d3.rgb(255*Math.random(),255*Math.random(),255*Math.random()))
.transition()
.duration(100)
.ease(d3.easeLinear)
.style("opacity", .7)
.on("end", function () {
showCircles(++i);
});
}
}
return svg.node();
}
d3 = require("d3@6")
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.
