Past: Reuters Graphics, The Times, BBC News Labs.
🇫🇷 in 🇩🇪
{
const div = d3.create('div').attr('id', 'viz');
while (true) {
const children = div.selectAll('.children').data(randomiseData());
const enter = children
.enter()
.append('div')
.attr('class', 'children')
.style('width', d => `${d.w}%`)
.style('transition', 'width 0.5s')
.style('border-width', (d, i) => computeBorder(d, i))
.style('background-color', d => d.color);
const exit = children.exit().remove();
children.merge(children).style('width', d => `${d.w}%`);
yield div.node();
await Promises.tick(1000);
}
}
computeBorder = (d, i) => {
switch (i) {
case 0: // the first bar has only ever border-right...
return '0 1px 0 0';
break;
case d.length - 1: // the last one only ever border-left
return '0 0 0 1px';
break;
default: // and all the others: borders left and right
return '0 1px 0 1px';
}
}
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.
