2f:T677,

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":"Better embedded inputs and UI","cells":[{"id":0,"value":"# Better embedded inputs and UI \n# (in visual) \nThe same as the [Visual Filter](https://observablehq.com/d/9b400bfc9c648676?collection=@emfielduva/interface-and-dynamics) example, but this time showing how to embed custom and style-able buttons and interface elements directly into the visual. Unfortunately the Observable Inputs, as great as they are, cannot be moved around and styled directly inside of the visual interface. These can. @observable if you have an answer to positioning/floating and css styling inputs, please let me know.\n\nTo see a more complete and integrated example, see [Powerplants 2 - Visual Filters UI](https://observablehq.com/@emfielduva/powerplants_2?collection=@emfielduva/powerplants)","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$2f","pinned":true,"hidden":false,"mode":"html"},{"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\", () => filter(\"name\",\"one\"));\n btns.select(\"#btn-two\").on(\"click\", () => filter('name','two'));\n btns.select(\"#btn-three\").on(\"click\", () => filter('name','three'));\n btns.select(\"#btn-four\").on(\"click\", () => filter('name','four'));\n btns.select(\"#btn-five\").on(\"click\", () => filter('name','five'));\n\n btns.select(\"#btn-dimAll\").on(\"click\", dimAll);\n btns.select(\"#btn-showAll\").on(\"click\", showAll);\n\n btns.select(\"#slider\").on(\"input\", (evt) => filterGreater(\"value\", evt.target.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(data)\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"},{"id":110,"value":"^^ the `circles` data object contains both graphics and data. \nThis can be used to visually filter on criteria.","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"### our custom filter functions are here \nThat the above buttons call.","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"dimAll = () => {\n // first a function to dim (change opacity) of all of the circle objects\n circles.style(\"opacity\",0.1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"showAll = () => {\n // and this one to show them (or rather reset to default value, which is 1)\n circles.style(\"opacity\", \"\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"filter = (field,val) => {\n // create a function to increase opacity only for a single element, via its data.\n dimAll(); // first we call dimAll to dim all of them.\n circles.filter(d => d[field] === val).style(\"opacity\", 1); // find the ones where field = value and change opacity\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"filterGreater = (field,val) => {\n // create a function to increase opacity only for a single element, via its data.\n dimAll(); // first we call dimAll to dim all of them.\n circles.filter(d => d[field] >= val).style(\"opacity\", 1); // find the ones where field = value and change opacity\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}