2f:null 30:["$","title",null,{"children":"California COVID-19 disparities bullet graph | John Alexis Guerra Gómez | Observable"}] 35:T675,barChart = (data) => { const svg = d3.select(DOM.svg(chartWidth, chartHeight)); // svg // .append("g") // .selectAll("rect") // .data(data) // .join("rect") // .attr("fill", color("population")) // .attr("y", d => y(d.age)) // .attr("height", y.bandwidth()) // .attr("x", x(0)) // .attr("width", d => x(d.population_percent / 100)-x(0)); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", d => colorDiff( (d.deaths_percent-d.population_percent)/100)) .attr("x", x(0)) .attr("y", (d, i) => y(d.age) + y.bandwidth() * .25) .attr("width", d => x(d.deaths_percent / 100)- x(0)) .attr("height", y.bandwidth() * .5); svg .append("g") .selectAll("line") .data(data) .join("line") .attr("stroke", color("population")) .attr("stroke-width", "4px") .attr("y1", d => y(d.age)) .attr("y2", d => y(d.age) + y.bandwidth()) .attr("x1", d => x(d.population_percent / 100)) .attr("x2", d => x(d.population_percent / 100)) .on("mouseover", d => console.log(d)); svg .append("g") .selectAll("text") .data(data) .join("text") // .attr("fill", d => colorDiff( (d.deaths_percent-d.population_percent)/100)) .attr("x", d => x(d.deaths_percent / 100)) .attr("y", (d, i) => y(d.age) + y.bandwidth()/2) .classed("barText", true) .text(d => { const diff = (d.deaths_percent-d.population_percent)/100; return ` ${diff>0? "+" : ""}${fmt(diff)}` }); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }36:[{"id":"2983be3565afb5eb914e972b468847d7593bb21e7672a08a15739332009a77a29a4b5a7e438142aa123869c0eea32e02ae23b136b8990ab1f316f7e781a89b74","href":"https://static.observableusercontent.com/files/2983be3565afb5eb914e972b468847d7593bb21e7672a08a15739332009a77a29a4b5a7e438142aa123869c0eea32e02ae23b136b8990ab1f316f7e781a89b74","name":"race-by-age-cleaned-1-3.csv","type":"text/csv","lastModified":1592855428126.502,"size":1199}] 33:{"id":"2a85b83ab7a29710","slug":"california-covid-19-disparities-bullet-graph","title":"California COVID-19 disparities bullet graph","thumbnail":"de8d449ce8416cb5b8c7979bd5d574f99cfa36d535df72567e15aae0ff850164","access_level":"public","create_time":"$D2020-06-22T19:50:28.126Z","update_time":"$D2021-10-12T15:00:13.065Z","view_time":null,"first_public_time":"$D2020-06-22T20:16:08.161Z","has_unpublished_edits":null,"fork":{"id":"8f818905513544c0","slug":"california-covid-19-disparities-bullet-graph","title":"California COVID-19 disparities bullet graph","owner":{"id":"ecf037f5c1847e7a","login":"palewire","name":"Ben Welsh"}},"stars":1,"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":343,"publish_version":343,"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":1,"collection":{"id":"430717abbcecfff2","slug":"covid-colombia","title":"Covid","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"title":"California COVID-19 disparities bullet graph","cells":[{"id":0,"value":"md`# California COVID-19 disparities bullet graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"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":121,"value":"md`#### Percentage of population vs. deaths in California`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"chart = {\n return html`\n

\n ${nestedData.map(dataGroup => {\n return html`\n

${dataGroup.key}

\n ${barChart(dataGroup.values)}\n

\n `;\n \n })}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"legend({\n title: \"% difference to population\",\n color:colorDiff,\n tickFormat: \"-%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"// viewof group = select({\n// options: keys,\n// value: \"35-49\",\n// title: \"Select an age group\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"x = d3\n .scaleLinear()\n .domain([0, .75])\n .rangeRound([margin.left, chartWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"y = d3\n .scaleBand()\n .domain(nestedData[0].values.map(d => d.age).sort())\n .rangeRound([margin.top, chartHeight - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(\n d3\n .axisLeft(y)\n // .tickFormat(i => selectedData[i].race)\n .tickSize(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${chartHeight - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .tickValues([0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7])\n .tickSize(4)\n .tickFormat(fmt)\n )\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"fmt = d3.format(\".0%\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"color = d3\n .scaleOrdinal()\n .domain([\"deaths\", \"population\"])\n .range([\"#46525f\", \"#dadfe1\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"colorDiff(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"colorDiff = d3.scaleSequential(d3.interpolateRdBu)\n .domain([0.3, -0.3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// selectedData = nestedData.find(d => d.key == group).values","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"keys = nestedData.map(d => d.key).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"nestedData = d3\n .nest()\n .key(d => d.race)\n .entries(\n raceData.sort((a, b) => {\n return b.population_percent - a.population_percent;\n })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"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":46,"value":"chartHeight = 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"chartWidth = Math.min(300, width/2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"margin = ({ top: 0, right: 0, bottom: 30, left: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"