31:T4c8,html``32: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(); }33:[{"id":"17de095ad4eee8c0b351bfc5e1fdf3aa3b3c446c3e0ac04eea1eabe5073f66b57402c4b30967ffe81cd6d280cc06bc4db03f17694da0d33e6989e0bbcc96e4f2","href":"https://static.observableusercontent.com/files/17de095ad4eee8c0b351bfc5e1fdf3aa3b3c446c3e0ac04eea1eabe5073f66b57402c4b30967ffe81cd6d280cc06bc4db03f17694da0d33e6989e0bbcc96e4f2","name":"race-by-age-cleaned@1.csv","type":"text/csv","lastModified":1589422258630.036,"size":2828},{"id":"4f0ac63bc0e99dae90fa4e9614e42bbee58adf5d6030b5f1bfa2e355c4384d587303f407ce69f067763c36631ceeb60f4f2e79b497c23c0025f40c709de63079","href":"https://static.observableusercontent.com/files/4f0ac63bc0e99dae90fa4e9614e42bbee58adf5d6030b5f1bfa2e355c4384d587303f407ce69f067763c36631ceeb60f4f2e79b497c23c0025f40c709de63079","name":"race-by-age-cleaned-1.csv","type":"text/csv","lastModified":1589432680641.896,"size":1202},{"id":"2983be3565afb5eb914e972b468847d7593bb21e7672a08a15739332009a77a29a4b5a7e438142aa123869c0eea32e02ae23b136b8990ab1f316f7e781a89b74","href":"https://static.observableusercontent.com/files/2983be3565afb5eb914e972b468847d7593bb21e7672a08a15739332009a77a29a4b5a7e438142aa123869c0eea32e02ae23b136b8990ab1f316f7e781a89b74","name":"race-by-age-cleaned-1@3.csv","type":"text/csv","lastModified":1589435188664.589,"size":1199},{"id":"c084a5e42a929da881604e346772bcf9b0e7688d5ef5674f2403d26b99c33ff271b5acc3c432a65da2b0250d7a91e368af0d4deed5ee9f4349d9ce6b48c9b521","href":"https://static.observableusercontent.com/files/c084a5e42a929da881604e346772bcf9b0e7688d5ef5674f2403d26b99c33ff271b5acc3c432a65da2b0250d7a91e368af0d4deed5ee9f4349d9ce6b48c9b521","name":"by_age_clean.csv","type":"text/csv","lastModified":1589499192620.504,"size":254},{"id":"b63bc00a996028de762ec0e695b4c25bf3267175f413cab8fd8f3068ada124d766e5b7cbe832d09814515c45b2645106cece785815d8c41ffa938d5b8f8f3e9c","href":"https://static.observableusercontent.com/files/b63bc00a996028de762ec0e695b4c25bf3267175f413cab8fd8f3068ada124d766e5b7cbe832d09814515c45b2645106cece785815d8c41ffa938d5b8f8f3e9c","name":"race-by-age@1.csv","type":"text/csv","lastModified":1589387360720.098,"size":2175}] 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 ${ageGroups.map(\n g => html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n `\n )}\n\n

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

\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":"x = d3.scaleLinear().range([margin.left, chartWidth - margin.right])","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 = 200","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] / 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"}