27:null 28:["$","title",null,{"children":"Stacked-to-grouped bars | HungVu | Observable"}] 2d:T8a1,chart = { const width = 1228; const height = 500; const marginTop = 0; const marginRight = 0; const marginBottom = 10; const marginLeft = 0; const y01z = d3.stack() .keys(d3.range(n)) (d3.transpose(yz)) // stacked yz .map((data, i) => data.map(([y0, y1]) => [y0, y1, i])); const yMax = d3.max(yz, y => d3.max(y)); const y1Max = d3.max(y01z, y => d3.max(y, d => d[1])); const x = d3.scaleBand() .domain(xz) .rangeRound([marginLeft, width - marginRight]) .padding(0.08); const y = d3.scaleLinear() .domain([0, y1Max]) .range([height - marginBottom, marginTop]); const color = d3.scaleSequential(d3.interpolateBlues) .domain([-0.5 * n, 1.5 * n]); 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 rect = svg.selectAll("g") .data(y01z) .join("g") .attr("fill", (d, i) => color(i)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", height - marginBottom) .attr("width", x.bandwidth()) .attr("height", 0); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(() => "")); function transitionGrouped() { y.domain([0, yMax]); rect.transition() .duration(500) .delay((d, i) => i * 20) .attr("x", (d, i) => x(i) + x.bandwidth() / n * d[2]) .attr("width", x.bandwidth() / n) .transition() .attr("y", d => y(d[1] - d[0])) .attr("height", d => y(0) - y(d[1] - d[0])); } function transitionStacked() { y.domain([0, y1Max]); rect.transition() .duration(500) .delay((d, i) => i * 20) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .transition() .attr("x", (d, i) => x(i)) .attr("width", x.bandwidth()); } function update(layout) { if (layout === "stacked") transitionStacked(); else transitionGrouped(); } return Object.assign(svg.node(), {update}); }2e:[] 2b:{"id":"721475a7cf4ab562","slug":null,"title":"Stacked-to-grouped bars","thumbnail":"e4e9f55a368ad18ff2024008d324ba105776671d2ed66d4e00c584db5e52d070","access_level":"public","create_time":"$D2025-08-26T02:23:26.450Z","update_time":"$D2025-08-26T02:25:08.526Z","view_time":null,"first_public_time":"$D2025-08-26T02:23:26.450Z","has_unpublished_edits":null,"fork":{"id":"208ac4d6c3f58ab1","slug":"stacked-to-grouped-bars","title":"Stacked-to-grouped bars","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f5c7309b26125fcc","login":"hungvu","name":"HungVu","avatar_url":"https://avatars-next.observableusercontent.com/e05ed76fee20675b8e0b08541d3662553fef60af1246d701a500b9069a501315","tier":"starter_2024"},"version":285,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"40925a5c5b74838c","login":"hung-vu","name":"Hưng Vũ","avatar_url":"https://avatars-next.observableusercontent.com/a47aa48d8885ba215f17080681efcb152b7cd359e840b63a0657d39e5248eebe","tier":null}],"members":[{"type":"individual","id":"40925a5c5b74838c","login":"hung-vu","name":"Hưng Vũ","avatar_url":"https://avatars-next.observableusercontent.com/a47aa48d8885ba215f17080681efcb152b7cd359e840b63a0657d39e5248eebe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Stacked-to-grouped bars","cells":[{"id":0,"value":"

Stacked-to-grouped bars

D3 › Gallery

\n\n# Stacked-to-grouped bars\n\nAnimations can preserve object constancy, allowing the reader to follow the data across views. See [Heer and Robertson](http://vis.berkeley.edu/papers/animated_transitions/) for more.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"viewof layout = {\n const form = Inputs.radio(\n new Map([\"stacked\", \"grouped\"].map((t) => [`${t[0].toUpperCase()}${t.slice(1)}`, t])),\n {value: \"stacked\"}\n );\n const interval = setInterval(() => {\n form.value = form.value === \"grouped\" ? \"stacked\" : \"grouped\";\n form.dispatchEvent(new CustomEvent(\"input\"));\n }, 2000);\n form.oninput = (event) => event.isTrusted && clearInterval(interval);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"update = chart.update(layout)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"xz = d3.range(m) // the x-values shared by all series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"yz = d3.range(n).map(() => bumps(m)) // the y-values of each of the n series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"n = 5 // number of series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"m = 58 // number of values per series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"// Returns an array of m pseudorandom, smoothly-varying non-negative numbers.\n// Inspired by Lee Byron’s test data generator.\n// http://leebyron.com/streamgraph/\nfunction bumps(m) {\n const values = [];\n\n // Initialize with uniform random values in [0.1, 0.2).\n for (let i = 0; i < m; ++i) {\n values[i] = 0.1 + 0.1 * Math.random();\n }\n\n // Add five random bumps.\n for (let j = 0; j < 5; ++j) {\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 < m; i++) {\n const w = (i / m - y) * z;\n values[i] += x * Math.exp(-w * w);\n }\n }\n\n // Ensure all values are positive.\n for (let i = 0; i < m; ++i) {\n values[i] = Math.max(0, values[i]);\n }\n\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"