Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
chart = {
const svg = d3
.create('svg')
.attr('class', 'chart-test')
.call(setSize, width, 100);
const g = svg.append('g');
let node = g.selectAll();
invalidation.then(() => console.log('invalidated'));
return Object.assign(svg.node(), {
update(data) {
scaleRadius.domain([d3.min(data, d => d.value), d3.max(data, d => d.value)]);
scaleX.domain([0, d3.max(data, d => d.id)]);
node = node.data(data, d => d.id).join(enterNode, updateNode);
}
});
}
chart.update(data)
mutable data = d3.range(10).map((_, i) => ({ id: i, value: i }))
onShuffle = () => mutable data = data.map(v => ({ ...v, value: Math.random() * 10 }))
scaleRadius = d3
.scaleLinear()
.range([10, 25])
scaleX = d3
.scaleLinear()
.range([30, width - 30])
enterNode = node =>
node
.append('circle')
.attr('class', 'node')
.attr('data', d => d)
.call(tr =>
tr
.call(setCoords, (d, i) => [scaleX(d.id), 30])
.attr('fill', 'black')
.attr('r', 0)
.transition(200)
.attr('r', d => scaleRadius(d.value))
)
// it appears update does not work for mutable data
updateNode = node =>
node.call(tr =>
tr
.transition(200)
.attr('fill', 'red')
.call(setCoords, d => [scaleX(d.id), 30])
.attr('r', d => scaleRadius(d.value))
)
import { setCoords, setSize, trans2d } from '@rabelais/tree-utils'
d3 = require('d3@v6.3.1')
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.
