${formatDate(d.date)}\n${formatClose(d.close)}

30:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1582388457578.911,"size":48822}] 2e:{"title":"Learn D3: Interaction","cells":[{"id":34,"value":"# Learn D3: Interaction\n\nThere’s almost always too much information than can reasonably “fit” in a graphic. Thus design is not just deciding *how* to show something, but *what* to show and what not to show based on what we think matters to the imagined reader.","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"And thanks to computers, the *actual* reader can now have a say: the graphic can be tailored on demand to the reader’s interests.","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"Yet this power is a double-edged sword. Interactivity allows the reader to surface more information, but forces the reader to work for it. If we’re not careful, we may hide important insights behind controls that readers never click.","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"If our intent is to communicate something known, we should design an effective static graphic before even considering interaction. On the other hand, if we seek to explore the unknown, then interaction can be faster than coding a new graphic (but consider also visualization grammars for exploration, such as [Vega-Lite](https://vega.github.io/vega-lite/))!","pinned":false,"hidden":false,"mode":"md"},{"id":636,"value":"A good guideline for interaction is Ben Shneiderman’s [information-seeking mantra](https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf):\n\n> *Overview first, \n> zoom and filter, \n> then details on demand.*","pinned":false,"hidden":false,"mode":"md"},{"id":700,"value":"The *overview* is the initial form of the graphic. Its purpose is not to show everything (this is impossible), but to give a “macro” view of all the data. The overview is a map that guides the reader’s exploration.","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"*Zooming* and *filtering* are methods of culling what is shown to focus on a topic of interest. We previously saw controls to crop the chart to individual years; there’s also [free-form zooming](/@d3/zoomable-area-chart), [panning](/@d3/pannable-chart) and [focus + context](/@d3/focus-context). If we were comparing many time series, we might want filtering as in the [multi-line chart example](/@d3/multi-line-chart). See also the [brushable scatterplot matrix](/@d3/brushable-scatterplot-matrix).","pinned":false,"hidden":false,"mode":"md"},{"id":702,"value":"*Details on demand* allows the reader to extract exact values from the chart, rather than be limited to visual approximations. This can be as simple as tooltips.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"One approach to tooltips is to liberally sprinkle title elements into SVG. Mouseover (and wait briefly) to see the Apple stock price for a particular day below.","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"Above, ${(data.length - 1).toLocaleString(\"en\")} invisible rect elements vertically span the chart and horizontally span adjacent data points (computed with [d3.pairs](https://d3js.org/d3-array/transform#pairs)). When the mouse hovers a rect, the text of the child title element is shown. Thus, the displayed tooltip is a function of the mouse’s *x*-position, which is most appropriate for time-series charts where *y* is the dependent variable.","pinned":false,"hidden":false,"mode":"md"},{"id":299,"value":"A more general approach is a [Voronoi overlay](https://d3js.org/d3-delaunay), where the closest data point to the mouse determines the tooltip. (The Voronoi diagram is drawn below for clarity… and because it looks cool. You wouldn’t typically show it.)","pinned":false,"hidden":false,"mode":"md"},{"id":293,"value":"voronoi = d3.Delaunay\n .from(data, d => x(d.date), d => y(d.close))\n .voronoi([0, 0, width, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"Native tooltips have several drawbacks: they can be sluggish to appear; mobile browsers don’t support them; and it’s not always obvious which data point is associated with the tooltip, especially when using a Voronoi diagram.\n\nWith a little more work, though, we can have custom tooltips.","pinned":false,"hidden":false,"mode":"md"},{"id":318,"value":"{\n const tooltip = new Tooltip();\n return htl.html``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"The ordering of elements here is important: SVG does not support *z*-order, so to draw the tooltip on top of the line and axes, it must be last.","pinned":false,"hidden":false,"mode":"md"},{"id":527,"value":"Whereas native tooltips appear automatically, custom tooltips typically require event listeners. These functions are invoked by the browser when the user performs an action, such as moving the mouse over an element. The listeners above capture data (*a* and *b*) in a closure to know what to show when the event is triggered.","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"The custom tooltip is implemented in the class below. It exposes a *tooltip*.node property (an SVG g element) for embedding, and *tooltip*.show and *tooltip*.hide methods to update the tooltip as needed. This affords some flexibility in how the tooltip is triggered.","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"class Tooltip {\n constructor() {\n this._date = htl.svg``;\n this._close = htl.svg``;\n this.node = htl.svg`\n \n ${this._date}\n ${this._close}\n \n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${x(d.date)},${y(d.close)})`);\n this._date.textContent = formatDate(d.date);\n this._close.textContent = formatClose(d.close);\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"The chart above uses [hypertext literal](/@observablehq/htl), but we can implement an identical chart in the D3 style. Use whichever you prefer!","pinned":false,"hidden":false,"mode":"md"},{"id":639,"value":"{\n const tooltip = new Tooltip();\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"d\", line(data));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"pointer-events\", \"all\")\n .selectAll(\"rect\")\n .data(d3.pairs(data))\n .join(\"rect\")\n .attr(\"x\", ([a, b]) => x(a.date))\n .attr(\"height\", height)\n .attr(\"width\", ([a, b]) => x(b.date) - x(a.date))\n .on(\"mouseover\", (event, [a]) => tooltip.show(a))\n .on(\"mouseout\", () => tooltip.hide());\n\n svg.append(() => tooltip.node);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"Tooltips triggered by *mouseover* events can be expensive: they require a separate element for each hoverable area of the chart. For complex charts, you may improve performance by calculating what is hovered on demand.\n\nA particularly efficient approach for data sorted on one dimension, such as our time-series data here, is [bisection](https://observablehq.com/@d3/d3-bisect) on *mousemove*.","pinned":false,"hidden":false,"mode":"md"},{"id":495,"value":"{\n const tooltip = new Tooltip();\n return htl.html``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"Bisection finds the value closest to the mouse (along *x*). The function below first computes the index of the data point closest to the specified date (assuming that the data is sorted in ascending order), and then returns the associated data.","pinned":false,"hidden":false,"mode":"md"},{"id":502,"value":"bisect = {\n const bisectDate = d3.bisector(d => d.date).center;\n return (data, date) => data[bisectDate(data, date)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"All the examples above demonstrate *local* interaction: interacting with the chart only affects the chart itself. One of the most exciting aspects of Observable is that language-level reactivity makes it easy for interaction in one cell to ripple to any other cell in the notebook for *global* interaction!","pinned":false,"hidden":false,"mode":"md"},{"id":1030,"value":"Most interactive controls in Observable are implemented as [views](/@observablehq/introduction-to-views). To make a view, define a viewof cell that returns an HTML input element. The input’s live current value will then be exposed to the rest of the notebook.\n\nFor example, here’s a number controlled by a range input.","pinned":false,"hidden":false,"mode":"md"},{"id":563,"value":"viewof number = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"number","pinned":true,"hidden":false,"mode":"ojs"},{"id":1040,"value":"Similarly, here’s a text input that exposes its value as you type, and a drop-down menu for choosing one of a number of fixed options.","pinned":false,"hidden":false,"mode":"md"},{"id":570,"value":"viewof name = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"name","pinned":true,"hidden":false,"mode":"ojs"},{"id":961,"value":"viewof fruit = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":963,"value":"fruit","pinned":true,"hidden":false,"mode":"ojs"},{"id":1232,"value":"While the above inputs are implemented by hand, more often on Observable we use [Observable Inputs](/observablehq/inputs), which provide conveniences such as labels and formatting.","pinned":false,"hidden":false,"mode":"md"},{"id":1239,"value":"viewof foo = Inputs.range([0, 100], {step: 1, label: \"Favorite number\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1249,"value":"foo","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"(Remember earlier when we saw generators for [animation](/@d3/learn-d3-animation?collection=@d3/learn-d3)? These views involve generators, too: when you use the viewof operator, Observable implicitly creates an [asynchronous input generator](https://github.com/observablehq/stdlib/blob/master/README.md#Generators_input) that yields a new value whenever you interact with the view.)","pinned":false,"hidden":false,"mode":"md"},{"id":1114,"value":"But views aren’t limited to HTML inputs—they can be anything! The only requirement is that the view exposes a *value* property and emits *input* events whenever that value changes.","pinned":false,"hidden":false,"mode":"md"},{"id":585,"value":"Even charts can be views. The chart below [dispatches synthetic input events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) when the mouse moves.\n\n${hover ? `Apple stock closed at ${formatClose(hover.close)} on ${formatDate(hover.date)}.` : `Hover the chart below to inspect values.`}","pinned":false,"hidden":false,"mode":"md"},{"id":587,"value":"viewof hover = Object.assign(htl.html``, {\n value: null // set initial value\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"hover","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"For animation, consider a [scrubber](/@mbostock/scrubber).","pinned":false,"hidden":false,"mode":"md"},{"id":950,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":952,"value":"viewof i = Scrubber(d3.range(100), {\n autoplay: false,\n loop: false\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"i","pinned":true,"hidden":false,"mode":"ojs"},{"id":1137,"value":"We raced through a variety of interaction techniques in this tutorial—tooltips, event listeners, Voronoi overlays, views—but there’s so much more we didn’t cover! For starters, we didn’t even mention D3’s reusable behaviors: [brushing](https://github.com/d3/d3-brush), [zooming](https://github.com/d3/d3-zoom), and [dragging](https://github.com/d3/d3-drag). (For self-directed study, find examples in the [D3 gallery](/@d3/gallery) and [collections](/@d3?tab=collections).)","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"In fact, now that we’ve covered the basics, it’s a good time to step back and reflect on where to go from here.\n\nNext","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"---\n\n## Appendix\n\nFor more on interaction, read Gregor Aisch’s [defense of interactive graphics](https://www.vis4.net/blog/2017/03/in-defense-of-interactive-graphics/).","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"data = FileAttachment(\"aapl-bollinger.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"line = d3.line().x(d => x(d.date)).y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"formatDate = d3.utcFormat(\"%b %-d, ’%y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"formatClose = d3.format(\"$.2f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}