2c:null 2d:["$","title",null,{"children":"Streamgraph transitions | D3 | Observable"}] 32: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(); } }33:[] 30:{"id":"9422bec5e8b2d675","slug":"streamgraph-transitions","title":"Streamgraph transitions","thumbnail":"aace678355de25a249f7ea8af7e7b5e8c0121a922e179a1aff491a7f7da41b3f","access_level":"public","create_time":"$D2018-09-06T23:01:20.890Z","update_time":"$D2024-09-23T09:38:05.755Z","view_time":null,"first_public_time":"$D2018-09-06T23:14:55.201Z","fork":false,"stars":117,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":167,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":419,"collection":{"id":"5b7cd6cd51908e4d","slug":"d3-transition","title":"d3-transition","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"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).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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`