31: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(); }32:[{"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}] 2f:{"title":"California COVID-19 disparities bullet graph","cells":[{"id":0,"value":"md`# California COVID-19 disparities bullet graph`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":121,"value":"md`#### Percentage of population vs. deaths in California`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":339,"value":"legend({\n title: \"% difference to population\",\n color:colorDiff,\n tickFormat: \"-%\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":161,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"x = d3\n .scaleLinear()\n .domain([0, .75])\n .rangeRound([margin.left, chartWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":300,"value":"fmt = d3.format(\".0%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"color = d3\n .scaleOrdinal()\n .domain([\"deaths\", \"population\"])\n .range([\"#46525f\", \"#dadfe1\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"colorDiff(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"colorDiff = d3.scaleSequential(d3.interpolateRdBu)\n .domain([0.3, -0.3])","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"// selectedData = nestedData.find(d => d.key == group).values","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"keys = nestedData.map(d => d.key).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":46,"value":"chartHeight = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"chartWidth = Math.min(300, width/2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"margin = ({ top: 0, right: 0, bottom: 30, left: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}