31:[] 2f:{"title":"Streamgraph Transitions","cells":[{"id":0,"value":"md`# Streamgraph Transitions\n\nSee also a more practical [static streamgraph](/@mbostock/d3-streamgraph).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n\n const x = d3\n .scaleLinear()\n .domain([0, m - 1])\n .range([0, width]);\n\n const y = d3.scaleLinear().range([height, 0]);\n\n const z = d3.interpolateCool;\n\n const area = d3\n .area()\n .curve(d3.curveStep)\n .x((d, i) => x(i))\n .y0(d => y(d[0]))\n .y1(d => y(d[1]));\n\n function randomize() {\n const layers = stack(\n d3.transpose(Array.from({ length: n }, () => bumps(m, k)))\n );\n y.domain([\n d3.min(layers, l => d3.min(l, d => d[0])),\n d3.max(layers, l => d3.max(l, d => d[1]))\n ]);\n return layers;\n }\n\n const path = svg\n .selectAll(\"path\")\n .data(randomize)\n .enter()\n .append(\"path\")\n .attr(\"d\", area)\n .attr(\"fill\", () => z(Math.random()));\n\n const interval = d3.interval(() => {\n path\n .data(randomize)\n .transition()\n .duration(1500)\n .attr(\"d\", area);\n }, 2500);\n\n invalidation.then(() => interval.stop());\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof order = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof offset = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"n = 4 // number of layers","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"m = 100 // number of samples per layer","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"k = 4 // number of bumps per layer","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"bumps = {\n // Inspired by Lee Byron’s test data generator.\n function bump(a, n) {\n const x = 1 / (0.1 + Math.random());\n const y = 2 * Math.random() - 0.5;\n const z = 10 / (0.1 + Math.random());\n for (let i = 0; i < n; ++i) {\n const w = (i / n - y) * z;\n a[i] += x * Math.exp(-w * w);\n }\n }\n return function bumps(n, m) {\n const a = [];\n for (let i = 0; i < n; ++i) a[i] = 0;\n for (let i = 0; i < m; ++i) bump(a, n);\n return a;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"stack = d3.stack()\n .keys(d3.range(n))\n .offset(d3[offset])\n .order(d3[order])","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}