25:["$","title",null,{"children":"Stacked-to-grouped bars | Angela Pham's Workspace | Observable"}] 49:T8a1,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(1000) .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}); }4a:[] 29:{"id":"64bb0430e25b1d83","slug":null,"title":"Stacked-to-grouped bars","thumbnail":"267be219cd37015891ef81a768290cfe8a23a22a922c1ad40684ada5d41b2d32","access_level":"public","create_time":"$D2023-10-24T20:40:25.075Z","update_time":"$D2023-10-24T20:44:39.575Z","view_time":null,"first_public_time":"$D2023-10-24T20:45:39.424Z","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":"6c2fa2cc5faa84a8","login":"angela-pham-ws","name":"Angela Pham's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/cc6d36cdf5d5fdb4ae772a8248d13c5887546869b6916186920995bcddb48a9b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":289,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"de3efd579b05e44f","login":"angela-pham","name":"Angela Pham","avatar_url":"https://avatars-next.observableusercontent.com/6c1ec4d3ac043f3b8815f414a34c014245743c17b9fdf81eb4d7cdf468c2910d","tier":null,"bio":"for the DH 150 class","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"de3efd579b05e44f","login":"angela-pham","name":"Angela Pham","avatar_url":"https://avatars-next.observableusercontent.com/6c1ec4d3ac043f3b8815f414a34c014245743c17b9fdf81eb4d7cdf468c2910d","tier":null,"role":"editor"},{"type":"team","id":"6c2fa2cc5faa84a8","login":"angela-pham-ws","name":"Angela Pham's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/cc6d36cdf5d5fdb4ae772a8248d13c5887546869b6916186920995bcddb48a9b","tier":"starter_2024","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\n","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":285,"value":"I changed the margins of the graph and other small variables affecting how data is presented. I like this graph because it's cool to see how the animation allows the reader to look at data from different views. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"$49","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 = 100// 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":"$W4a","stdlib":"1"}} 24:null