31:T466,function init(all) { d3.select('.yAxis') .call(d3.axisLeft(y)) .attr('opacity', 1) d3.select('.xAxis') .call(d3.axisBottom(x)) .attr('opacity', 1) if(d3.select('.axis-title').empty()) { d3.select('.xAxis') .append('text') .attr('class', 'axis-title') .attr('x', margin.left + (width - margin.left - margin.right) / 2) .attr('y', margin.bottom * .7) // Relative to the x axis. } d3.select('.axis-title').text('Date'); d3.select('.day-title') .transition().duration(1000) .attr('opacity', 0); svg.selectAll(".line") .transition() .duration(2000) .attr("stroke-width", 5) .attr("stroke-linejoin", 'butt') .attr("stroke-linecap", "butt") .attr("d", line) .on("end", function() { if(all) { update1(all) } }); // TEXT AND BUTTONS d3.selectAll('button') .classed('active', false) d3.select("#default") .classed('active', true) d3.select('.top-text') .html('This is a line chart showing deaths from COVID-19 over time.
The US recently passed 500,000 deaths.') }32:T423,function update1(all) { d3.select('.yAxis') .call(d3.axisLeft(y1)) .attr('opacity', 1) d3.select('.xAxis') .call(d3.axisBottom(x)) d3.select('.axis-title').text('Date'); d3.select('.day-title') .transition().duration(1000) .attr('opacity', 0); svg.selectAll(".line") .transition() .duration(2000) .attr("stroke-width", 20) .attr("stroke-linejoin", 'butt') .attr("stroke-linecap", "butt") .attr("d", line1) .on("end", function() { if(all) { update2(all) } }); // BUTTONS AND TEXT d3.selectAll('button') .classed('active', false) d3.select("#update1") .classed('active', true) d3.select('.top-text') .html("We can instead visualize the number of days passed before reaching the next 100,000 deaths. Here, each bar's length corresponds to the number of days it took to reach the next 100,000 deaths (e.g. 0 to 100k).") }33:T425,function update2(all) { svg.selectAll(".line") .transition() .duration(2000) .attr('stroke-width', 20) .attr("stroke-linejoin", 'butt') .attr("stroke-linecap", "butt") .attr("d", line2) .on("end", function() { if(all) { update3(all) } }); // d3.select('.yAxis') // .transition().duration(2000) // .attr('opacity', 0) // d3.select('.xAxis') // .transition().duration(2000) // .attr('opacity', 0) d3.select('.xAxis') .call(d3.axisBottom(x2).ticks(width / 80).tickSizeOuter(0)) d3.select('.axis-title') .text('Days'); d3.select('.day-title') .transition().duration(1000) .attr('opacity', 0); // BUTTONS AND TEXT d3.selectAll('button') .classed('active', false) d3.select("#update2") .classed('active', true) d3.select('.top-text') .html("When we align each of the bars, we notice deaths have been accelerating, as the bars' lengths have gotten progressively shorter for each 100,000 death threshold.") }34:T6b1,function update3(all) { if(d3.select('.day-title').empty()) { svg.append('text') .text('34 days') .attr('class', 'day-title') .attr('x', x2(382)) .attr('y', height / 2) .attr('fill', 'white') } d3.select('.day-title') .transition().duration(1000) .attr('opacity', 1) svg.selectAll('.line') .on("mouseover", function(d, i){ return tooltip.style("visibility", "visible") .text(`${i[0].name}: ${i.length} days`); }) .on("mousemove", function(event){ return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px"); }) .on("mouseout", function(){ return tooltip.style("visibility", "hidden"); }); svg.selectAll(".line") .transition().duration(2000) .attr("d", line2) .attr("stroke-width", height * .75) d3.select('.yAxis') .transition().duration(2000) .attr('opacity', 0) d3.select('.xAxis') .call(d3.axisBottom(x2).ticks(width / 80).tickSizeOuter(0)) if(d3.select('.axis-title').empty()){ d3.select('.xAxis') .append('text') .attr('class', 'axis-title') .text('Days') .attr('opacity', 1) .attr('x', margin.left + (width - margin.left - margin.right) / 2) .attr('y', margin.bottom * .7) // Relative to the x axis. } // BUTTONS AND TEXT d3.selectAll('button') .classed('active', false) d3.select("#update3") .classed('active', true) d3.select('.top-text') .html("The United States' most recent 100,000 deaths occurred more rapidly (34 days) than any series of 100,000 deaths prior.") }35:T679,function hover(svg, path) { const x = d3.scaleUtc() .domain(d3.extent(data.dates)) .range([margin.left, width - margin.right]) const y = d3.scaleLinear() .domain([0, d3.max(data.series, d => d3.max(d.values))]).nice() .range([height - margin.bottom, margin.top]) if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); function moved() { d3.event.preventDefault(); const mouse = d3.mouse(this); const xm = x.invert(mouse[0]); const ym = y.invert(mouse[1]); const i1 = d3.bisectLeft(data.dates, xm, 1); const i0 = i1 - 1; const i = xm - data.dates[i0] > data.dates[i1] - xm ? i1 : i0; const s = d3.least(data.series, d => Math.abs(d.values[i] - ym)); path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise(); dot.attr("transform", `translate(${x(data.dates[i])},${y(s.values[i])})`); dot.select("text").text(s.name); } function entered() { path.style("mix-blend-mode", null).attr("stroke", "#ddd"); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply").attr("stroke", null); dot.attr("display", "none"); } }36:T44a,specific = html``37:[] 2f:{"title":"500,000 COVID-19 Deaths","cells":[{"id":0,"value":"md`# 500,000 COVID-19 Deaths`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"button = html`\n \n \n \n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"svg.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"init(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.deaths)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr('class', 'xAxis')\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr('class', 'yAxis')\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"svg.append(\"g\")\n .call(yAxis);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1196,"value":"svg.append(\"g\")\n .call(xAxis);","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"line = d3.line()\n .defined(d => !isNaN(d.deaths))\n .x(d => x(d.date))\n .y(d => y(d.deaths))","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"lines = svg.selectAll('.line')","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"series.forEach((el, i) => {\n svg.append(\"path\")\n .datum(el)\n .attr('class', 'line')\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", colors[i])\n .attr(\"stroke-width\", 5)\n .attr(\"d\", line);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1012,"value":"tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"y1 = d3.scalePoint()\n .padding(.25)\n .domain(data.filter(d => d.name != 'Sixth 100k').map(d => d.name))\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"x2 = d3.scaleLinear()\n .domain([0, data.length])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"line1 = d3.line()\n .defined(d => !isNaN(d.deaths))\n .x(d => x(d.date))\n .y(d => y1(d.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"line2 = d3.line()\n .defined(d => !isNaN(d.deaths))\n .x(d => x(d.date))\n .y(height / 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"d3.select(\"#default\")\n .on(\"click\", function() {\n init(false)\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"d3.select(\"#init\")\n .on(\"click\", function() {\n init(true);\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"d3.select(\"#update1\")\n .on(\"click\", function() {\n update1();\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"d3.select(\"#update2\")\n .on(\"click\", function() {\n update2();\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"d3.select(\"#update3\")\n .on(\"click\", function() {\n update3();\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"series = [first, second, third, fourth, fifth];","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"raw = {\n return d3.csv(\n await('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us.csv'),\n d => ({\n name: +d.deaths > 500000 ? 'Sixth 100k' : \n +d.deaths > 400000 ? 'Fifth 100k' :\n +d.deaths > 300000 ? 'Fourth 100k' : \n +d.deaths > 200000 ? 'Third 100k' :\n +d.deaths > 100000 ? 'Second 100k' : \n +d.deaths >= 0 ? 'First 100k' :\n null\n ,\n cases: +d.cases,\n deaths: +d.deaths,\n date: parseDate(d.date),\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"data = raw.filter(d => d.deaths < 500001)","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"first = data.filter(d => d.name == 'First 100k');","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"second = data.filter(d => d.name == 'Second 100k')","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"third = data.filter(d => d.name == 'Third 100k')","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"fourth = data.filter(d => d.name == 'Fourth 100k')","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"fifth = data.filter(d => d.name == 'Fifth 100k')","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"sixth = data.filter(d => d.name == 'Sixth 100k')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"margin = ({top: 10, right: 30, bottom: 60, left: 70})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"colors = d3.schemeCategory10","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"parseDate = d3.utcParse(\"%Y-%m-%d\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"import { style } from '@connorrothschild/styles'","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}