2c:null 2d:["$","title",null,{"children":"Animation and computation with generators (gamma function) | Sam Petulla | Observable"}] 32:T488,md`Observablehq dot com likes [generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield). Besides having several excellent guides to [generators](https://beta.observablehq.com/@mbostock/generator-cells-functions-and-objects), it [converts "generator-ish" objects](https://beta.observablehq.com/@mbostock/custom-generators) into generators and debounces your generator yields to smooth, animation-ready frames. So why use a generator? One, they are executed *yield by yield* as opposed to *await by await*. In practice this means we do not need to wait for the full payload from an asyncronous function to arrive before rendering can start. Two, Observable makes our generators play nice with our graphics. "Observable only pulls one value per animation frame from the generator, giving you fluid sixty frames per second by default," writes [@mbostock](https://beta.observablehq.com/@mbostock/) [in the async iteration](https://beta.observablehq.com/@mbostock/introduction-to-asynchronous-iteration) introduction post. Asyncronously executed generator functions render like a series of well-behaved syncronous functions.`33:T527,chart = { const svg = d3.select(DOM.svg(width, height)); const blur = DOM.uid(); const chartSpaceFactorial = DOM.uid(); const gFactorial = svg .append("g") .attr("transform", `translate(0,${margin.top})`); const gGamma = svg .append("g") .attr("transform", `translate(${chartWidth},${margin.top})`); appendTitle(gFactorial, "Factorial"); appendTitle(gGamma, "Gamma Γ(z)"); const defsF = gFactorial.append("g").append("defs"); const defsG = gGamma.append("g").append("defs"); appendDefs(defsF, chartSpaceFactorial.id); appendDefs(defsG, blur.id); appendGrids(gFactorial); appendGrids(gGamma); appendAxis(gGamma); gGamma.append("g").call(yAxis); appendAxis(gFactorial); gFactorial.append("g").call(yAxis); const annos = [[-3], [-2], [-1], [0]]; appendAnnos(gGamma, annos); // append annimated lines const gammas = buildGammas(); const gPaths = gGamma .append("g") .selectAll(".gammas") .data(gammas); gPaths .enter() .append("path") .classed("gammas", true) .classed("rendered-line", true) .attr("d", line) .attr("clip-path", blur); gFactorial .append("path") .datum(factD) .classed("rendered-line", true) .attr("d", line) .attr("clip-path", chartSpaceFactorial); return svg.node(); }34:[] 30:{"id":"aecdee10e2aa2bb7","slug":"animated-drawing-with-a-generator","title":"Animation and computation with generators (gamma function)","thumbnail":"778d6620077571318f357644e9a8176e9e1a5116f2bc0c9dfaf12cf8dd942ded","access_level":"public","create_time":"$D2019-01-09T20:52:29.273Z","update_time":"$D2019-04-21T16:52:41.095Z","view_time":null,"first_public_time":"$D2019-01-10T22:58:19.550Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"a1d2f0b1e0240795","login":"petulla","name":"Sam Petulla ","avatar_url":"https://avatars-next.observableusercontent.com/e405f5d54370de22a4969a8b1637770aeb0f11a8d43bdfc4ccf1e2e362b8ed42","tier":"starter_2024","bio":""},"version":992,"publish_version":992,"role":null,"authored":false,"authors":[{"type":"individual","id":"7d6aa91b0d5f9e4d","login":"petulla","name":"Sam Petulla ","avatar_url":"https://avatars-next.observableusercontent.com/e405f5d54370de22a4969a8b1637770aeb0f11a8d43bdfc4ccf1e2e362b8ed42","tier":null,"bio":""}],"members":[{"type":"individual","id":"7d6aa91b0d5f9e4d","login":"petulla","name":"Sam Petulla ","avatar_url":"https://avatars-next.observableusercontent.com/e405f5d54370de22a4969a8b1637770aeb0f11a8d43bdfc4ccf1e2e362b8ed42","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"ee5ba50e27794e06","slug":"observable-techniques","title":"Observable techniques","owner":{"id":"a1d2f0b1e0240795","login":"petulla","name":"Sam Petulla "}},"type":"notebook","body":{"titling":"auto","title":"Animation and computation with generators (gamma function)","cells":[{"id":0,"value":"md`# Animation and computation with generators (gamma function)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"md`The **gamma function** provides a good testing ground for a generator. The function, usually ${tex`\\Gamma(z)`}, is pervasive in statistics. It's essentially an interpolation and expansion of the factorial, able to calculate factorials for all positive real numbers, negative numbers (except integers) and complex numbers. ${tex`\\Gamma(z)`} is equivalent to (z - 1)! for values greater than 1. \n\n ${tex`\\Gamma(z) = \\int_0^\\infty x^{z-1} e^{-x}\\,dx`}\n\nCalculating a high *n* of gamma function values has a high computational cost, though, even with an approximation function. Generators provide a way to reduce the cost.\n\nData arrives in debounced \\`yield\\` iterations as each function is calculated, undercutting the full computational cost and gaining a feature: We can animate our gamma function approximation *for free*. The cell updates, drawing the curve, as the generator ticks. We don't need to wait for computation of an iterative graph to finish before drawing can start.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"md`## Generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"md`What follows is two simple ways of using generators to build our dataset for drawing the curves, though there are [others](https://beta.observablehq.com/@mbostock/generator-cells-functions-and-objects).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md`#### Yield an an array of increasing size while assigning indexes to an array literal in a loop`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"factD = {\n const z = [];\n // here, the call loop is within our generator cell\n // as the array length increases, it is yielded for drawing\n for (let i = 0; i <= n; ++i) {\n z[i] = factorialGenerator(i);\n yield z;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md`#### A \\`for of\\` loop that yields an array of increasing length from a generator function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"md`This approach has the advantage of moving the iteration abstraction into the generator function rather than making it part of the declaration logic of our dataset generator cell. Instead, we can supply the duration of the iteration with *n*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"gammaD = {\n // here, the loop is moved within a generating function\n // every loop from this generator cell yields the next iteration in the generator gamma function\n for (const z of gammaGenerator(n)) yield z;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"md`### Appendix Factorial and gamma approximation functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"function factorialGenerator(i) {\n // factorial container\n const f = [];\n // psuedo-memoization approach\n const factorial = (n) => (!n || n === 1) ? 1 : f[n] || factorial(n - 1) * n;\n return {x: i, y: factorial(i)};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"md`Our gamma approximation is a generator function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"function* gammaGenerator(n) {\n const step = 0.01;\n const offset = -offsetN * (1 / step),\n arrayL = offset + (1 / step) * n;\n const z = [],\n f = [];\n\n for (let i = 0; i <= arrayL; ++i) {\n z[i] = {\n x: i * step - offset * step,\n y: Lanczos(i * step - offset * step)\n };\n yield z;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"function Lanczos(x = n) {\n if (!x) return 7;\n if (x < 0.5) return Math.PI / (Math.sin(Math.PI * x) * Lanczos(1 - x));\n\n x = x - 1;\n let a = p[0];\n const g = 7;\n const t = x + g + 0.5;\n\n for (let i = 1; i < p.length; i++) a += p[i] / (x + i);\n\n return Math.sqrt(2 * Math.PI) * Math.pow(t, x + 0.5) * Math.exp(-t) * a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"p = [0.99999999999980993, 676.5203681218851, -1259.1392167224028,\n 771.32342877765313, -176.61502916214059, 12.507343278686905,\n -0.13857109526572012, 9.9843695780195716e-6, 1.5056327351493116e-7\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`### Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`*n factorials*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"n = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`*Chart setup*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"chartWidth = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"margin = ({top: 40, right: 60, bottom: 30, left: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"offsetN = -4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"x = d3.scaleLinear()\n .domain([offsetN,n])\n .range([margin.left, chartWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"y = d3.scaleLinear()\n .domain([-5, 5])\n .range([height - margin.bottom - margin.top, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(chartWidth / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"line = d3.line()\n .defined(d => !isNaN(d.x) && !isNaN(d.y))\n .x(d => x(d.x))\n .y(d => y(d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"html`Styles block`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"function appendTitle (g, title) {\n g.append(\"g\")\n .append(\"text\")\n .attr(\n \"transform\",\n `translate(${margin.left +\n (chartWidth - margin.left - margin.right) / 2},-20)`\n )\n .classed(\"title\", true)\n .text(title);\n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"function appendDefs(g, id) {\n g.append(\"clipPath\")\n .attr(\"id\", id)\n .append(\"rect\")\n .attr(\"height\", height - margin.top - margin.bottom)\n .attr(\"width\", chartWidth);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"function appendGrid(g, callValue) {\n g.call(callValue)\n .call(g => g.select(\".domain\").remove())\n .selectAll(\"line\")\n .style(\"stroke\", \"#ddd\")\n .style(\"stroke-opacity\", 0.5);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"function appendGrids(g) {\n const gX = g.append(\"g\").attr(\"transform\", `translate(${margin.left},0)`);\n\n appendGrid(\n gX,\n d3\n .axisLeft(y)\n .ticks(5)\n .tickSize(-chartWidth + margin.left + margin.right)\n .tickFormat(\"\")\n );\n\n const gY = g\n .append(\"g\")\n .attr(\"transform\", `translate(0, ${height - margin.top - margin.bottom})`);\n\n appendGrid(\n gY,\n d3\n .axisBottom(x)\n .ticks(5)\n .tickSize(-height + margin.top + margin.bottom)\n .tickFormat(\"\")\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"function appendAxis(g) {\n g.append(\"g\")\n .call(xAxis)\n .attr(\n \"transform\",\n `translate(0, ${(height - margin.bottom - margin.top) / 2})`\n )\n .selectAll(\"line\")\n .attr(\"transform\", \"translate(0, -3)\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"function buildGammas(gammas = [[]]) {\n let it = 0;\n\n if (gammaD) {\n gammaD.forEach((d, i) => {\n // we have to shrink the asymp values to the chart space or the clip fails\n if (d.y > 7) d.y = 8;\n if (d.y < -7) d.y = -8;\n if (!i) gammas[0].push(d);\n else if (d.y / gammaD[i - 1].y < 0) {\n gammas.push([]);\n it++;\n gammas[it].push(d);\n } else {\n gammas[it].push(d);\n }\n });\n }\n return gammas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"function appendAnnos(g, annos) {\n const gAnnoPaths = g\n .append(\"g\")\n .selectAll(\".gammaAnno\")\n .data(annos);\n\n gAnnoPaths\n .enter()\n .append(\"line\")\n .classed(\"gammaAnno\", true)\n .attr(\"x1\", d => x(d))\n .attr(\"x2\", d => x(d))\n .attr(\"y1\", 0)\n .attr(\"y2\", height - margin.top - margin.bottom);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`### lib`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"import {slider} from '@jashkenas/inputs';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"