Published
Edited
Apr 19, 2021
6 stars
{
// setup
const scale = d3.scaleLinear([10, width - 10]).domain([0, 100]);
const axis = g => g.call(d3.axisBottom(scale));
const svg = d3
.create('svg')
.attr('viewBox', `0 0 ${width} 30`)
.on('click', () => {
// set new domain
scale.domain([randomNum(40), randomNum(1000)]);
// apply transition to axis group (could also be the SVG) and call axis function
g.transition()
.duration(1000)
.call(axis);
});
const g = svg.append('g').call(axis);
return svg.node();
}
function randomNum(num) {
return d3.randomUniform(0, num)();
}
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.
