2e:null 2f:["$","title",null,{"children":"Stacked-to-Grouped Bars with named update function | Thomas Ballinger | Observable"}] 34:T4d6,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 }); }35:[] 32:{"id":"dea0b03a004cc24e","slug":"stacked-to-grouped-bars-with-named-update-function","title":"Stacked-to-Grouped Bars with named update function","thumbnail":"6e310ff840711138fcb4301980b53e96dbd62d9a316288663ef8190c6fb5f836","access_level":"public","create_time":"$D2020-07-28T17:51:57.799Z","update_time":"$D2020-07-28T17:58:25.003Z","view_time":null,"first_public_time":"$D2020-07-28T17:56:38.005Z","fork":{"id":"208ac4d6c3f58ab1","slug":"stacked-to-grouped-bars","title":"Stacked-to-grouped bars","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":3,"starred":false,"owner":{"type":"team","id":"8d59e5c626effee2","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":"starter_2024"},"version":246,"publish_version":246,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c607438c80998ad","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":null}],"members":[{"type":"individual","id":"4c607438c80998ad","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","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 with named update function","cells":[{"id":0,"value":"md`# Stacked-to-Grouped Bars with named update function\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$34","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":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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"yMax = d3.max(yz, y => d3.max(y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"y1Max = d3.max(y01z, y => d3.max(y, d => d[1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"y = d3.scaleLinear()\n .domain([0, y1Max])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"z = d3.scaleSequential(d3.interpolateBlues)\n .domain([-0.5 * n, 1.5 * n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","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":113,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"margin = ({top: 0, right: 0, bottom: 10, left: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"