31:T50a,html``32:Ta40,createRaceChart = (group, attr) => { const svg = d3 .create("svg") .attr("width", chartWidth) .attr("height", chartHeight); const x = xs[attr]; const filteredData = raceData.filter(d => d.age == group); if ( attr == 'deaths_percent' && d3.max(filteredData, d => d.deaths_total) == 0 ) { svg .append("rect") .attr("stroke", "#eee") .attr("stroke-width", 2) .style("fill", "none") .attr("x", margin.left) .attr("y", margin.top) .attr("width", chartWidth - margin.right - margin.left) .attr("height", chartHeight - margin.top - margin.bottom); svg .append("g") .append("text") .attr("x", "50%") .attr("y", "50%") .attr("dy", margin.top - 1) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("fill", "#999") .text("No incidents"); return svg.node(); } const columns = ["Latino", "White", "Asian", "Black", "Other"]; const palette = ['#3580b1', '#ec8431', '#ab7fb4', '#adc839', '#829eb1']; const color = d3 .scaleOrdinal() .domain(columns) .range(palette) .unknown("#ccc"); const nestedData = d3 .nest() .key(d => d.age) .entries(filteredData) .map(d => arrayToObject(d.values, 'race', attr)); console.log(`${group} ${attr} ${x.domain()} ${x.range()}`); const stack = d3 .stack() .keys(columns) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); const stackedData = stack(nestedData).map( d => (d.forEach(v => (v.key = d.key)), d) ); svg .selectAll("g") .data(stackedData) .join("g") .attr("data-group", group) .attr("data-attr", attr) .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("data-race", d => d.key) .attr("x", d => x(d[0])) .attr("width", d => x(d[1]) - x(d[0])) .attr("y", margin.top) .attr("height", chartHeight - margin.top - margin.bottom) .on("mouseover", d => { d3.selectAll(`g[data-group='${group}'] rect[data-race='${d.key}']`).attr( "fill", d3 .color(color(d.key)) .brighter(0.66) .hex() ); d3.select(`tr[data-group='${group}'] .infobox`).html( createInfobox(group, d.key) ); }) .on("mouseout", d => { d3.selectAll(`g[data-group='${group}'] rect[data-race='${d.key}']`).attr( "fill", color(d.key) ); d3.select(`tr[data-group='${group}'] .infobox`).html( createInfobox(group) ); }); return svg.node(); }33:[{"id":"2983be3565afb5eb914e972b468847d7593bb21e7672a08a15739332009a77a29a4b5a7e438142aa123869c0eea32e02ae23b136b8990ab1f316f7e781a89b74","href":"https://static.observableusercontent.com/files/2983be3565afb5eb914e972b468847d7593bb21e7672a08a15739332009a77a29a4b5a7e438142aa123869c0eea32e02ae23b136b8990ab1f316f7e781a89b74","name":"race-by-age-cleaned-1@3.csv","type":"text/csv","lastModified":1592840717404.536,"size":1199}] 2f:{"title":"California COVID-19 disparities stacked bars","cells":[{"id":0,"value":"md`# California COVID-19 disparities stacked bars`","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"md`Demographic data released by the California Department of Public Health shows that among most age groups blacks and Latinos are dying more often than other races, relative to their share of the population.\n\nThis chart was developed as a prototype for the _Los Angeles Times_ article [\"Tracking coronavirus in California\"](https://www.latimes.com/projects/california-coronavirus-cases-tracking-outbreak/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"md`### Percentage by race`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html`\n\n \n\n \n \n \n \n \n \n\n\n ${ageGroups.map(\n g => html`\n \n \n \n \n \n\n \n\n \n `\n )}\n\n

${createRaceSwatches()}
Age group	Cases	Deaths	Population
${journalize.capfirst(\n g\n )} \n ${createInfobox(g)} \n	${createRaceChart(g, 'cases_total')}	${createRaceChart(g, 'deaths_total')}	${createRaceChart(\n g,\n 'population_percent'\n )}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"createInfobox = (group, race = null) => {\n if (race) {\n return `

${race}

${getPercent(\n group,\n race,\n \"cases\"\n ).toFixed(0)}% cases

${getPercent(\n group,\n race,\n \"deaths\"\n ).toFixed(0)}% deaths

${getPercent(\n group,\n race,\n \"population\"\n ).toFixed(0)}% population

`;\n } else {\n return `

${journalize.intcomma(\n groupTotal(group, 'cases')\n )} cases

${journalize.intcomma(\n groupTotal(group, 'deaths')\n )} deaths

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"groupTotal = (group, attr) => {\n const filteredData = raceData.filter(d => d.age == group);\n return d3.sum(filteredData, d => d[`${attr}_total`]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"getTotal = (group, race, attr) => {\n const obj = raceData.find(d => d.age == group && d.race == race);\n return obj[`${attr}_total`];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"createRaceSwatches = () => {\n const columns = [\"Latino\", \"White\", \"Asian\", \"Black\", \"Other\"];\n const palette = ['#3580b1', '#ec8431', '#ab7fb4', '#adc839', '#829eb1'];\n return swatches({\n color: d3.scaleOrdinal(columns, palette)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"getPercent = (group, race, attr) => {\n const obj = raceData.find(d => d.age == group && d.race == race);\n return obj[`${attr}_percent`];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"ageGroups = [\"80+\", \"65-79\", \"50-64\", \"35-49\", \"18-34\", \"0-17\", \"all\"].reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"xs = Object.fromEntries(Object.keys(raceData[0]).slice(2) // create a different scale for each attr\n .map(attr => \n [attr, \n d3.scaleLinear()\n .domain([0, d3.sum(raceData.filter(d => d.age===\"all\"), d=> d[attr])])\n .range([margin.left, chartWidth - margin.right])\n ]\n ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"margin = ({ top: 10, right: 10, bottom: 2, left: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"chartHeight = 35","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"chartWidth = width/4","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"raceData = {\n const attachment = await FileAttachment(\"race-by-age-cleaned-1@3.csv\").text();\n return d3.csvParse(attachment, d3.autoType);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"arrayToObject = (array, attr, value) =>\n array.reduce((obj, item) => {\n obj[item[attr]] = item[value];\n if (attr.indexOf(\"_percent\")!==-1) obj/=100;\n return obj;\n }, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"journalize = require(\"journalize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}