Published
Edited
Dec 15, 2021
1 fork
Transition from previous value to new value
data = {
return Array(Math.ceil(Math.random()*6)).fill().map(d => [Math.ceil(Math.random()*6), Math.ceil(Math.random()*6)])
}
graph = {
const svg = d3.create("svg")
const teams = svg.selectAll("g")
.data(data, d => d)
.join(enter => {
const append = enter.append("g")
append.attr("transform", d => `translate(0, ${d[1]*10})`)
append.append("text")
.text(d => d[0])
return append}
,
update => update
.attr("transform", d => `translate(0, ${d[1]*10})`)
,
exit => exit.remove())
teams.call(update => update
.transition()
.delay(500)
.duration(500)
.attr("transform", d => `translate(0, ${d[1]*10})`)
// .transition()
.end()
// .attr("transform", d => `translate(0, ${d[1]*20})`)
)
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.
