3e:null 3f:["$","title",null,{"children":"Stacked-to-grouped bars | Luvoy | Observable"}] 45: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}); }46:[] 43:{"id":"7f45086753d1af38","slug":null,"title":"Stacked-to-grouped bars","thumbnail":"79e5fb075784a7afed6a8e9eaed6fa72b4e7be784c93d6684557a397ecf0b870","access_level":"public","create_time":"$D2023-08-23T12:46:10.460Z","update_time":"$D2023-08-23T12:46:10.460Z","view_time":null,"first_public_time":"$D2023-08-23T12:46:10.460Z","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":"7571c48497ac6e2f","login":"luvoy","name":"Luvoy","avatar_url":"https://avatars-next.observableusercontent.com/60944aee68bca793fee3137f720bb9737eeb2817cf7feb1e66cf91c9dc015987","tier":"starter_2024","bio":"","following":false},"version":281,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c23375506cfabab8","login":"luvoy","name":"Luvoy","avatar_url":"https://avatars-next.observableusercontent.com/60944aee68bca793fee3137f720bb9737eeb2817cf7feb1e66cf91c9dc015987","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"c23375506cfabab8","login":"luvoy","name":"Luvoy","avatar_url":"https://avatars-next.observableusercontent.com/60944aee68bca793fee3137f720bb9737eeb2817cf7feb1e66cf91c9dc015987","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"update = chart.update(layout)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"n = 5 // number of series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"