3e:null 3f:["$","title",null,{"children":"Learn D3: Animation | Jordan Kanter | Observable"}] 45:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1695676795457.198,"size":48822}] 43:{"id":"baa35fa4c7e19ce3","slug":null,"title":"Learn D3: Animation","thumbnail":"343ed05474a64fd1536054d08c121c223593a6423aac0f6f9f7b9e406c73c89f","access_level":"public","create_time":"$D2023-09-25T21:19:55.457Z","update_time":"$D2023-09-25T21:19:55.457Z","view_time":null,"first_public_time":"$D2023-09-25T21:19:55.457Z","has_unpublished_edits":null,"fork":{"id":"de13bdb9fdabe52a","slug":"learn-d3-animation","title":"Learn D3: Animation","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2ada5078780e6af5","login":"jordankanter","name":"Jordan Kanter","avatar_url":"https://avatars-next.observableusercontent.com/85a14bf092886e0a8ce520ca8b196adb4c018bf790a297ed39af574977267204","tier":"starter_2024","bio":"","following":false},"version":1532,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f010e68bc516b02b","login":"jordankanter","name":"Jordan Kanter","avatar_url":"https://avatars-next.observableusercontent.com/85a14bf092886e0a8ce520ca8b196adb4c018bf790a297ed39af574977267204","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"f010e68bc516b02b","login":"jordankanter","name":"Jordan Kanter","avatar_url":"https://avatars-next.observableusercontent.com/85a14bf092886e0a8ce520ca8b196adb4c018bf790a297ed39af574977267204","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learn D3: Animation","cells":[{"id":168,"value":"# Learn D3: Animation\n\nUnlike graphics drawn on paper, computer graphics needn’t be static; like Frankenstein’s monster, they can come alive through animation! ✨","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"{\n replay; // references the button above, causing this cell to run on click\n return htl.html``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"The line chart above reveals progressively. This is somewhat gratuitous—motion should be used sparingly as it commands attention—but it at least reinforces that *x* represents time and introduces a touch of suspense to an otherwise ho-hum chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"The code here is similar to the axis rendering we saw previously: we select an SVG path element, call a function (*reveal*) to apply a transition, and lastly embed the element in the HTML template literal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"reveal = path => path.transition()\n .duration(5000)\n .ease(d3.easeLinear)\n .attrTween(\"stroke-dasharray\", function() {\n const length = this.getTotalLength();\n return d3.interpolate(`0,${length}`, `${length},${length}`);\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"Before we get into the minutiae of techniques, though, let’s take a step back to think about animation more generally.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"An animation is not a single graphic but a *sequence* of graphics over time. This sequence can be represented as a cell (or function) that returns the graphic for a given time *t*. For simplicity, we often use normalized time where *t* = 0 is the start of the animation and *t* = 1 is the end.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"viewof t = Scrubber(d3.ticks(0, 1, 200), {\n autoplay: false,\n loop: false,\n initial: 0,\n format: x => `t = ${x.toFixed(3)}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"lineLength = htl.svg``.getTotalLength()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"Our cell could theoretically return *any* graphic for a given time *t*, but often the graphic for time *t* is similar to the one for time *t* + ϵ. This similarity from frame to frame helps the viewer follow along. (Above, only the stroke-dasharray attribute animates; the rest of the graphic remains constant.) Hence, continuous animations are often defined by discrete keyframes with intermediate frames generated by interpolation, or [*tweening*](https://en.wikipedia.org/wiki/Inbetweening).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"Consider the stroke-dasharray attribute. It is two comma-separated numbers: the first is the length of the dash, and the second the length of the gap between dashes. If the dash length is zero, then the line will be invisible; if the dash length is as long as the line, then the line will be unbroken. By adjusting the dash length and keeping the gap at least as long as the line, we can control how much of the line is stroked. And we only need two keyframes: a zero-length dash and a line-length dash.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"To assist with animation (among other uses), D3 provides [interpolators](/collection/@d3/d3-interpolate). The most generic of these, [d3.interpolate](/@d3/d3-interpolate), accepts numbers, colors, strings-of-numbers, and even arrays and objects. Given a *start* and *end* value, d3.interpolate returns a function that takes a time 0 ≤ *t* ≤ 1 and returns the corresponding inbetween value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"strokeDasharray = d3.interpolate(`0,${lineLength}`, `${lineLength},${lineLength}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"strokeDasharray(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"When defining a transition, you can either specify the interpolator explicitly (as above using [*transition*.attrTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween)) or let D3 choose (using [*transition*.attr](https://github.com/d3/d3-transition/blob/master/README.md#transition_attr) or [*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style)). Being explicit allows more advanced interpolation methods such as [zooming](/@d3/d3-interpolatezoom), [gamma-corrected RGB blending](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate_gamma), or even [shape blending](/@mbostock/hello-flubber).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"ramp(d3.interpolateRgb(\"steelblue\", \"orange\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"ramp(d3.interpolateRgb.gamma(2.2)(\"steelblue\", \"orange\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"Animation is more than interpolation, however: it’s also timing. We need to redraw sixty times a second, and to compute the normalized time *t* based on real time and the desired start time and duration of the animation.\n\nWe’ve seen two timing methods so far.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"The first relies on D3’s transitions, creating an initial graphic and then starting a transition to modify it (interpolating the stroke-dasharray).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"The second relies on Observable’s dataflow, recreating the graphic whenever the referenced *t* changes and relying on a [scrubber](/@mbostock/scrubber) for timing. This is less efficient than the previous method because the graphic is created from scratch each frame, but easier to write.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"Observable has another powerful tool for controlling animation: [*generators*](/@observablehq/introduction-to-generators). When a generator cell yields a value, its execution is suspended until the next animation frame, up to sixty times per second. The yielded value can be as simple as an integer—or it can be an incrementally-updating SVG element!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"viewof replay2 = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"{\n replay2; // reference the button so this cell re-runs on click\n for (let i = 0, n = 300; i < n; ++i) {\n yield i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"{\n replay2; // reference the button so this cell re-runs on click\n\n const path = htl.svg``;\n\n const chart = htl.html``;\n\n for (let i = 0, n = 300; i < n; ++i) {\n const t = (i + 1) / n;\n path.setAttribute(\"stroke-dasharray\", `${t * lineLength},${lineLength}`);\n yield chart;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"Given the variety of possible approaches to animation in Observable, which should you use? It depends!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"If the graphic is simple enough that you can recreate it from scratch each frame—or if you don’t actually need animated transitions—then write the graphic declaratively. In other words, do nothing! Thanks to Observable’s dataflow, a “static” graphic can be made responsive, interactive, or animated without changing its code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"On other hand, for dynamic graphics of greater complexity—where performance necessitates efficient incremental updates—employ transitions or generators.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"You can also combine approaches. The graphic below is initially static, but exposes a *chart*.update method to transition to a given *x*-domain; this method is called by another cell when the selected value of the radio input changes. (This code is written using d3-selection rather than HTML template literals, but the graphic structure is the same as earlier examples, so try inferring the code’s meaning by comparison.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"viewof timeframe = Inputs.radio(new Map([\n [\"All\", d3.extent(data, d => d.date)],\n [\"2009\", [new Date(\"2009-01-01\"), new Date(\"2010-01-01\")]],\n [\"2010\", [new Date(\"2010-01-01\"), new Date(\"2011-01-01\")]],\n [\"2011\", [new Date(\"2011-01-01\"), new Date(\"2012-01-01\")]],\n]), {key: \"All\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto; height: intrinsic;\");\n\n const zx = x.copy(); // x, but with a new domain.\n\n const line = d3.line()\n .x(d => zx(d.date))\n .y(d => y(d.close));\n\n const path = 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 const gx = svg.append(\"g\")\n .call(xAxis, zx);\n\n const gy = svg.append(\"g\")\n .call(yAxis, y);\n\n return Object.assign(svg.node(), {\n update(domain) {\n const t = svg.transition().duration(750);\n zx.domain(domain);\n gx.transition(t).call(xAxis, zx);\n path.transition(t).attr(\"d\", line(data));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"update = chart.update(timeframe)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"By exposing one or more update methods, a chart can selectively animate transitions for specific value changes. If anything else changes, the chart falls back to passive reactivity and is redrawn from scratch.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"(If you’re wondering: you could define the update in a separate cell rather than exposing it as a method. However, this is not advised because editing the update code would not redraw the chart from scratch, which might result in nondeterministic behavior. 😱 And by defining the update within the chart cell, it can access local variables that persist across updates.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1448,"value":"This example demonstrates another handy feature of D3 axes: by switching to [*transition*.call](https://github.com/d3/d3-transition/blob/master/README.md#transition_call) instead of *selection*.call, the change in the *x*-axis is now animated rather than instantaneous, and synchronized with the transitioning path!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"The animations above conveniently involve only a single element: the chart’s line. What if you want to animate multiple elements? And what if the set of elements changes over time, with new elements entering and old elements exiting? Read on!\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"---\n\n## Appendix\n\nIf you’re interested in designing effective animations, I highly recommend reading Heer and Robertson’s 2007 paper, [*Animated Transitions in Statistical Data Graphics*](http://vis.berkeley.edu/papers/animated_transitions/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"data = FileAttachment(\"aapl-bollinger.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"line = d3.line().x(d => x(d.date)).y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"xAxis = (g, scale = x) => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(scale).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"yAxis = (g, scale = y) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(scale).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"