2c:null 2d:["$","title",null,{"children":"Scrubbable numbers | Amit Patel | Observable"}] 32:[] 30:{"id":"6d10e044426449ab","slug":"scrubbable-numbers","title":"Scrubbable numbers","thumbnail":"4ef296f53f52a199d4638bc67344d6eaa9035f3a5a6ddcfdaff0171479b00a1a","access_level":"public","create_time":"$D2018-02-23T01:25:39.984Z","update_time":"$D2021-01-31T04:04:49.851Z","view_time":null,"first_public_time":"$D2018-02-23T01:51:32.858Z","has_unpublished_edits":null,"fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"468ec444dc0eb0ae","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":"starter_2024"},"version":124,"publish_version":124,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null}],"members":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scrubbable numbers","cells":[{"id":0,"value":"md`# Scrubbable numbers\n\n## Proof of concept`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"mutable value = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`CSS rules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"