31:T215b,chart = { /*** init div container, canvas, and svg plot ***/ const cp = chart_param, container = html`

`, pixel_ratio = window.devicePixelRatio, canvas_width = cp.width - (cp.margin.left + cp.margin.right), canvas_height = cp.height - (cp.margin.top + cp.margin.bottom), canvas = d3.select(container).append("canvas") .attr("width", (canvas_width + cp.margin.axis) * pixel_ratio) .attr("height", (canvas_height + 10) * pixel_ratio) .style("width", (canvas_width + cp.margin.axis) + "px") .style("height", (canvas_height + 10) + "px") .style("position", "absolute") .style("padding", `${cp.margin.top}px ${cp.margin.right}px ${cp.margin.bottom}px ${cp.margin.left}px`), context = canvas.node().getContext("2d"), svg = d3.select(container).append("svg") .attr("width", cp.width) .attr("height", cp.height) .style("position", "absolute"), svg_y = d3.scaleLinear() .domain(d3.extent(covid_data, d => d.ix)) .range([cp.margin.top, cp.margin.top + canvas_height - (cp.day_height + cp.margin.day)]); // scale the canvas so output doesn't appear blurry context.scale(pixel_ratio, pixel_ratio); /*** draw dots and tick marks for each day ***/ // retain the first_dot position to mark with annotation let first_dot = [ ]; for (let ix = 0; ix < covid_data.length; ix++) { const day_data = covid_data[ix]; // draw # of dots based on rounded rolling daily average for (let dix = 0; dix < Math.ceil(day_data.daily_deaths_roll_avg); dix++) { const dot_x = canvas_width * Math.random(), dot_y = (ix * (cp.day_height + cp.margin.day)) + cp.day_height * Math.random(); context.fillStyle = "black"; context.fillRect(dot_x, dot_y, 1, 1); if (ix == 0 & dix == 0) first_dot = [dot_x, dot_y]; } // draw tick for each day context.fillStyle = "red"; context.fillRect(canvas_width + 1, (ix * (cp.day_height + cp.margin.day)), cp.margin.axis - 1, 1); } // draw last tick mark (for end of last day) context.fillRect(canvas_width + 1, canvas_height, cp.margin.axis - 1, 1); /*** draw threshold crossing lines and text (every XXX deaths) ***/ // draw threshold crossing lines svg.selectAll("line.threshold") .data(covid_data.filter(d => d.threshold_date == 1)).enter() .append("line") .classed("threshold", true) .attr("x1", 0) .attr("y1", d => svg_y(d.ix) + 0.5) .attr("x2", cp.margin.left + canvas_width + (!!show_labels ? cp.margin.left : cp.margin.right)) .attr("y2", d => svg_y(d.ix) + 0.5) .style("stroke", "red"); // add group for each threshold label (two text elements) const thresh_text = svg.selectAll("g.threshold-text") .data(covid_data.filter(d => d.threshold_date == 1)).enter() .append("g") .classed("threshold-text", true) .attr("transform", d => `translate(0, ${svg_y(d.ix) + 0.5})`); // add date for threshold point thresh_text.append("text") .attr("x", 0) .attr("y", -25) .style("fill", "red") .style("font-size", "14px") .text(d => format_date(d.date)); // add number indicating the threshold thresh_text.append("text") .attr("x", 0) .attr("y", -7) .style("fill", "red") .style("font-size", "20px") .style("font-weight", "bold") .text(d => d3.format(`,.${(threshold / 1e5) % 1 > 0 ? 3 : 2}r`) (Math.round(d.total_deaths / threshold) * threshold)); /*** place number of days between threshold point text ***/ // find midpoint of threshold lines (used in next step) const line_midpoints = svg.selectAll("line.threshold").data() .map((d, i, a) => ({ ix1: i > 0 ? a[i - 1].ix : svg_y.domain()[0], ix2: d.ix })) .map((d, i) => ({ ix: (d.ix2 + d.ix1) / 2, days_diff: thresh_days_diff[i]})); // place groups for each text label (multiple text elements; one for each line) const thresh_gap = svg.selectAll("g.threshold-gap") .data(line_midpoints).enter() .append("g") .classed("threshold-gap", true) .attr("transform", d => `translate(${cp.margin.left + canvas_width + cp.margin.axis}, ${svg_y(d.ix) + 0.5})`); // text for first threshold gap thresh_gap.filter((d, i) => i == 0) .selectAll("text") .data([`It took ${thresh_days_diff[0]} days`, `to reach ${d3.format(",.2r")(threshold)}`, "deaths."]).enter() .append("text") .attr("x", 7) .attr("y", (d, i) => (i - 1) * 14) .text(d => d); // text for subsequent threshold gaps (with more information) thresh_gap.filter((d, i) => i > 0 & i <= 4) .selectAll("text") .data((d, i) => [i == 0 ? `It took ${d.days_diff} days` : `${d.days_diff} days to reach`, i == 0 ? "to reach the next" : `the next ${d3.format(",.2r")(threshold)}`, i == 0 ? `${d3.format(",.2r")(threshold)} deaths.` : "deaths."]).enter() .append("text") .attr("x", 7) .attr("y", (d, i) => (i - 1) * 14) .text(d => d); // text if only showing "xx days" thresh_gap.filter((d, i) => i > 4) .append("text") .attr("y", 0) .text(d => `${d.days_diff} days`); // style all text the same way thresh_gap.selectAll("text") .attr("x", 7) .style("fill", "red") .style("font-size", "14px") .style("alignment-baseline", "middle"); /*** draw "one dot represents" label ***/ if (!show_labels & width > 580) { // include background box to make text more legible svg.append("rect") .attr("x", cp.margin.left + canvas_width / 2 - 175) .attr("y", svg_y(svg_y.domain()[0] + 12) - 14) .attr("width", 350) .attr("height", 18) .style("fill", "rgba(255, 255, 255, 0.8)"); // add actual text svg.append("text") .attr("x", cp.margin.left + canvas_width / 2) .attr("y", svg_y(svg_y.domain()[0] + 12)) .style("text-anchor", "middle") .style("font-size", "14px") .text("Each dot represents one death from Covid-19 in the U.S."); } /*** create first death annotation ***/ // draw circle around the point if (width > 300) { svg.append("circle") .attr("cx", cp.margin.left + first_dot[0] + 0.5) .attr("cy", cp.margin.top + first_dot[1] + 0.5) .attr("r", 5) .style("fill", "none") .style("stroke", "red"); // include background box to make text more legible svg.append("rect") .attr("x", cp.margin.left + first_dot[0] + 0.5 + (first_dot[0] >= canvas_width / 2 ? -185 : 10)) .attr("y", cp.margin.top + first_dot[1] + 0.5 - 8) .attr("width", 175) .attr("height", 27) .style("fill", "rgba(255, 255, 255, 0.8)"); // include text for label (two lines) const first_death_label = !!show_labels ? ["First reported U.S. Covid-19 death"] : ["Feb 29, 2020: first report of a", "U.S. death, in Washington State"]; svg.selectAll("text.first-death") .data(first_death_label).enter() .append("text") .classed("first-death", true) .attr("x", cp.margin.left + first_dot[0] + 0.5 + (first_dot[0] >= canvas_width / 2 ? -1 : 1) * 12) .attr("y", (d, i) => cp.margin.top + first_dot[1] + 0.5 + i * 13) .style("text-anchor", first_dot[0] >= canvas_width / 2 ? "end" : "start") .style("alignment-baseline", "middle") .style("font-size", "12px") .style("fill", "red") .text(d => d); } if (!!show_labels) { const event_anno = svg.selectAll("g.event-annotation") .data(label_data).enter() .append("g") .classed("event-annotation", true) .attr("transform", d => `translate(${cp.margin.left * 2 + canvas_width + 50}, ${svg_y(d.ix)})`); event_anno.append("text") .classed("annotation-date", true) .attr("y", 0) .style("fill", "red") .style("font-weight", "bold") .text(d => format_date(d.date, "%B %e")); event_anno.selectAll("text.annotation") .data(d => d.labels).enter() .append("text") .attr("y", (d, i) => (i + 1) * 15) .text(d => d); event_anno.selectAll("text") .attr("x", 0) .style("font-size", "14px") .style("alignment-baseline", "middle") } return container; }32:T8ec,md`--- ## Notes + Learnings - For more on this graphic, check out [this interview with Lazaro Gamio](https://www.storybench.org/how-lazaro-gamio-of-the-new-york-times-visualized-the-covid-19-death-toll/). - There were a decent number of styling differences between the print version and the web version of this graphic. I generally leaned towards the print styling (including an annotation for the first death, an annotation detailing that one dot represents on death, annotations on the side with more detail about the number of days between 300,000 and 350,000 deaths, etc.), but I did keep some choices from the web version (using rounded numbers on the left-hand side instead of exact numbers for the day, including commentary annotations [if you as a user chose to include it]). - I initially coded this entirely using svg, but as expected realized the issue with rendering so many elements in svg. I then instead drew the dots (and axis ticks) using HTML5 canvas and drew the annotations using svgs, allowing for hopefully more accessible text. - Another learning point in the canvas journey: in the past when I had used HTML5 canvas, it always seemed like my results were coming out kind of blurry. Thanks to some help from the D3 slack group, I figured [a simple fix by scaling the canvas](https://coderwall.com/p/vmkk6a/how-to-make-the-canvas-not-look-like-crap-on-retina) for crisper graphics. It seems to be an issue with retina screens (my MacBook included), so hopefully it doesn't look weird for other folks. - If you're using canvas via Observable and using \`DOM.context2d(...)\`, apparently you can use the \`dpr = auto\` argument to \`context2d\` to accomplish this. - While I think this is a compelling visualization of the COVID tragedy, there has been good discussion about how visualization in general is limited in its ability to properly convey tragedy. [This Twitter thread](https://twitter.com/chezvoila/status/1363530540092186627) started off a lot of it and there has been [some](https://twitter.com/bendoesdataviz/status/1363891692596850697) [other](https://twitter.com/blprnt/status/1363465062032236546) [good](https://twitter.com/visualisingdata/status/1363799582547795968) [responses](https://twitter.com/FILWD/status/1363663758225272833) to it.`33:[{"id":"7f9513ebdbea9b20974a0b92776a132a95e30a4795abf36c67237917f50387d15410fc979f51885b5e6fb00c8b3fe5d8e8fa55099ef4e4e23918ad39a87c7bfd","href":"https://static.observableusercontent.com/files/7f9513ebdbea9b20974a0b92776a132a95e30a4795abf36c67237917f50387d15410fc979f51885b5e6fb00c8b3fe5d8e8fa55099ef4e4e23918ad39a87c7bfd","name":"nyt-500k-deaths-labels.json","type":"application/json","lastModified":1614211790611.209,"size":3077}] 2f:{"title":"How 510,000 Coronavirus Deaths Added Up","cells":[{"id":0,"value":"md`# How ${d3.format(\",.2r\")(\n covid_data_raw[covid_data_raw.length - 1].deaths\n)} Coronavirus Deaths Added Up\n\nA recreation of [this chart](https://www.nytimes.com/interactive/2021/01/27/us/us-coronavirus-deaths-rate.html) from Lazaro Gamio at the New York Times. I've also incorporated some edits that they made for [the print version](https://static01.nyt.com/images/2021/02/21/nytfrontpage/scan.pdf).\n\nThe data also comes from [the New York Times](https://github.com/nytimes/covid-19-data) (actual data file found [here](https://raw.githubusercontent.com/nytimes/covid-19-data/master/us.csv)).\n\nThis visualization is using data from ${\nd3.extent(covid_data_raw.filter(d => d.deaths > 0), d => d.date)\n .map(d => d3.timeFormat(\"%B %d, %Y\")(d3.timeParse(\"%Y-%m-%d\")(d)))\n .join(\" to \")\n}.\n\n----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"viewof show_labels = checkbox({\n options: [{ label: \"Show event annotations\", value: \"show\" }],\n description: width > 725 ? null : \"Note: these annotations won't look good in a narrower window\",\n value: width > 725 ? \"show\" : null\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"tweet(\"1363530540092186627\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"n_roll_days = 7;","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"threshold = !!show_labels ? 25000 : 50000","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"thresh_days_diff = covid_data.filter(d => d.threshold_date == 1)\n .map((d, i, a) => ({day1: new Date(i > 0 ? a[i - 1].date : \"2020-02-29\"),\n day2: new Date(d.date) }))\n .map((d) => (d.day2 - d.day1) / (1000 * 60 * 60 * 24));","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"covid_data = {\n const covid_data1 = covid_data_raw.map((d, i) => ({\n date: d.date,\n ix: i,\n total_deaths: d.deaths,\n daily_deaths: i > 0 ? d.deaths - covid_data_raw[i - 1].deaths : 0,\n threshold_date: (d.deaths % threshold) < ((covid_data_raw[i > 0 ? i - 1 : 0].deaths) % threshold) ? 1 : 0\n }));\n const covid_data2 = covid_data1.map((d, i1) => {\n if (i1 >= n_roll_days) {\n d[\"daily_deaths_roll_avg\"] = d3.sum(covid_data1.filter((d, i2) => (i1 - n_roll_days <= i2 & i2 <= i1)), \n d => d.daily_deaths) / n_roll_days;\n } else {\n d[\"daily_deaths_roll_avg\"] = 0;\n }\n return d;\n })\n return covid_data2.filter(d => d.total_deaths > 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"covid_data_raw = d3.csv(\"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us.csv\",\n (d) => ({ date: d.date, cases: +d.cases, deaths: +d.deaths }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"label_data = label_data_raw.map(d => Object.assign(d, \n {ix: covid_data.filter(d2 => d.date == d2.date)[0].ix}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"label_data_raw = FileAttachment(\"nyt-500k-deaths-labels.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"chart_param_init = ({\n width: width,\n margin: {\n top: 10,\n right: !!show_labels ? 450 : 130,\n bottom: 10,\n left: 90,\n day: 0,\n axis: 10\n },\n day_height: (!!show_labels ? 12 : 5) * (width < 500 ? (width < 350 ? 2 : 1.5) : 1)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"// after manually setting parameters in chart_param_init, height will be defined based on those params\nchart_param = Object.assign(chart_param_init, {\n height:\n chart_param_init.margin.top +\n chart_param_init.margin.bottom +\n covid_data.length * (chart_param_init.margin.day + chart_param_init.day_height)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"format_date = (str, format) => d3.utcFormat(format ? format : \"%b. %_d, %Y\")(new Date(str)).replace(\" \", \" \")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}