2b:null 2c:["$","title",null,{"children":"Stacked-to-Grouped Bars | Noble | Observable"}] 31:T249c,function stackedToGroupedBarChart() { // TODO: remove when transferring out of Observable d3.select("#chart").selectAll("svg").remove() // defined via accessor functions let width, height, groups, legendLabels, xAxisLabels, formatBarLabel, initialLayout = "stacked" // defined internally let svg, rect, rectLabel, layout, groupedLabels, stackedLabels, n, // number of series m, // number of values per series xz, // x-values shared by all series yz, // y-values of each of the n series y01z, // stacked y-values of each of the n series yMax, y1Max, x, y, z, margin = { top: 100, right: 0, bottom: 32, left: 0 } // generate chart function chart(selection) { selection.each(function(data) { // initialize svg svg = selection.append('svg') .attr('width', width) .attr('height', height) // initialize layout layout = initialLayout // calculate number of series n = Object.keys(groups[0].stacked).length // calculate number of vals per series m = groups.length // calculate x-values shared by all series xz = d3.range(m) // calculate y-values of each of the n series yz = { stacked: d3.range(n).map(i => { return d3.range(m).map(gi => groups[gi].stacked[i] / 100) }), grouped: d3.range(n).map(i => { return d3.range(m).map(gi => groups[gi].grouped[i] / 100) }) } // calculate stacked y-values of each of the n series y01z = { stacked: d3.stack() .keys(d3.range(n))(d3.transpose(yz.stacked)) .map((data, i) => data.map(([y0, y1]) => [y0, y1, i])), grouped: d3.stack() .keys(d3.range(n))(d3.transpose(yz.grouped)) .map((data, i) => data.map(([y0, y1]) => [y0, y1, i])) } // configure y maxes yMax = d3.max(yz[layout], y => d3.max(y)) y1Max = d3.max(y01z[layout], y => d3.max(y, d => d[1])) // configure x scale x = d3.scaleBand() .domain(xz) .rangeRound([margin.left, width - margin.right]) .padding(0.08) // configure y scale y = d3.scaleLinear() .domain([0, y1Max]) .range([height - margin.bottom, margin.top]) // configure z scale (color dimension) z = d3.scaleSequential(d3.interpolatePuRd) .domain([-0.5 * n, 1.5 * n]) // initialize bars rect = svg.selectAll("g") .data(y01z[layout]) .enter().append("g") .attr('class', 'bar-group') .attr("fill", (d, i) => z(i)) .selectAll("rect") .data(d => d) .join("rect") .attr('class', 'bar') .attr("x", (d, i) => x(i)) .attr("y", height - margin.bottom) .attr("width", x.bandwidth()) .attr("height", 0) // initialize bar labels rectLabel = svg.append('g') .attr('class', 'bar-labels') .selectAll('g') .data(y01z[layout]) .enter().append('g') .attr('class', 'bar-label') .selectAll('rect') .data(d => d) .join('text') .attr('x', (d, i) => x(i)) .attr("y", height - margin.bottom) .attr("opacity", 0) .text((d, i) => { let val = groups[i][layout][d[2]] return ('function' === typeof formatBarLabel) ? formatBarLabel(val) : val }) // render x-axis svg.call(xAxis) // render legend svg.call(legend) if (layout === "stacked") transitionStacked() if (layout === "grouped") transitionGrouped() }) } // --- helpers ------------------------------------------------ function transitionGrouped(params) { // configure timing vars let tDuration = 500, tDelay = 20 // update y scale domain y.domain([0, yMax]) // animate bars rect.transition() .duration(tDuration) .delay((d, i) => i * tDelay) .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])) // animate bar labels rectLabel.each(function(d, i) { let width = d3.select(this).node().getBBox().width d3.select(this).transition() .duration(tDuration) .delay(i * tDelay) .attr("x", x(i) + x.bandwidth() / n * d[2] + (x.bandwidth() / n / 2) - (width / 2)) .on('end', () => (params && typeof params.atHalfway === 'function') ? params.atHalfway() : null) .transition() .attr("y", y(d[1] - d[0]) - 10) .attr("opacity", 1) }) } function transitionStacked(params) { // configure timing vars let tDuration = 500, tDelay = 20 // update y scale domain y.domain([0, y1Max]) // animate bars rect.transition() .duration(tDuration) .delay((d, i) => i * tDelay) .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()) // animate bar labels rectLabel.each(function(d, i) { let width = d3.select(this).node().getBBox().width d3.select(this).transition() .duration(tDuration) .delay(i * tDelay) .attr("y", d => y(d[1]) + (y(d[0]) - y(d[1])) / 2) .on('end', () => (params && typeof params.atHalfway === 'function') ? params.atHalfway() : null) .transition() .attr("x", x(i) + (x.bandwidth() - width) / 2) .attr("opacity", 1) }) } function xAxis(selection) { selection.each(function() { let _this = d3.select(this) // remove previous x-axis _this.selectAll('g.x-axis').remove() // add new x-axis svg.append("g") .attr('class', 'x-axis') .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(i => xAxisLabels[layout][i])) }) } function legend(selection) { selection.each(function() { let _this = d3.select(this) let shapePadding = 8, shapeSize = 220, offsetLeft = 20 let ordinal = d3.scaleOrdinal() .domain(legendLabels) .range(legendLabels.map((l, i) => z(i))) let legend = d3.legendColor() .orient('horizontal') .shapeWidth(width / legendLabels.length) .labelOffset(18) .labelWrap(width / legendLabels.length) .scale(ordinal) // remove previous legend _this.selectAll("g.legend").remove() // add new legend _this.append("g") .attr("class", "legend") .attr("transform", `translate(0, 0)`) .call(legend) }) } // --- updaters ------------------------------------------------- chart.update = function(value) { if (!arguments.length || !value || layout === value) return // update global layout var layout = value // update y maxes yMax = d3.max(yz[layout], y => d3.max(y)) y1Max = d3.max(y01z[layout], y => d3.max(y, d => d[1])) // rebind bar rect data to values from new layout svg.selectAll("g.bar-group") .data(y01z[layout]) .selectAll("rect") .data(d => d) // rebind bar label data to values from new layout svg.selectAll("g.bar-label") .data(y01z[layout]) .selectAll("text") .data(d => d) const updateBarLabelText = () => svg.selectAll('g.bar-label') .selectAll('text') .text((d, i) => { let val = groups[i][layout][d[2]] return ('function' === typeof formatBarLabel) ? formatBarLabel(val) : val }) // rerender x-axis to reflect labels from new layout svg.call(xAxis) // transition to new layout if (value === "stacked") transitionStacked({ atHalfway: updateBarLabelText }) if (value === "grouped") transitionGrouped({ atHalfway: updateBarLabelText }) } // --- accessors ------------------------------------------------ chart.width = function(value) { if (!arguments.length) return width width = value return chart } chart.height = function(value) { if (!arguments.length) return height height = value return chart } chart.initialLayout = function(value) { if (!arguments.length) return initialLayout initialLayout = value return chart } chart.groups = function(value) { if (!arguments.length) return groups groups = value return chart } chart.legendLabels = function(value) { if (!arguments.length) return legendLabels legendLabels = value return chart } chart.xAxisLabels = function(value) { if (!arguments.length) return xAxisLabels xAxisLabels = value return chart } chart.formatBarLabel = function(value) { if (!arguments.length) return formatBarLabel formatBarLabel = value return chart } return chart }32:[] 2f:{"id":"9d0ab0b80527e0cd","slug":null,"title":"Stacked-to-Grouped Bars","thumbnail":"d073ef95c027bda8093e02f82fcdba90035f797f3244375225946730b2bace64","access_level":"public","create_time":"$D2023-10-27T23:23:27.563Z","update_time":"$D2023-10-27T23:23:27.563Z","view_time":null,"first_public_time":"$D2023-10-27T23:23:27.563Z","has_unpublished_edits":null,"fork":{"id":"1feb137fdef875e6","slug":"stacked-to-grouped-bars","title":"Stacked-to-Grouped Bars","owner":{"id":"c53761f873c0cf85","login":"bradysheridan","name":"Brady Sheridan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f1de0844e9cff86a","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":"starter_2024"},"version":727,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"04c32d8a18696e81","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":null}],"members":[{"type":"individual","id":"04c32d8a18696e81","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","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","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.\n\nChanges made in this fork\n- Improved design\n- Added a legend\n- Added an x-axis\n- Added text labels for bar values\n- Bound bars to real data instead of random data\n- Allowed for variation between stacked and grouped values\n- Refactored code into a modular function that can be used outside of Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof layout = {\n const form = html``;\n form.oninput = () => form.value = form.radio.value;\n form.onchange = () => { // Safari…\n form.value = form.radio.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\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":241,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"chart = stackedToGroupedBarChart()\n .width(740)\n .height(600)\n .initialLayout(\"stacked\")\n .legendLabels(['The first group', 'The second group', 'The third group'])\n .xAxisLabels({\n stacked: ['Stacked X Axis Label #1', 'Stacked X Axis Label #1'],\n grouped: ['Grouped X Axis Label #1', 'Grouped X Axis Label #1']\n })\n .groups([\n {\n stacked: [25, 25, 50],\n grouped: [10, 9, 8]\n },{\n stacked: [20, 40, 60],\n grouped: [1, 2, 3]\n }\n ])\n .formatBarLabel((val) => val + \"%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"d3.select(\"#chart\").call(chart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"chart.update(layout)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"d3 = require(\"d3@5\", \"d3-svg-legend\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"