31:T4ef,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const rect = svg.selectAll("g") .data(y01z) .join("g") .attr("fill", (d, i) => z(i)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", height - margin.bottom) .attr("width", x.bandwidth()) .attr("height", 0); svg.append("g") .call(xAxis); 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}); }32:[] 2f:{"title":"Stacked-to-Grouped Bars","cells":[{"id":0,"value":"md`# 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":"ojs"},{"id":3,"value":"viewof layout = {\n const form = html``;\n const interval = setInterval(() => {\n form.value = form.radio.value = form.radio.value === \"grouped\" ? \"stacked\" : \"grouped\";\n form.dispatchEvent(new CustomEvent(\"input\"));\n }, 2000);\n form.onchange = () => form.dispatchEvent(new CustomEvent(\"input\")); // Safari\n form.oninput = event => {\n if (event.isTrusted) clearInterval(interval), form.onchange = null;\n form.value = form.radio.value;\n };\n form.value = form.radio.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"$31","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":95,"value":"y01z = d3.stack()\n .keys(d3.range(n))\n (d3.transpose(yz)) // stacked yz\n .map((data, i) => data.map(([y0, y1]) => [y0, y1, i]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"yMax = d3.max(yz, y => d3.max(y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"y1Max = d3.max(y01z, y => d3.max(y, d => d[1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"x = d3.scaleBand()\n .domain(xz)\n .rangeRound([margin.left, width - margin.right])\n .padding(0.08)","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"y = d3.scaleLinear()\n .domain([0, y1Max])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"z = d3.scaleSequential(d3.interpolateBlues)\n .domain([-0.5 * n, 1.5 * n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"xAxis = svg => svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(() => \"\"))","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":113,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"margin = ({top: 0, right: 0, bottom: 10, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"// Returns an array of m psuedorandom, 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"},{"id":82,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}