31:[] 2f:{"title":"Scrubbable numbers","cells":[{"id":0,"value":"md`# Scrubbable numbers\n\n## Proof of concept`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"{\n let scrub = html`${width}`;\n makeScrubbableNumber(d3.select(scrub), 0, 10, 2);\n 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.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`How do I make this work in Observable? I create a [mutable](https://beta.observablehq.com/@jashkenas/introduction-to-mutable-state) that contains all the slider values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"mutable value = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`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!)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"{\n let scrub = html`${value}`;\n makeScrubbableNumber(d3.select(scrub), 0, 10, 2);\n return md`This shows that you can another view of the same mutable value: ${scrub}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`**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](https://beta.observablehq.com/@jashkenas/manual-mutable-values)?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"/* adapted from https://www.redblobgames.com/making-of/line-drawing/#lerp-numbers */\nfunction makeScrubbableNumber(elements, low, high, precision) {\n let diagram = this;\n let positionToValue = d3.scaleLinear()\n .clamp(true)\n .domain([-100, +100])\n .range([low, high]);\n\n function updateNumbers() {\n elements.text(() => {\n let format = `.${precision}f`;\n return d3.format(format)(value);\n });\n }\n\n updateNumbers();\n\n elements.call(d3.drag()\n .subject(() => ({x: positionToValue.invert(value), y: 0}))\n .on('drag', event => {\n mutable value = positionToValue(event.x);\n updateNumbers();\n diagram.update();\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"html`CSS rules`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}