30:T62a,d3js1 = { replayD3JS; cart23; const { cart2, cart3 } = cart23; const div = d3.create('div') .attr('class', 'canvas') .html(`

.ease(d3.easePolyInOut)

.ease(t => f(t))

`) yield div.node() // give the container dimensions const W = div.node().getBoundingClientRect().width const customEaseIn = t => (cart2[3][1] - 3*cart2[2][1] + 3*cart2[1][1])*Math.pow(t, 3) + (3*cart2[2][1] - 6*cart2[1][1] + 3*cart2[0][1])*Math.pow(t, 2) + (3*cart2[1][1] - 3*cart2[0][1])*t + cart2[0][1] const customEaseOutOffset = t => (cart3[3][1] - 3*cart3[2][1] + 3*cart3[1][1])*Math.pow(t-1, 3) + (3*cart3[2][1] - 6*cart3[1][1] + 3*cart3[0][1])*Math.pow(t-1, 2) + (3*cart3[1][1] - 3*cart3[0][1])*(t-1) + cart3[0][1] + 1 // based on https://github.com/d3/d3-ease/blob/master/src/poly.js#L31 const customEase = t => ((t*=2) <= 1 ? customEaseIn(t) : customEaseOutOffset(t) )/2 const ball = createMerge(div, 'div', 'demo-1', [0,1]) .style('background-color', d => d === 0 ? colorLookup.purple : 'purple') .style('left', '0px') .style('top', d => 35 + d*20 + 'px') .transition() .call(t => t.filter(d => d === 0).ease(d3.easePolyInOut)) .call(t => t.filter(d => d === 1).ease(customEase)) .duration(3000) .style('left', (W - 12) +'px') .transition() .style('left', '0px') }31:Td9a,md`--- ## More math #### ¹Bezier curve control points The default easing function in CSS is a cubic Bezier — it has four control points — and in D3 it's a 3^rd degree polynomial. Restricting this discussion to cubic functions made it easier to implement interactivity in this notebook. However, Bezier curves with fewer or more control points can also be converted to polynomials. I think an ${tex`n^{th}`} degree curve will always have ${tex`n+1`} control points but I'm sure with why. #### ²Converting from control points to a Cartesian equation D3 defines its default cubic functions, \`d3.easePolyIn\` and \`d3.easePolyOut\`, with these equations: ${tex` f(t)_{t\leq0.5} = t^3 \newline f(t)_{t>0.5} = 1 - (1 - t)^3 = t^3 - 3t^2 + 3t `}
Getting from the four control points of a cubic Bezier curve (what CSS uses) to a cubic polynomial function (what D3 uses) involves first representing the Bezier curve as a set of parametric equations. [Javascript.info](https://javascript.info/bezier-curve) gives this version: ${tex` P = (1−t)^3P_1 + 3(1−t)^2tP_2 +3(1−t)t^2P_3 + t^3P_4 \newline `}
where each ${tex`P`} represents the ${tex`(x, y)`} pair of a control point. To make it easier to turn this into a 3^rd degree polynomial, I expanded it and got: ${tex` f(t) = (P_4 - 3P_3 + 3P_2 - P_1)t^3 + (3P_3 - 6P_2 + 3P_1)t^2 + (3P_2 - 3P_1)t + P_1 `}
This is actually two parametric equations: ${tex` x(t) = (x_4 - 3x_3 + 3x_2 - x_1)t^3 + (3x_3 - 6x_2 + 3x_1)t^2 + (3x_2 - 3x_1)t + x_1 \newline y(t) = (y_4 - 3y_3 + 3y_2 - y_1)t^3 + (3y_3 - 6y_2 + 3y_1)t^2 + (3y_2 - 3y_1)t + y_1 `}
To convert this to Cartesian form, I *think* we can set ${tex`x(t) = t`}, then substitute in the control points for their ${tex`y_n`} values, then use ${tex`y(t)`}, but I admit I am fuzzy on this step. ##### What about polynomial to Bezier? You could run this process in reverse by taking a polynomial function in the form: ${tex` f(t) = at^3 + bt^2 + ct + d `}
then setting up and solving a system of linear equations for ${tex`x(t)`} and ${tex`y(t)`} to get your control points: ${tex` a = P_4 - 3P_3 + 3P_2 - P_1\newline\newline b = 3P_3 - 6P_2 + 3P_1\newline c = 3P_2 - 3P_1\newline d = P_1\newline `}
##### Pascal's Triangle You may remember Pascal's Triangle from high school precalculus. The pattern shows up repeatedly in these functions, and could be useful for translating to other-degree Bezier curves or polynomials: ${tex`\newline \:\:\:\:\:\:\:\:1\newline \:\:\:\:\:\:1\:\:1\newline \:\:\:\:1\:\:2\:\:1\newline \:\:1\:\:3\:\:3\:\:1\newline 1\:\:4\:\:6\:\:4\:\:1\newline `} #### ³D3 easing is piecewise The default easing function in D3 is defined piecewise: one function for ${tex`t\leq0.5`} and another for ${tex`t>0.5`}. This means that we need to do some transformation in order to make the two equations run in sequence for ${tex`0 \leq t \leq 1`}. The approach implemented in the [D3 source code](https://github.com/d3/d3-ease/blob/master/src/poly.js#L31) is to scale the transition to ${tex`0 \leq t \leq 2`} and divide each function by two. For the second half of the piecewise function, we also translate the function by 1 in the X and Y dimensions. If we call these transformed functions ${tex`y'`}, we can represent them as: ${tex` y_{t\leq0.5}=f(t) \newline y_{t\leq0.5}'=f(t) / 2 \newline y_{t>0.5}=g(t) \newline y_{t>0.5}'=(g(t - 1) + 1)/2 \newline `} `32:T425,html` `33:T892,cartesian = (points, color) => { const D = 400 const node = this || DOM.svg(D, D) const svg = d3.select(node); const M = 50 node.value = points; const initPoints = [ ...points ]; const x = d3.scaleLinear().domain([0, 1]).range([M, D - M]) const y = x.copy().range([D - M, M]) const xAxis = createOnce(svg, 'g', 'x-axis') .attr('transform', `translate(0, ${D - M})`) .call(d3.axisBottom(x).tickSize(-D + 2*M)) const yAxis = createOnce(svg, 'g', 'y-axis') .attr('transform', `translate(${M}, 0)`) .call(d3.axisLeft(y).tickSize(-D + 2*M)) // https://observablehq.com/@d3/circle-dragging-i // https://observablehq.com/@fil/drag-to-re-arrange function onDrag(d, i){ // lock in P1 and P4 const newX = i === 0 ? 0 : i === 3 ? 1 : x.invert(d3.event.x) const newY = i === 0 ? 0 : i === 3 ? 1 : y.invert(d3.event.y) points[i] = [ Math.max(0, Math.min(1, newX)), Math.max(0, Math.min(1, newY)) ]; node.value = points; node.dispatchEvent(new CustomEvent("input")); draw(); } function draw(){ const pointGroup = createMerge( svg, 'g', 'point-group', [{ points: initPoints, color: colorLookup[color] }, { points, color }] ) .attr('fill', d => d.color); createMerge(pointGroup, 'path', 'bezier', d => [d]) .attr('d', d => bezier(x, y, d.points)) .attr('fill', 'none') .attr('stroke', d => d.color) .attr('stroke-width', '2px'); const g = createMerge( pointGroup, 'g', 'node', d => d.points.map((e,i) => [...e, d.color, i === 0 || i === 3]) ) .attr('transform', d => `translate(${x(d[0])}, ${y(d[1])})`) .call(d3.drag().on("drag", onDrag)); createMerge(g, 'text', 'node-text', d => [d]) .attr('x', 5) .attr('y', -5) .style('font-size', '16px') .text(d => `(${round(d[0])}, ${round(d[1])})`); createMerge(g, 'circle', 'node-circle', d => [d]) .attr('fill', d => d[3] ? 'none' : '') .attr('stroke', d => d[3] ? d[2] : '') .attr('r', d => d[3] ? 4 : 5) .attr('opacity', 0.7); } draw(); return node }34:[] 2e:{"title":"Take it ease-y","cells":[{"id":0,"value":"md`# Take it ease-y`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"md`The path an element takes during an animated transition can be defined by an _easing_ function. When we animate a property from value A to value B, the easing function determines how that property gets from A to B as a function of time. For example, if we transition an HTML element's \\`left\\` position from \\`0%\\` to \\`100%\\`, then the easing function returns a value between 0 and 100 at each tick of the transition.\n\nThis interactive essay explores the math behind easing functions in CSS and D3.js. These are two common tools for implementing animated transitions in data visualization, but they use different methods for defining easing functions, which makes it challenging to create the same transition in both tools.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"md`---\n## 1. CSS and Bezier curves`","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"md`Easing functions can make transitions seem more graceful and natural, for example by starting out slowly, speeding up in the middle, and slowing down at the end, as if obeying the laws of physics. The default easing function in CSS (technically called a \\`transition-timing-function\\`) is defined as a cubic *Bezier curve*.\n\nHere's what that behavior looks like:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"{\n replayCSS;\n return html`\n

transition-timing-function: ease;

transition-timing-function: cubic-bezier(${round(cart1[1][0])}, ${round(cart1[1][1])}, ${round(cart1[2][0])}, ${round(cart1[2][1])});

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"viewof replayCSS = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"md`We can customize the second easing function by dragging the Bezier curve's *control points*.¹ The second transition above will automatically update, while the first easing function will stay as the default. The two transitions will take different paths, but they will still have the same \\`transition-duration\\`.\n\nThis graph shows the completion of the transition (vertical) as a function of time (horizontal). The slope of the curve is the speed of the transition at any given time.\n\nDrag the filled in control points to change the Bezier curve:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof cart1 = {\n resetCSS;\n const points = [ ...cart1Init ]\n return cartesian(points, 'darkgreen')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"viewof resetCSS = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`---\n## 2. D3.js and polynomial functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"md`D3 takes a similar approach to its transitions, but instead of using Bezier curves, easing is defined using polynomial functions. The default ease is actually defined as two different cubic functions, one for the first half (${tex`t \\leq 0.5`}) of the transition and another for the second half (${tex`t > 0.5`}).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"{\n cart23;\n const { cart2, cart3 } = cart23;\n return html`

${\ntex`f(t)_{t\\leq0.5} = ${round(cart2[3][1] - 3*cart2[2][1] + 3*cart2[1][1])}t^3 + ${round(3*cart2[2][1] - 6*cart2[1][1] + 3*cart2[0][1])}t^2 + ${round(3*cart2[1][1] - 3*cart2[0][1])}t + ${cart2[0][1]}`\n}

${\ntex`f(t)_{t>0.5} = ${round(cart3[3][1] - 3*cart3[2][1] + 3*cart3[1][1])}t^3 + ${round(3*cart3[2][1] - 6*cart3[1][1] + 3*cart3[0][1])}t^2 + ${round(3*cart3[1][1] - 3*cart3[0][1])}t + ${cart3[0][1]}`\n}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"viewof replayD3JS = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"md`Luckily, we can convert between polynomial functions and Bezier curves, which are defined as parametric functions.² When you drag the control points, the corresponding curves get converted to polynomial functions and passed to the D3 transition's easing method in the transition above.\n\nOnce again, the second easing function will update, while the first easing function will continue to show the default.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"viewof cart23 = {\n resetD3JS;\n const w = 45;\n \n const points2 = [ ...cart2Init ]\n const points3 = [ ...cart3Init ];\n const cart2 = cartesian(points2, 'red')\n const cart3 = cartesian(points3, 'blue')\n\n const node = html`

\n First half of the transition\n ${cart2}\n

\n Second half of the transition\n ${cart3}\n

`\n node.value = {\n cart2: cart2.value,\n cart3: cart3.value\n }\n \n cart2.addEventListener(\"input\", () => { \n node.value.cart2 = cart2.value;\n node.dispatchEvent(new CustomEvent(\"input\"));\n })\n cart3.addEventListener(\"input\", () => {\n node.value.cart3 = cart3.value;\n node.dispatchEvent(new CustomEvent(\"input\"));\n })\n\n return node\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"viewof resetD3JS = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"md`The combined shape of the curves is quite similar to the Bezier curve above, even though we arrive at them using different approaches.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"viewof showOverlay = checkbox([\"Overlay default CSS Bezier curve\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1520,"value":"{\n const { cart2, cart3 } = cart23;\n const data = [\n {\n points: cart2.map(d => d.map(e => e/2)),\n color: 'red'\n },\n {\n points: cart3.map(d => d.map(e => e/2 + 0.5)),\n color: 'blue'\n },\n ]\n if (showOverlay){\n data.push({\n points: cart1Init,\n color: 'green'\n })\n }\n let cart4 = cartesianDisplay(data);\n return html`

Transformed to show the two halves of the transition³

\n ${cart4}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"md`Understanding the math behind some common tools for animated transitions allows us to go beyond the defaults and create our own custom transitions.\n\nCSS transitions are easy to write and run very fast in the browser, but not every property/attribute can be transitioned through CSS. The \\`d3-transition\\` module has powerful tools for binding transitions to data and chaining them together. Occasionally, it makes sense to use both of them at the same time — in which case we need to be able to convert our equations to a common format.\n\nI'm not an expert in these mathematical concepts, but the following section describes my calculations and understanding of them.\n\n**Update**: Thanks to [@mbostock](https://observablehq.com/@mbostock) for the suggestion on refactoring my D3 transition!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`---\n### Resources\n* https://javascript.info/bezier-curve\n* https://www.symbolab.com/solver/system-of-equations-calculator/\n* https://buildingvts.com/mathematical-intuition-behind-bezier-curves-2ea4e9645681\n* https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp\n* https://github.com/d3/d3-ease\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"cart1Init = [\n [0, 0],\n [0.25, 0.1],\n [0.25, 1],\n [1, 1]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"cart2Init = [\n [0, 0],\n [1/3, 0],\n [2/3, 0],\n [1, 1]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"cart3Init = [\n [0, 0],\n [1/3, 1],\n [2/3, 1],\n [1, 1]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"round = d => Math.round(d*1e4)/1e4","pinned":false,"hidden":false,"mode":"ojs"},{"id":1597,"value":"colorLookup = ({\n 'darkgreen': 'limegreen',\n 'red': 'pink',\n 'blue': 'lightblue',\n 'purple': 'plum'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"inputform = (values, disabled, color) => {\n values.x1 = values.x1 || 0\n values.y1 = values.y1 || 0\n values.x4 = values.x4 || 1\n values.y4 = values.y4 || 1\n return form(html``)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"cartesianDisplay = (points) => {\n const D = 400\n const node = this || DOM.svg(D, D)\n const svg = d3.select(node);\n const M = 50\n \n const x = d3.scaleLinear().domain([0, 1]).range([M, D - M])\n const y = x.copy().range([D - M, M])\n const xAxis = createOnce(svg, 'g', 'x-axis')\n .attr('transform', `translate(0, ${D - M})`)\n .call(d3.axisBottom(x).tickSize(-D + 2*M))\n const yAxis = createOnce(svg, 'g', 'y-axis')\n .attr('transform', `translate(${M}, 0)`)\n .call(d3.axisLeft(y).tickSize(-D + 2*M))\n \n const pointGroup = createMerge(svg, 'g', 'point-group', points)\n .attr('stroke', d => d.color)\n .attr('fill', 'none');\n \n createMerge(pointGroup, 'path', 'bezier', d => [d])\n .attr('d', d => bezier(x, y, d.points))\n .attr('stroke', d => d.color)\n .attr('stroke-width', '2px');\n\n const g = createMerge(pointGroup, 'circle', 'node', d => d.points)\n .attr('cx', d => x(d[0]))\n .attr('cy', d => y(d[1]))\n .attr('r', 4)\n .attr('opacity', 0.7);\n\n return node\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1460,"value":"bezier = (x, y, points) => \n `M${x(points[0][0])},${y(points[0][1])} \n C${x(points[1][0])},${y(points[1][1])} \n ${x(points[2][0])},${y(points[2][1])} \n ${x(points[3][0])},${y(points[3][1])}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"objToPoints = (obj, color) => Array.from(\n d3.rollup(Object.entries(obj), values => [...values.map(v => v[1]), color], d => d[0][1]).values()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"// adapted from @mbostock/form-input\nform = {\n function formValue(form) {\n const object = {};\n for (const input of form.elements) {\n if (!input.hasAttribute(\"name\")) continue;\n let value = input.value;\n switch (input.type) {\n case \"range\":\n case \"number\": {\n value = input.valueAsNumber;\n break;\n }\n }\n object[input.name] = value;\n }\n return object;\n }\n \n return function form(form) {\n const container = html`

${form}`;\n form.addEventListener(\"submit\", event => event.preventDefault());\n form.addEventListener(\"change\", () => container.dispatchEvent(new CustomEvent(\"input\")));\n form.addEventListener(\"input\", () => container.value = formValue(form));\n container.value = formValue(form);\n return container\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"import {checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"import { createOnce, createMerge } from '@anbnyc/utility-library'","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"d3 = {\n const d3 = await require('d3@5')\n const d3Array = await require('d3-array@2')\n return Object.assign(d3, d3Array)\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}