2c:null 2d:["$","title",null,{"children":"Reactive transition sketch | Toph Tucker | Observable"}] 32:[] 30:{"id":"f8faf5f328c21d3e","slug":"reactive-transition-sketch","title":"Reactive transition sketch","thumbnail":"bb6ce4d8c7470818d3f36c7bb0a542ac36f846da361a7d88a30cd46673386dfc","access_level":"public","create_time":"$D2020-05-08T21:17:01.923Z","update_time":"$D2020-06-24T23:22:03.326Z","view_time":null,"first_public_time":"$D2020-06-24T23:22:25.210Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2024"},"version":956,"publish_version":956,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"ee48d2d87f751f74","slug":"sketches","title":"Sketches","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Reactive transition sketch","cells":[{"id":0,"value":"md`# Reactive transition sketch\n\nOne great thing about d3 is that it lets you write transitions in basically the same way you write anything else.\n\nOne problem with reactivity is that everything happens too fast. Or rather: in discrete steps, not smooth ramps.\n\nWhen Observable re-evaluates a cell, [\\`this\\` is set to the previous value](https://observablehq.com/@tmcw/untitled/5). Mike Bostock now considers this runtime design to be something of an anti-pattern, as it is very easy to get confusing behavior with nontrivial charts, so **I do not recommend depending on this behavior for anything big.**\n\nBut for trivial examples we can use it to write cells that smoothly transition when their inputs change. Try changing \\`x\\` or \\`y\\` below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"x = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"y = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"md`The first changes instantly; the second changes smoothly:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"x * y","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"transition(500)(this, x * y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"md`Or slower and with a delay:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"z = transition(1000, 500)(this, x * y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"md`Which can feed into further cells:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":512,"value":"Math.sqrt(z)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":522,"value":"md`Or we can smooth slider input:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":525,"value":"viewof a = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":556,"value":"a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"transition(250)(this, a)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"md`\\`transition(duration, delay)\\` returns a interpolator function with a duration of \\`duration\\` ms and a delay of \\`delay\\` ms, to which you pass the cell’s \\`this\\` value (the previous value) and the result of the cell expression, \\`x * y\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":291,"value":"transition = (duration, delay) =>\n async function*(prev, value) {\n if (prev !== undefined) {\n await Promises.delay(delay || 0);\n const i = d3.interpolate(prev, value);\n let t = 0;\n while (t < 1) {\n yield i(t);\n t += 1 / (duration * framerate);\n }\n }\n yield value;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":620,"value":"md`This interpolates the output using [d3.interpolate](https://github.com/d3/d3-interpolate), which works for lots of things, like… \n\n…**numbers!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":848,"value":"numberExample = cycle(1000)([0, 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":850,"value":"transition(500)(this, numberExample)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":855,"value":"md`…**strings!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":863,"value":"stringExample = cycle(1000)([\"The number 1\", \"The number 2\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":865,"value":"transition(500)(this, stringExample)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":874,"value":"md`…**colors!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":804,"value":"colorExample = cycle(1000)([\"red\", \"blue\", \"green\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":796,"value":"transition(500)(this, colorExample)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":877,"value":"md`…**dates!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"dateExample = cycle(1000)([new Date(), new Date(1989, 9, 19)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":907,"value":"transition(500)(this, dateExample)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":888,"value":"md`…**arrays!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":914,"value":"arrayExample = cycle(1000)([[0, 1, 2, 3], [1, 24, 196884, 21493760]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":916,"value":"transition(500)(this, arrayExample)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":889,"value":"md`…and **objects!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":923,"value":"objectExample = cycle(1000)([\n { state: \"New York\", date: new Date(\"2020-03-15\"), cases: 729 },\n { state: \"New York\", date: new Date(\"2020-05-12\"), cases: 338485 }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":925,"value":"transition(500)(this, objectExample)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":839,"value":"md`However, this approach of interpolating the _output_ limits you in a couple ways. First, you can’t interpolate a DOM node:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":628,"value":"viewof n = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":631,"value":"transition(500)(this, html`The value is ${n}.`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":545,"value":"md`Furthermore: although for linear functions, ${tex`f(cx) = cf(x)`}, so interpolating the output is equivalent to interpolating all the inputs, many things are not linear:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":572,"value":"viewof theta = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":576,"value":"coords = transition(500)(this, [Math.cos(theta), Math.sin(theta)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":686,"value":"circle(coords)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"md`Notice that as you move the slider, the “linear” interpolation of coordinates takes you through nonsensical intermediate states, where the dot is inside the circle. So you might prefer to interpolate the inputs. You could either use intermediate cells:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"viewof theta2 = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":602,"value":"smoothTheta2 = transition(500)(this, theta2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":605,"value":"coords2 = [Math.cos(smoothTheta2), Math.sin(smoothTheta2)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":609,"value":"circle(coords2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":698,"value":"md`Or we could rewrite the \\`transition\\` function to save the inputs and interpolate them (in which case the cell must return an object, such as a DOM node).` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":716,"value":"transitionInputs = (duration, delay) =>\n async function*(prev, expr, args) {\n if (prev !== undefined) {\n await Promises.delay(delay || 0);\n const i = args.map((arg, index) => d3.interpolate(prev.args[index], arg));\n let t = 0;\n while (t < 1) {\n yield Object.assign(\n expr.apply(this, args.map((_, index) => i[index](t))),\n { args }\n );\n t += 1 / (duration * framerate);\n }\n }\n yield Object.assign(expr.apply(this, args), { args });\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":776,"value":"md`Now try changing \\`i\\` or \\`j\\` and watch the cells with the sum below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":710,"value":"i = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"j = 140","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":747,"value":"md`Now, instead of just passing the result of the cell expression, you have to pass a function that passes the inputs to be interpolated, as well as an array of those inputs:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":740,"value":"html`The sum is ${i + j}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":731,"value":"transitionInputs(1000)(\n this,\n (i, j) => html`The sum is ${i + j}.`,\n [i, j]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":950,"value":"md`Even if I don’t reuse any of this code, it was a good exercise in thinking reactively with interpolators. It whet my appetite for Shan to introduce me to [RxJS’s streams](https://rxjs-dev.firebaseapp.com/), which you can combine and transform as visualized by [RxJS Marbles](https://rxmarbles.com/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":655,"value":"// Generators get called 60 times per 1000 milliseconds:\n// https://observablehq.com/@observablehq/introduction-to-generators\nframerate = 60 / 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":580,"value":"circle = coords => svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"cycle = delay =>\n async function*(arr) {\n let i = 0;\n while (true) {\n yield arr[i % arr.length];\n i++;\n await Promises.delay(delay);\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"