25:["$","title",null,{"children":"Streamgraph transitions | inoculate_media | Observable"}] 49: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(); } }4a:T1bfe, fft

Click to enlarge

4b:[] 29:{"id":"ba8518df6bdc7204","slug":null,"title":"Streamgraph transitions","thumbnail":"1170c8600a924e6fffbd5ae72902771ea70297c24f6610bf8a5cc801464c7a3e","access_level":"public","create_time":"$D2023-08-03T02:44:05.098Z","update_time":"$D2023-08-03T02:59:54.808Z","view_time":null,"first_public_time":"$D2023-08-03T02:44:05.098Z","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":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","bio":"Video artist and data nerd,","following":false},"version":180,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"bio":"I make art, code and applications that integrate ai and machine learning for musicians and artists. My own music project is Les Barons | The Barons","following":false}],"members":[{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","role":"editor"},{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","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`