Scrubbable numbers Proof of concept
{ let scrub = html`<span class=draggable>${width}</span>`; makeScrubbableNumber(d3.select(scrub), 0, 10, 2); return md`Here's a paragraph with an inline number instead of a slider: width=${scrub}. I previously implemented this with d3-drag [here](https://www.redblobgames.com/making-of/line-drawing/#lerp-numbers), inspired by Bret Victor's [Tangle library](http://worrydream.com/Tangle/). I want to make the same work in Observable.`; }
svg`<svg viewBox="0 0 100 10"> <rect width="100" height="10" fill="hsl(60,20%,90%)"/> <rect width="${value * 10}" height="10" fill="hsl(240,50%,50%)"/> </svg>`
How do I make this work in Observable? I create a mutable that contains all the slider values:
mutable value = 3
I also created a <span> and then applied d3-drag to it. The drag handler writes updated values to the mutable. (I love d3-drag!)
{ 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}`; }
Question: How do I make this modular so that the makeScrubbleNumber function supports many different mutables? Is it possible to pass a mutable reference into a function? Should I be using this implementation?
/* 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', () => { mutable value = positionToValue(d3.event.x); updateNumbers(); diagram.update(); })); }
html`<style> .draggable { cursor:col-resize; padding:4px 6px; text-align:center; line-height:1.5; background-color:hsla(60,50%,95%,0.8); box-shadow:0 0 4px hsla(0,0%,0%,0.3); border-radius:4px; font-weight:bold; } .draggable:hover { box-shadow: 0 0 4px hsla(240,50%,50%,1.0); } </style>CSS rules`
d3 = require('d3')