2b:null 2c:["$","title",null,{"children":"Data-Driven Easing | Fabian Iwand | Observable"}] 31:T724,viewof eases = { const { width: w = 900, height: h = 300, timelineHeight: tlh = 15, pad = 10, eases = [ {ease: d3.easeLinear, color: '#000', timeline: true}, {ease: d3.easeCubicIn, color: '#00f', timeline: true}, {ease: easeRunning(series, {minStep, invert}), color: 'red', timeline: true}, ] } = {}; const timelines = eases.filter(e => e.timeline); const xDomain = [0, series.length-1]; const yDomain = d3.extent(series); const sx = d3.scaleLinear(xDomain, [0, w]); const sy = d3.scaleLinear(yDomain, [h - pad - timelines.length*tlh, pad]); const root = svg`

${[lineDiag, lineVelocity].map(fn => fn(Object.defineProperty(eases[2].ease, 'name', {value:fn.name,writable:true}), {size:300, resolution:1200}))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"series = d3.quantize(t => Math.sin(t*Math.PI*12)*Math.sin(t*Math.PI+.5)+t*axis, count)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"bisect = (interpolate, value, debug = ()=>{}) => {\n let t = .5, s = .5, n = 0, v;\n while((v = interpolate(t)) && Math.abs(value - v) > 1e-6 && n++ < 100) {\n t += Math.sign(value - v) * (s /= 2);\n }\n debug(n);\n return t;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1105,"value":"function loop(fn, invalidate = invalidation) {\n let id;\n invalidate.then(() => cancelAnimationFrame(id));\n (async function loop() {\n await fn();\n id = requestAnimationFrame(loop);\n })();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"createMarker = (defs, type, color, size = 4) => {\n const id = DOM.uid('marker').id, r = size/2;\n defs.append(svg`${{\n line: svg``,\n circle: svg``,\n }[type]}`);\n return {\n 'marker-start': `url(#${id})`,\n 'marker-mid': `url(#${id})`,\n 'marker-end': `url(#${id})`,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"import {lineVelocity, lineVert, lineDiff, lineDiag} from '@mootari/eases-on-edge'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"