Past: Reuters Graphics, The Times, BBC News Labs.
🇫🇷 in 🇩🇪
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let i = 0;
while (true) {
await Promises.tick(900);
yield svg.node();
drawData(svg, data.map(e => ({ ...e, value: Math.random() * e.value })));
}
return svg.node();
}
drawData = (selection, data) => {
const root = pack(data);
const arrayOfBubbles = root
.descendants()
.filter(d => d.depth > 0)
.map((e, i) => {
const { x, y, r } = e;
return CircleComponent({
key: e.data.title,
cx: x,
cy: y,
r: r,
fill: e.data.group
});
});
render(selection, arrayOfBubbles);
}
CircleComponent = ({ key, r, fill, cx, cy }) => ({
append: 'circle',
key,
r,
fill,
cx,
cy,
fill: color(fill),
duration: 1000,
delay: Math.random() * 50
//ease: d3.easeBack
})
oldchart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.node().drawData = function(data) {
const root = pack(data);
const circles = svg
.selectAll('circle')
.data(root.descendants().filter(d => d.depth > 0));
circles.join(
enter =>
enter
.append('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('fill', d => color(d.data.group))
.attr('r', d => d.r),
update =>
update
.transition()
.duration(1000)
.delay(Math.random() * 50)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('fill', d => color(d.data.group))
.attr('r', d => d.r)
);
};
return svg.node();
}
renderoldchart = {
let i = 0;
while (true) {
await Promises.tick(900);
i++;
oldchart.drawData(
data.map(e => ({ ...e, value: Math.random() * e.value }))
);
yield oldchart.nodeName;
}
}
render = d3render.default
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.
