Public
Edited
Mar 16
2 forks
1 star
Insert cell
Insert cell
Insert cell
// a more concise version:
// data = Array.from({length: count}, d3.randomInt(500))
Insert cell
count = 15
Insert cell
Insert cell
Insert cell
objects = d3.select(svg).selectAll("text") // in the SVG, select all text objects that already exist
.data(data) // bind those objects to the data
.join("text") // join with any new blank objects needed left-join on data->graphics)
.transition().duration(1000)
.attr("x", d => d) // update properties of all of them based on the (new) data
.attr("y", (d,i) => 30 + i*15)
.text(d => d)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chosenData
Insert cell
objects2 = d3.select(svg2).selectAll("text")
.data(chosenData)
.join("text")
.transition().duration(1000)
.attr("x", d => d)
.attr("y", (d,i) => 30 + i*15)
.text(d => d)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more