Published
Edited
Jan 31, 2021
19 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
let scrub = html`<span class=draggable>${value}</span>`;
makeScrubbableNumber(d3.select(scrub), 0, 10, 2);
return md`This shows that you can another view of the same mutable value: ${scrub}`;
}
Insert cell
Insert cell
/* adapted from https://www.redblobgames.com/making-of/line-drawing/#lerp-numbers */
function makeScrubbableNumber(elements, low, high, precision) {
let diagram = this;
let positionToValue = d3.scaleLinear()
.clamp(true)
.domain([-100, +100])
.range([low, high]);

function updateNumbers() {
elements.text(() => {
let format = `.${precision}f`;
return d3.format(format)(value);
});
}

updateNumbers();

elements.call(d3.drag()
.subject(() => ({x: positionToValue.invert(value), y: 0}))
.on('drag', event => {
mutable value = positionToValue(event.x);
updateNumbers();
diagram.update();
}));
}
Insert cell
Insert cell
Insert cell

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.
Learn more