30:T421,function config(type, settings = {}) { let value = {}; const form = html``; for (const [name, {value: defaultValue, transform = x => +x}] of Object.entries(settings)) { value[name] = transform(defaultValue); form[name].value = defaultValue; form[name].parentNode.querySelector("output").value = value[name].toFixed(2); form[name].oninput = () => { form.value = value = {...value, [name]: +transform(form[name].valueAsNumber).toPrecision(3)}; form[name].parentNode.querySelector("output").value = value[name].toFixed(2); }; } form.value = value; return form; }31:T422,function chart(eases) { const line = d3.line(); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", `${width}px`) .style("overflow", "visible"); svg.append("g") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linecap", "round") .selectAll("path") .data(eases) .join("path") .attr("stroke-width", (e, i) => i < eases.length - 1 ? 0.25 : null) .attr("d", e => line(d3.ticks(0, 1, width).map(t => [x(t), y(e(t))]))); svg.append("g") .call(xAxis) .call(g => g.append("text") .attr("x", width - margin.right) .attr("y", -3) .attr("fill", "currentColor") .attr("font-weight", "bold") .text("t")); svg.append("g") .call(yAxis) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("t′")); return svg.node(); }32:[] 2e:{"title":"Easing Graphs","cells":[{"id":0,"value":"md`# Easing Graphs\n\nEased transitions exhibit more plausible motion. [d3-ease](https://github.com/d3/d3-ease) implements various easing methods, visualized below, which take a normalized time ${tex`t \\in [0,1]`} and return an “eased” time ${tex`t'`}. See also [easing animations](/@d3/easing-animations).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"md`---\n\n## Linear`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"linear = md`### easeLinear(*t*)\n\nThe identity function; no easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"chart([d3.easeLinear])","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"md`---\n\n## Quadratic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"quadIn = md`### easeQuadIn(*t*)\n\nQuadratic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"chart([d3.easeQuadIn])","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"quadOut = md`### easeQuadOut(*t*)\n\nReversed quadratic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"chart([d3.easeQuadOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"quad = md`### easeQuad(*t*)\n\nAn alias for easeQuadInOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"quadInOut = md`### easeQuadInOut(*t*)\n\nMirrored quadratic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"chart([d3.easeQuadInOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"md`---\n\n## Cubic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"cubicIn = md`### easeCubicIn(*t*)\n\nCubic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"chart([d3.easeCubicIn])","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"cubicOut = md`### easeCubicOut(*t*)\n\nReversed cubic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"chart([d3.easeCubicOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"cubic = md`### easeCubic(*t*)\n\nAn alias for [easeCubicInOut](#cubicInOut).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"cubicInOut = md`### easeCubicInOut(*t*)\n\nMirrored cubic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"chart([d3.easeCubicInOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"md`---\n\n## Polynomial\n\nThe default exponent is 3, equivalent to cubic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"viewof polyConfig = config(\"elastic\", {\n exponent: {value: Math.log2(3), min: -3, max: 3, transform: x => Math.pow(2, x)}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"polyIn = md`### easePolyIn.exponent(${polyConfig.exponent})(*t*)\n\nPolynomial easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"chart([d3.easePolyIn.exponent(polyConfig.exponent)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"polyOut = md`### easePolyOut.exponent(${polyConfig.exponent})(*t*)\n\nReversed polynomial easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"chart([d3.easePolyOut.exponent(polyConfig.exponent)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"polyInOut = md`### easePolyInOut.exponent(${polyConfig.exponent})(*t*)\n\nMirrored polynomial easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"chart([d3.easePolyInOut.exponent(polyConfig.exponent)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"md`---\n\n## Exponential`","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"expIn = md`### easeExpIn(*t*)\n\nExponential easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"chart([d3.easeExpIn])","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"expOut = md`### easeExpOut(*t*)\n\nReversed exponential easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"chart([d3.easeExpOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"exp = md`### easeExp(*t*)\n\nAn alias for easeExpInOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"expInOut = md`### easeExpInOut(*t*)\n\nMirrored exponential easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"chart([d3.easeExpInOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"md`---\n\n## Sinusoidal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"sinIn = md`### easeSinIn(*t*)\n\nSinusoidal easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"chart([d3.easeSinIn])","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"sinOut = md`### easeSinOut(*t*)\n\nReversed sinusoidal easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"chart([d3.easeSinOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"sin = md`### easeSin(*t*)\n\nAn alias for easeSinInOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"sinInOut = md`### easeSinInOut(*t*)\n\nMirrored sinusoidal easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"chart([d3.easeSinInOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"md`---\n\n## Circle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"circleIn = md`### easeCircleIn(*t*)\n\nCircular easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"chart([d3.easeCircleIn])","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"circleOut = md`### easeCircleOut(*t*)\n\nReversed circular easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"chart([d3.easeCircleOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"circle = md`### easeCircle(*t*)\n\nAn alias for easeCircleInOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"circleInOut = md`### easeCircleInOut(*t*)\n\nMirrored circular easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"chart([d3.easeCircleInOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"md`---\n\n## Elastic\n\nThe default amplitude is 1.0 and the default period is 0.3.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"viewof elasticConfig = config(\"elastic\", {\n amplitude: {value: 1, min: 1, max: 3},\n period: {value: 0.3, min: 0.04, max: 2}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"elasticIn = md`### easeElasticIn.amplitude(${elasticConfig.amplitude}).period(${elasticConfig.period})(*t*)\n\nElastic easing, like a rubber band.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"chart([d3.easeElasticIn.amplitude(elasticConfig.amplitude).period(elasticConfig.period)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"elastic = md`### easeElastic(*t*)\n\nAn alias for easeElasticOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"elasticOut = md`### easeElasticOut.amplitude(${elasticConfig.amplitude}).period(${elasticConfig.period})(*t*)\n\nReversed elastic easing, like a rubber band.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"chart([d3.easeElasticOut.amplitude(elasticConfig.amplitude).period(elasticConfig.period)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"elasticInOut = md`### easeElasticInOut.amplitude(${elasticConfig.amplitude}).period(${elasticConfig.period})(*t*)\n\nMirrored elastic easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"chart([d3.easeElasticInOut.amplitude(elasticConfig.amplitude).period(elasticConfig.period)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"md`---\n\n## Back\n\nThe default overshoot is 1.70158.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"viewof backConfig = config(\"back\", {\n overshoot: {value: 1.70158, min: 0, max: 3}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"backIn = md`### easeBackIn.overshoot(${backConfig.overshoot})(*t*)\n\nAnticipatory easing, like a dancer bending his knees before jumping.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"chart([d3.easeBackIn.overshoot(backConfig.overshoot)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"backOut = md`### easeBackOut.overshoot(${backConfig.overshoot})(*t*)\n\nReversed anticipatory easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"chart([d3.easeBackOut.overshoot(backConfig.overshoot)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"back = md`### easeBack(*t*)\n\nAn alias for easeBackInOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"backInOut = md`### easeBackInOut.overshoot(${backConfig.overshoot})(*t*)\n\nMirrored anticipatory easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"chart([d3.easeBackInOut.overshoot(backConfig.overshoot)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"md`---\n\n## Bounce`","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"bounceIn = md`### easeBounceIn(*t*)\n\nBounce easing, like a rubber ball.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"chart([d3.easeBounceIn])","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"bounce = md`### easeBounce(*t*)\n\nAn alias for easeBounceOut.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"bounceOut = md`### easeBounceOut(*t*)\n\nBounce easing, like a rubber ball.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"chart([d3.easeBounceOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"bounceInOut = md`### easeBounceInOut(*t*)\n\nMirrored bounce easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"chart([d3.easeBounceInOut])","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"x = d3.scaleLinear().range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"y = d3.scaleLinear().range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom + 6})`)\n .call(d3.axisBottom(x.copy().interpolate(d3.interpolateRound)).ticks(width / 60))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"stroke-opacity\", 0.1)\n .attr(\"y1\", margin.bottom + margin.top - height - 12))","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left - 6},0)`)\n .call(d3.axisLeft(y.copy().interpolate(d3.interpolateRound)).ticks(5))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"stroke-opacity\", 0.1)\n .attr(\"x1\", width - margin.left - margin.right + 12))","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"width = 640","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"margin = ({top: 10, right: 20, bottom: 20, left: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}