26:null 27:["$","title",null,{"children":"California COVID-19 disparities stacked bars | John Alexis Guerra Gómez | Observable"}] 2c:T50a,html``2d:T9d0,createRaceChart = (group, attr) => { const svg = d3 .create("svg") .attr("width", chartWidth) .attr("height", chartHeight); 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)); 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(); }2e:[{"id":"2983be3565afb5eb914e972b468847d7593bb21e7672a08a15739332009a77a29a4b5a7e438142aa123869c0eea32e02ae23b136b8990ab1f316f7e781a89b74","href":"https://static.observableusercontent.com/files/2983be3565afb5eb914e972b468847d7593bb21e7672a08a15739332009a77a29a4b5a7e438142aa123869c0eea32e02ae23b136b8990ab1f316f7e781a89b74","name":"race-by-age-cleaned-1@3.csv","type":"text/csv","lastModified":1592838448317.413,"size":1199}] 2a:{"id":"f7851d7437642253","slug":"california-covid-19-disparities-stacked-bars/2","title":"California COVID-19 disparities stacked bars","thumbnail":"6987625036130c5056832c02d79e685454d328752f484d53e38d182fc4908678","access_level":"public","create_time":"$D2020-06-22T15:07:28.317Z","update_time":"$D2020-06-22T15:42:05.180Z","view_time":null,"first_public_time":"$D2020-06-22T19:24:18.094Z","has_unpublished_edits":null,"fork":{"id":"cf1b25a2a75cbbc5","slug":"california-covid-19-disparities-stacked-bars","title":"California COVID-19 disparities stacked bars","owner":{"id":"ecf037f5c1847e7a","login":"palewire","name":"Ben Welsh"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":1029,"publish_version":1029,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"California COVID-19 disparities stacked bars","cells":[{"id":0,"value":"md`# California COVID-19 disparities stacked bars`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"md`### Percentage by race`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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_percent')}	${createRaceChart(g, 'deaths_percent')}	${createRaceChart(\n g,\n 'population_percent'\n )}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"ageGroups = [\"80+\", \"65-79\", \"50-64\", \"35-49\", \"18-34\", \"0-17\", \"all\"].reverse()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"x = d3.scaleLinear().range([margin.left, chartWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"margin = ({ top: 10, right: 10, bottom: 2, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"chartHeight = 35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"chartWidth = width/4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"arrayToObject = (array, attr, value) =>\n array.reduce((obj, item) => {\n obj[item[attr]] = item[value] / 100;\n return obj;\n }, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"journalize = require(\"journalize\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2b:"$2a:body"