30:T8a0,chart = { const width = 928; 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}); }31:[] 2e:{"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"},{"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"},{"id":60,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"update = chart.update(layout)","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"xz = d3.range(m) // the x-values shared by all series","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":62,"value":"n = 5 // number of series","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"m = 58 // number of values per series","pinned":true,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}