Public
Edited
Mar 27
count = 15
randNums = Array.from({length: count}, d3.randomInt(500))
mySVG = svg`<svg width="${width}" height="200" viewBox="0 0 ${width} 200"></svg>`
circles.filter(d => d > 300).style("fill", "orange")
svgCanvas = d3.select(mySVG)
text = svgCanvas.selectAll("text")
.data(randNums)
.join("text")
.transition().duration(1000)
.attr("x", (d,i) => d)
.attr("y", (d,i) => 15 + i * 10)
.text(d => d)
.style("text-anchor", "middle");
circles = svgCanvas.selectAll("circle")
.data(randNums)
.join("circle")
//.transition().duration(1000)
.attr("cx", (d,i) => d)
.attr("cy", (d,i) => 15 + i * 10)
.attr("r", d => d/10)
.style("fill", "none")
.style("stroke", "steelblue");
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.
