31:T474,The format should look familiar to you: we create an `x`; // Programmatically create an HTML button\n button.onclick = () => ++mutable x; // Attach an event to `onclick`, which increments x by 1\n return button; // Render the button\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"You can take advantage of this structure to write up a whole slew of unique combinations. Observe the code below: we create two buttons programmatically that modify `x`, and we wrap everything using the `html` method. This gives us a huge leverage of how to control the arrangement and appearance of input elements (i.e. using CSS, which you can begin to read more about [_here_](https://www.w3schools.com/css/css_intro.asp) if you are unfamiliar).","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"{\n const increment_button = html``; // Programmatically create an HTML button to increment x\n increment_button.onclick = () => ++mutable x; // Attach an event to `onclick`\n\n const decrement_button = html``; // Programmatically create an HTML button to decrement x\n decrement_button.onclick = () => --mutable x; // Attach an event to `onclick`\n\n const reset_button = html``; // Programmatically create an HTML button to reset x to 0\n reset_button.onclick = () => mutable x = 0; // Attach an event to `onclick`\n \n return html`

${increment_button}${decrement_button}${reset_button}

`; // Render all three buttons\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"### Method #2: `viewof` and `Inputs.button(...)`\n\nWe do something very similar to the above. Let's say we have a variable `y`:","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"y","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"To programmatically create the button, we use `Inputs.button()`. We can just use a simple \"Increment y\" text, but if we wanted to use HTML (i.e. to replicate the italicization of \"x\" in Method #1's button), then we can use `html` as so:","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"viewof y = Inputs.button(html`Increment y`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"Note the `viewof` modifier we appended to `y`. Unlike the `mutable` modifier we used with `x`, we use `viewof` as a way to simultaneously _bind_ and _store_ data from our input. \n\nBy default, `Input.button(...)` will assume that `y` is a number and is meant to be incremented when you click the button. You can change this default behavior; observe the code below, which modifies are `time` variable to show the current date and time whenever the button is clicked:","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"viewof time = Inputs.button(\"Update Date and Time\", {value:null, reduce: () => new Date})","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"time","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"We can leverage `Inputs.button()` to programmatically generate multiple button prompts simultaneously and attach event listeners to each of them:","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"viewof y2 = Inputs.button([\n [\"Increment y\", value => value + 1],\n [\"Decrement y\", value => value - 1],\n [\"Reset y\", value => 0]\n], {value: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"y2","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"#### [TO-DO]\n\nCreate a basic button prompt that does the following:\n\n1. Creates a variable `calc_value` that is set to 0 by default.\n2. Create 5 buttons that doe the following each:\n 1. Increments `calc_value` by 5\n 2. Decrements `calc_value` by 5\n 3. Multiplies `calc_value` by 2\n 4. Divides `calc_value` by 3\n 5. Resets `calc_value` to 0.\n\nYou are free to use either Method #1 or Method #2 for this approach.","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"\n// TO-DO\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"## Mouse Events and Interactions\n\nMouse events are events tied specifically to mouse interactions with the DOM. This is useful for generating _tooltips_, similar to Vega-Lite's `.tooltip()` modifier we've worked with prior. In this part, let's take some time to understand what's going on with the DOM and the mouse.","pinned":false,"hidden":false,"mode":"md"},{"id":155,"value":"### Mouse Events\n\nThere are three events that will be key to mouse interactions in JavaScript:\n\n- `mouseover`: Triggers when the mouse begins to hover over an element. \n- `mousemove`: Triggers when the mouse moves along the screen.\n- `mouseout`: Triggers when the mouse stops hovering over an element.\n\nWe will need to access these events and the data binded to them.","pinned":false,"hidden":false,"mode":"md"},{"id":311,"value":"### Example: Pie Charts and Mouse Events","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"Swatches(ice_cream.scales.color_scale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"## Transitions\n\nIn the above solution, the opacity of the pie segments instantaneously changes depending on the mouse interaction. However, sometimes we want these dynamic changes to have **transitions**. This allows the interactions of your charts to appear more visually interesting.\n\nObserve the following code sample:\n\n````js\nd3.select(\"body\")\n .transition()\n .style(\"background-color\", \"red\");\n````\n\nIn this code example, when `` is loaded into the DOM, D3 will perform a transition to adjust the \"background-color\" of `` to \"red\". D3's transitions support various transition types, such as `.transition().attr()` and `.transition().style()`.\n\nThe [_documentation_](https://d3js.org/d3-transition) summarizes the idea pretty effectively. Take the time to read through the documentation and look at the [_Timing_](https://d3js.org/d3-transition/timing) and [_Control Flow_](https://d3js.org/d3-transition/control-flow) of transitions.","pinned":false,"hidden":false,"mode":"md"},{"id":292,"value":"#### [TO-DO]\n\nCopy the pie chart above into the code block below. Modify the chart so that, on either `mouseover` or `mouseout`, add a transition that has a duration of 500ms.","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"Swatches(ice_cream_transitions.scales.color_scale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"ice_cream_transitions = {\n\n // TO-DO\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"## Standout Examples of Interactions\n\nThere are a multitude of different examples of interactive visualizations out there. Here are some standout examples. Pay attention to how they code variables, track mouse events, and implement any transitions and such.\n\n- [_A button to make the visualization a full-screen interaction_](https://observablehq.com/@mradamcox/interactive-map-mosaic)\n- [_Input Events with Line Graphs, by D3_](https://observablehq.com/@d3/learn-d3-interaction)\n- [_Mouse interactions with scatter plots, legends, and more, by Enrico Bertini's Visualization Lab_](https://observablehq.com/@nyuvis/interaction)","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":233,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"function cloneAndAppend(child, parent) {\n const childClones = [];\n \n child.each(function(p, j) {\n const original = d3.select(this);\n const cloneNode = original.node().cloneNode(true);\n const cloneSelection = d3.select(cloneNode);\n cloneSelection.datum(original.datum());\n \n cloneSelection.select('*'); // propogate data down.\n childClones.push(cloneNode);\n\n if (parent) {\n parent.node().appendChild(cloneNode);\n }\n });\n \n return d3.selectAll(childClones);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"pie_data = [{\n title: \"Soft-serve\",\n value: 286,\n all: 1098\n },\n {\n title: \"Scooped\",\n value: 472,\n all: 1098\n },\n {\n title: \"No Preference\",\n value: 318,\n all: 1098\n },\n {\n title: \"Unsure\",\n value: 22,\n all: 1098\n }\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"pie_data_students = FileAttachment(\"ice_cream_results.csv\").csv({typed:true}).then(rows => {\n return Object.values(rows.reduce((acc, row) => {\n const v = row['Vote(s)']\n acc[v] = acc[v] || { value: v, count: 0 };\n acc[v].count++;\n return acc;\n }, {}))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"### References & Inspirations\n\n- [Holger Stitz's _\"Interactive filtering\" Tutorial_](https://observablehq.com/@thinkh/step-5-filter-us-cities?collection=@thinkh/build-your-first-d3-bar-chart)\n- [D3's _Inputs Overview_](https://observablehq.com/documentation/inputs/overview)\n- [KJ Schmidt's _Show data on mouse-over with d3.js_](https://medium.com/@kj_schmidt/show-data-on-mouse-over-with-d3-js-3bf598ff8fc2)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W35","stdlib":"1","titling":"auto"}