3c:null 3d:["$","title",null,{"children":"Streamgraph transitions | Krzysztof Goliński | Observable"}] 43:T48b,chart = { const width = 928; const height = 500; const x = d3.scaleLinear([0, m - 1], [0, width]); const y = d3.scaleLinear([0, 1], [height, 0]); const z = d3.interpolateCool; const area = d3.area() .x((d, i) => x(i)) .y0(d => y(d[0])) .y1(d => y(d[1])); const stack = d3.stack() .keys(d3.range(n)) .offset(offset) .order(d3.stackOrderNone); function randomize() { const layers = stack(d3.transpose(Array.from({length: n}, () => bumps(m, k)))); y.domain([ d3.min(layers, l => d3.min(l, d => d[0])), d3.max(layers, l => d3.max(l, d => d[1])) ]); return layers; } const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); const path = svg.selectAll("path") .data(randomize) .join("path") .attr("d", area) .attr("fill", () => z(Math.random())); while (true) { yield svg.node(); await path .data(randomize) .transition() .delay(1000) .duration(1500) .attr("d", area) .end(); } }44:[] 41:{"id":"419315cfcea74c95","slug":null,"title":"Streamgraph transitions","thumbnail":"5db39520dc0ee9bc729551389e440243ea8fee4f01726b57b5bfdbc44630bc21","access_level":"public","create_time":"$D2023-11-29T21:24:51.291Z","update_time":"$D2023-11-29T21:24:51.291Z","view_time":null,"first_public_time":"$D2023-11-29T21:24:51.291Z","has_unpublished_edits":null,"fork":{"id":"9422bec5e8b2d675","slug":"streamgraph-transitions","title":"Streamgraph transitions","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8e5a27ccbd1587eb","login":"kgolinski","name":"Krzysztof Goliński","avatar_url":"https://avatars-next.observableusercontent.com/cfa3eebdb4401898933c63eb21a427ef33dad1e72c2c66dc357962eb69975725","tier":"starter_2024","bio":""},"version":166,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"efc656790f1342ec","login":"kgolinski","name":"Krzysztof Goliński","avatar_url":"https://avatars-next.observableusercontent.com/cfa3eebdb4401898933c63eb21a427ef33dad1e72c2c66dc357962eb69975725","tier":null,"bio":""}],"members":[{"type":"individual","id":"efc656790f1342ec","login":"kgolinski","name":"Krzysztof Goliński","avatar_url":"https://avatars-next.observableusercontent.com/cfa3eebdb4401898933c63eb21a427ef33dad1e72c2c66dc357962eb69975725","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Streamgraph transitions","cells":[{"id":0,"value":"

Streamgraph transitions

D3 › Gallery

\n\n# Streamgraph transitions\n\nSee also a more practical [static streamgraph](/@d3/streamgraph/2?intent=fork).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"viewof offset = {\n const options = [\n {name: \"d3.stackOffsetExpand\", value: d3.stackOffsetExpand},\n {name: \"d3.stackOffsetNone\", value: d3.stackOffsetNone},\n {name: \"d3.stackOffsetSilhouette\", value: d3.stackOffsetSilhouette},\n {name: \"d3.stackOffsetWiggle\", value: d3.stackOffsetWiggle, selected: true}\n ];\n const form = html`