Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published unlisted
Edited
Oct 11, 2021
viewof centX = Inputs.range([0, 200], {value: 100, step: 1, label: "Center X of circle"})
viewof centY = Inputs.range([0, 200], {value: 100, step: 1, label: "Center Y of circle"})
viewof rad = Inputs.range([10, 25], {value: 15, step: 0.1, label: "Radius of circle"})
view = {
const svg = d3.create('svg')
.attr('width', 200)
.attr('height', 200)
.style('background-color', 'whitesmoke');
const circle = svg.append('circle')
.attr('fill', 'blue')
.attr('cx', viewof centX.value)
.attr('cy', viewof centY.value)
.attr('r', viewof rad.value)
.call(d3.drag()
.on('drag', (event) => {
viewof centX.value = clamp(viewof centX.value + event.dx, 0, 200);
viewof centY.value = clamp(viewof centY.value + event.dy, 0, 200);
viewof centX.dispatchEvent(new Event('input', {bubbles: true}));
viewof centY.dispatchEvent(new Event('input', {bubbles: true}));
}));
const onx = () => circle.attr('cx', viewof centX.value);
const ony = () => circle.attr('cy', viewof centY.value);
const onr = () => circle.attr('r', viewof rad.value);
viewof centX.addEventListener('input', onx);
viewof centY.addEventListener('input', ony);
viewof rad.addEventListener('input', onr);
invalidation.then(() => {
viewof centX.removeEventListener('input', onx);
viewof centY.removeEventListener('input', ony);
viewof rad.removeEventListener('input', onr);
});
return svg.node();
}
clamp = (num, min, max) => Math.min(Math.max(num, min), max);
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.
