Public
Edited
Sep 6, 2023
function update(svg) {
const text = 'abcdefghijklmnopqrstuvwxyz'.split('')
const data = text.filter(() => Math.random() > 0.2)
const letters = svg.selectAll('text')
.data(data, d => d)
// Remove the exit selection
letters.exit()
.transition()
.duration(500)
.attr('fill','red')
.attr('y', -5)
.remove()
// Append elements for the enter selection
const enter = letters.enter()
.append("text")
.attr('fill','green')
.attr('y', -5)
// Merge the enter selection and make any edits we want to make to all our items.
letters.merge(enter)
.text(d => d)
.attr('x', (d, i) => text.indexOf(d) * width / 26)
.transition()
.duration(700)
.attr('fill','grey')
.attr('y', width / 26)
}
{
const svg = d3.create('svg')
.attr("width", width)
.attr("height", width / 13 + 20)
.style('font-family', 'sans-serif')
.style('font-size', width / 26)
.style('text-transform','uppercase')
.style('font-weight', 900)
let counter = 0;
while (true) {
await Promises.tick(1000)
updateNested(svg, counter)
counter += 1
yield svg.node()
}
}
function updateNested(svg, counter) {
const data = alphabet.filter((d,i) => (i) < counter % (alphabet.length + 1))
const groups = svg.selectAll('g')
.data(data, d => d.letter)
.join(
enter => {
const g = enter.append('g')
// Append elemnents and add any initial state they may need.
g.append('text')
.attr('fill','white');
g.append('circle')
.attr('r', 0)
.attr('fill','grey');
return g;
},
// Skip updating existing elements in favour of using the joined selection afterwards.
update => update,
exit => {
// Fancy exit
exit.select('text').transition()
.duration(500)
.attr('fill','red')
.attr('y', -5)
exit.select('circle').transition()
.duration(500)
.attr('r',0)
return exit.transition().delay(500).remove()
}
)
groups.select('text')
.text(d => d.letter)
.attr('x', (d, i) => (alphabet.findIndex(x => d.letter === x.letter) + 0.5) * width / 26)
.attr('y', width / 26)
.attr('text-anchor','middle')
.transition()
.duration(500)
.attr('fill','grey')
groups.select('circle')
.attr('cx', (d, i) => (alphabet.findIndex(x => d.letter === x.letter) + 0.5 )* width / 26 )
.attr('cy', width / 26 + 40)
.transition()
.ease(d3.easeBounce)
.duration(500)
.attr('r', (d) => d.frequency * width / 26 * 4)
}
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.
