2f:T60d,

Your clever title

Highlight:

Choose a value:

Other explanation, notes, and text can go here.
This can help to tell your reader what to do.
Note that this entire controls section can be positioned whereever you want in the visual.

30:[] 2d:{"title":"HTML inputs controlling Observable UI inputs","cells":[{"id":0,"value":"# HTML inputs controlling Observable UI inputs \nExtending the [Better UI inputs](https://observablehq.com/d/fc91dfd071be41b6) example, but this shows how floating HTML inputs embedded in the visual space can be used to control (set value of) an Observable `view of` input element. The Observable Inputs are great to have live and dynamic control over passing data, filtering, etc. using the Observable data flow approach. But as of yet at least cannot be moved around and styled directly inside of the visual interface. They must be in-line in-code cells (I'd love to find a way to make them float and embed in the DOM.) \n\nBut through this approach (which I recently just discovered based on Observable's [Synchronized Inputs](https://observablehq.com/@observablehq/synchronized-inputs) example) you can have both.","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":408,"value":"### the Observable UI elements with viewof","pinned":false,"hidden":false,"mode":"md"},{"id":386,"value":"viewof myValue = Inputs.input(2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"Technically the two inputs below are not even necessary (comment them out and you'll see), but they're here to demonstrate the concept.","pinned":false,"hidden":false,"mode":"md"},{"id":391,"value":"Inputs.bind(Inputs.range([1, 5], {label: \"Slider value\", step: 1}), viewof myValue)","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"Inputs.bind(Inputs.select(new Map([[\"One\", 1], [\"Two\", 2], [\"Three\", 3], [\"Four\", 4], [\"Five\", 5]]), {label: \"Select one\"}), viewof myValue)","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"### which can now control a data filter for instance:","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"filteredData = data.filter(d => d.value == myValue)","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"## setInput function\nThe critical piece here is the setInput function. This handles passing a value from the HTML UI input to a parallel Observable `view of` UI element. \n\nThe dispatchEvent is what makes this work. There must be a way to implement this into an HTML input, but as I understand it the Observable UI inputs have a hidden data cell associated with them that would also need to be replicated. I need to look into that more.","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"function setInput(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"{\n // then we attach an .on(\"click\", () => doSomething) to each of the buttons or control inputs above.\n const btns = d3.select(vizContainer).select(\"#controls\");\n\n // register event listeners\n btns.select(\"#btn-one\").on(\"click\", function() {setInput(viewof myValue, 1)});\n btns.select(\"#btn-two\").on(\"click\", function() {setInput(viewof myValue, 2)});\n btns.select(\"#btn-three\").on(\"click\", function() {setInput(viewof myValue, 3)});\n btns.select(\"#btn-four\").on(\"click\", function() {setInput(viewof myValue, 4)});\n btns.select(\"#btn-five\").on(\"click\", function() {setInput(viewof myValue, 5)});\n\n btns.select(\"#slider\").on(\"input\", function() {setInput(viewof myValue, this.value)});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"container = d3.select(vizContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"viz = container.select(\"svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"data = [\n {\"name\": \"one\", \"value\": 1},\n {\"name\": \"two\", \"value\": 2},\n {\"name\": \"three\", \"value\": 3},\n {\"name\": \"four\", \"value\": 4},\n {\"name\": \"five\", \"value\": 5}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"circles = viz.select(\"#layer1\").selectAll(\".mycircle\")\n .data(filteredData)\n .join(\"circle\")\n .classed(\"mycircle\", true)\n .attr(\"cx\",d => d.value * 100)\n .attr(\"cy\", 150)\n .attr(\"r\", d => d.value * 10)\n .style(\"fill\",\"steelblue\");","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}