25:["$","title",null,{"children":"Separated Bar Chart | Christopher France | Observable"}] 49:Td32,chart = { // Container SVG element const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("font-family", "sans-serif"); // Axes and labels const yAxis = svg .append("g") .attr("transform", `translate(${margin.left},0)`); const xAxis = svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`); const axisLabel = svg .append("g") .attr("transform", `translate(15, ${height / 2})rotate(-90)`) .append('text') .style("font-size", "12px") .style("text-anchor", "middle"); // Assign an update method to stage animated transitions // (see https://observablehq.com/@mkfreeman/d3-chart-updates-in-observable) svg.node().update = stack => { // Create a data series const data_series = d3 .stack() .offset(stacks[stack]) // use the specified offset .keys(top_10_states)(by_date) .map(d => { return d.forEach(v => (v.key = d.key)), d; }); // Update y scale const y = d3 .scaleLinear() .domain([0, d3.max(data_series, d => d3.max(d, d => d[1]))]) .rangeRound([height - margin.bottom, margin.top]); // Append visual elements svg .selectAll("g.series") .data(data_series) .join( enter => enter.append("g").attr("class", "series"), update => update, exit => exit.remove() ) .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join( enter => enter.append("rect"), update => update, exit => exit.remove() ) .transition() .duration(1000) .delay((d, i) => x(d.data.date)) .attr("x", (d, i) => x(d.data.date)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()); // Update axes and labels xAxis .call( d3 .axisBottom(x) .tickSizeOuter(0) .tickFormat(d => d.toLocaleString('default', { month: 'long' })) .tickValues( x .domain() .filter(d => width > 760 ? d.getDate() === 1 : d.getDate() === 1 && (d.getMonth() + 1) % 3 === 0 ) ) ) .call(g => g.selectAll(".domain").remove()); yAxis .call(d3.axisLeft(y).ticks(null, "s")) .call(g => g.selectAll(".domain").remove()); // Y label axisLabel.text( stack === "percentage" ? "Proportion of Cases" : "Cases per Day" ); }; // Legend const legendLabels = svg .append("g") .attr("transform", `translate(${width - margin.right + 10}, 0)`) .selectAll("g.legend") .data([...top_10_states].reverse(), d => d) .join( enter => { const enterGs = enter.append("g"); enterGs .append("rect") .attr("width", legend_size) .attr("height", legend_size); enterGs .append("text") .attr("dx", legend_size + 3) .attr("dy", 13) .style("font-size", "15px") .text(d => d); return enterGs; }, update => update, exit => exit.remove() ) .attr("transform", (d, i) => `translate(0, ${i * (legend_size + 2)})`) .selectAll("rect") .attr("fill", d => color(d)); return svg.node(); }4a:[] 29:{"id":"f26dada51ebda9b9","slug":null,"title":"Separated Bar Chart","thumbnail":"fb648ae2ad5b857dc3d3175ad7d9002b38a0398aa3ac8a12a7ce76a214823674","access_level":"public","create_time":"$D2023-03-08T06:34:59.397Z","update_time":"$D2023-03-08T06:34:59.397Z","view_time":null,"first_public_time":"$D2023-03-08T06:34:59.397Z","has_unpublished_edits":null,"fork":{"id":"9c076eb153df3641","slug":"separated-bar-chart","title":"Separated Bar Chart","owner":{"id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman"}},"stars":0,"starred":false,"owner":{"type":"team","id":"24d03ef13f609880","login":"chrisblow","name":"Christopher France","avatar_url":"https://avatars-next.observableusercontent.com/c2402797cb0a05a1901716b9f91a672eb96cf9e30c402f1de98db4e76ff49ca1","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":549,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"923c99ecc99ea972","login":"chrisblow","name":"Christopher France","avatar_url":"https://avatars-next.observableusercontent.com/c2402797cb0a05a1901716b9f91a672eb96cf9e30c402f1de98db4e76ff49ca1","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"923c99ecc99ea972","login":"chrisblow","name":"Christopher France","avatar_url":"https://avatars-next.observableusercontent.com/c2402797cb0a05a1901716b9f91a672eb96cf9e30c402f1de98db4e76ff49ca1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Separated Bar Chart","cells":[{"id":0,"value":"md`# Separated Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`A major limitation of the stacked bar chart is the use of a _length encoding_ to display values. As has been repeatedly demonstrated, people much more accurately percieve differences in **position**. So, to better leverage the visual perception system, one can _separate_ the groups within a stacked bar chart to more easily assess fluctuations _within_ each group.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof stack = radio({\n title: 'Choose Stacking',\n options: [\n { label: 'Stacked', value: \"stacked\" },\n { label: 'Separated', value: \"separated\" }, \n { label: 'Percentage', value: \"percentage\" }\n ],\n value: \"stacked\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"md`New COVID 19 Cases Per day (top 10 states)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`If you want to use this _separated_ method with your own stacked bar chart, all you need to do is pass the following function to the \\`d3.stack().offset(*function-goes-here*)\\` method:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"// Function to offset each layer by the maximum of the previous layer\nfunction offset(series, order) {\n if (!((n = series.length) > 1)) return;\n // Standard series\n for (var i = 1, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {\n (s0 = s1), (s1 = series[order[i]]);\n let base = d3.max(s0, d => d[1]); // here is where you calculate the maximum of the previous layer\n for (var j = 0; j < m; ++j) {\n // Set the height based on the data values, shifted up by the previous layer\n let diff = s1[j][1] - s1[j][0];\n s1[j][0] = base;\n s1[j][1] = base + diff;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"md`For example, in the next cell, the variable \\`series\\` is created by using the \\`offset\\` function above:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"series = d3\n .stack()\n .offset(stacks[stack]) // *this is how you apply the custom function*\n .keys(top_10_states)(by_date)\n .map(d => {\n return d.forEach(v => (v.key = d.key)), d;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Data Formatting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"md`It turns out that the data formatting for a stacked bar chart can be difficult to construct, so I've described it a bit here. Nothing below is specific to the separated layout -- it's just a chance to describe the process.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`First, you can use \\`d3.csv()\\` to load the data directly from the NYT GitHub Page:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// Load the data with `d3.csv()`\nraw_data = d3.csv(\n \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`The NYT data reports the _cumulative_ number of cases, so we need a way to calculate the number of _new_ cases per day. To do so, we need to **group** the data by state, and then within each state, subtract the previous day's cumulative case count from the current day's count. \n\nBefore doing that calculation, I want to narrow down to the 10 states with the highest total number of cases:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// Identify the top 10 states with highest number of cases\ntop_10_states = d3\n .rollups(raw_data, v => d3.max(v, dd => +dd.cases), d => d.state) // get max in each state\n .sort((a, b) => b[1] - a[1]) // sort by cases\n .filter((d, i) => i < 10) // filter to top 10\n .map(d => d[0]) // return the name of the state","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md`Then, we can group the data by state (in preparation for calculating the number of new cases per day):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// Group data by state\nby_state = d3.groups(raw_data, d => d.state)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"md`Then, we're ready to calculate the number of new cases each day (within each state):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// Get cases per day (for top 10 states)\ncases_per_day = {\n let arr = [];\n by_state\n .filter(d => top_10_states.includes(d[0])) // filter down to top 10\n .forEach(state => {\n state[1].forEach((d, i) => {\n // Compute cases\n let new_cases = 0;\n if (i === 0) new_cases = +d.cases;\n else new_cases = +d.cases - +state[1][i - 1].cases;\n // Format date as a proper Date object\n const date_pieces = d.date.split(\"-\");\n const date = new Date(2020, date_pieces[1] - 1, date_pieces[2]);\n arr.push({ state: d.state, date: date, new_cases: new_cases });\n });\n });\n return arr.filter(d => d.date >= +new Date(\"2020\", \"02\", \"01\")); // filter down to after March\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"md`The next step was turning out to be pretty tough with vanilla JavaScript or d3: to properly structure the data for the \\`d3.stack()\\` function, the data needs to be an **array of objects**, where each object represents a date (and has a _key_ for each state). Luckily, this turns out to be a very straightforward pivot operation in the arquero library.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"// Resturcture data with one object for each date (with keys for each state)\nby_date = aq\n .from(cases_per_day) // create an arquero table from the data\n .groupby('date') // group by date\n .pivot(\"state\", \"new_cases\") // create a key for each state, populated with the # of new cases\n .objects() // return JavaScript objects","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"md`For demonstration's sake, here's the data before and after the transformation:\n\n**Before**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"aq.from(cases_per_day).view()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md`**After**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"aq\n .from(cases_per_day) // create an arquero table from the data\n .groupby('date') // group by date\n .pivot(\"state\", \"new_cases\")\n .view()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`Funny enough -- though perhaps not unexpected -- most of the challenge here was data wrangling (I only had to write **three lines of code** to change the _stack_ layout into the _separated_ layout).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"import { code_styles } from \"@uw-info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"code_styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"// Update the chart each time the `stack` select menu changes\nupdate = chart.update(stack)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"md`### Scales and Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"margin = ({ top: 10, right: 150, bottom: 20, left: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"x = d3\n .scaleBand()\n .domain(by_date.map(d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"// y = d3\n// .scaleLinear()\n// .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])\n// .rangeRound([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"legend_size = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"color = d3\n .scaleOrdinal()\n .domain(top_10_states)\n .range(d3.schemeTableau10)\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"stacks = ({\n separated: offset,\n stacked: d3.stackOffsetNone,\n percentage: d3.stackOffsetExpand\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null