30:Tc81,Chart = (config = {}) => { const { data, yAccessor = d => d.newCases, yLabel = "new cases", filter = () => true, debug, outerStyle = `height: 140px;`, containerStyle = ` position: relative; height: 100px; margin-top: 40px; margin-bottom: 70px; `, fill = `#00597D` } = config; const formatDate = d3.utcFormat("%Y-%m-%d"); const filtered = data.filter(filter).filter(d => d.dateObject > dateMin); const groupedByDay = getGroupedByDay(filtered); const dateExtent = d3.extent(groupedByDay, d => d.dateObject); const yMax = d3.max(groupedByDay, yAccessor) * 1.1; const dates = groupedByDay.map(d => formatDate(d.dateObject)); const dates2 = d3.utcDay .range(dateMin, d3.utcDay.offset(dateMax, 2)) .map(d => d3.utcFormat("%Y-%m-%d")(d)); // console.log("ONE", dates.slice(0, 5)); // console.log("TWO", dates2.slice(0, 5)); // const dates = d3.utcDay.range(dateMin, d3.utcDay.offset(dateMax, 2)); // console.log("dates", dateMin, dates); const xBandScale = d3.scaleBand(dates2, [0, 100]).padding(0.1); const yScale = d3.scaleLinear([0, yMax], [100, 0]).nice(3); const rects = groupedByDay.map(d => { const left = xBandScale(formatDate(d.dateObject)); const top = yScale(yAccessor(d)); const bottom = yScale(0); const width = xBandScale.bandwidth(); const height = Math.abs(top - bottom); return ` `; }); const formatDate2 = d3.utcFormat("%b %d"); const [minDate, maxDate] = dateExtent; const dateLeft = `

${formatDate2(minDate)}

`; const dateRight = `

${formatDate2(maxDate)}

`; const latest = groupedByDay[groupedByDay.length - 1] || {}; const recent = groupedByDay.slice(-5); const callout = `

${d3.format(",")(yAccessor(latest))}

${yLabel}

`; const overlay = `

`; return html`

${overlay} ${dateLeft} ${dateRight} ${callout}

`; }31:T1520,Chart2 = props => { const { title = `TK Title`, paddingTop = `80%`, data = dataCovidTracking, yAccessor = d => d.totalDeaths, yMax = 1e6, yTickValues = [], yTickWidth = 50, yTickSuffix = ({ style }) => html`

deaths

` } = props; const dateMin = d3.utcDay(new Date(`2020-03-02`)); const dateMax = d3.utcDay(new Date(`2020-08-02`)); const groupedByDay = getGroupedByDay(data); const latest = groupedByDay.sort((a, b) => d3.descending(a.dateObject, b.dateObject))[0] || {}; const yDomain = [0, yMax]; const yRange = [100, 0]; const yScale = d3.scaleLinear(yDomain, yRange); const dateStrings = d3.utcDay .range(dateMin, d3.utcDay.offset(dateMax, 2)) .map(d => d3.utcFormat("%Y-%m-%d")(d)); const xBandScale = d3.scaleBand(dateStrings, [0, 100]).padding(0.1); const latestCallout = (() => { const x = xBandScale(d3.utcFormat("%Y-%m-%d")(latest.dateObject)); const y = yScale(yAccessor(latest)); const offset = 5; const height = 20; const top = `calc(${y}% - ${offset}px - ${height}px)`; const left = `${x - 0.2}%`; return html`

${d3.utcFormat("%B %d")(latest.dateObject)}

`; })(); const rects = groupedByDay.map(d => { const dateObject = d.dateObject; const formatted = d3.utcFormat("%Y-%m-%d")(dateObject); const left = xBandScale(formatted); const top = yScale(yAccessor(d)); const bottom = yScale(0); const width = xBandScale.bandwidth(); const height = Math.abs(top - bottom); return ` `; }); const AnnotationText = props => { const { style, text } = props; return html`

${text}

`; }; const tickWidth = yTickWidth; const baselineValue = 0; const yTicks = yTickValues.map((value, i, arr) => { const isMax = value === d3.max(arr); const isBaseline = value === baselineValue; // if (isBaseline) return null; const strokeDasharray = isBaseline ? "" : "4 4"; const top = `${yScale(value)}%`; const line = html` `; const tickTextStyle = s({ width: `${tickWidth}px`, textAlign: `left`, transform: `translate(0, -100%)`, fontSize: `12px`, lineHeight: `15px` }); let text = html`

${d3 .format(".2s")(value) .replace("M", " million")}

`; if (isMax) { const suffix = yTickSuffix({ style: tickTextStyle }); text = html` ${text} ${suffix} `; } if (isBaseline) { text = html``; } return html`

${line} ${AnnotationText({ text, style: s({ top, left: `100%` }) })}

`; }); const dateLeft = `

${d3.utcFormat("%B")(dateMin)}

`; const dateRight = `

${d3.utcFormat("%B")(dateMax)}

`; const height = 200; // const absoluteStyle = { // boxSizing: `border-box`, // position: `absolute`, // top: 0, // left: 0, // height: `100%`, // width: `100%`, // padding: `40px`, // paddingRight: `100px` // }; const chartContainerStyle = { position: `relative`, boxSizing: `border-box`, height: `${height}px`, margin: `50px`, marginLeft: `30px` }; return html`

${title}

${yTicks} ${dateLeft} ${dateRight}

`; }32:[] 2e:{"title":"Coronavirus Tracker","cells":[{"id":0,"value":"md`\n # Coronavirus Tracker\n\n Based on the chart published in [Mapping the Coronavirus\nOutbreak Across the World](https://www.bloomberg.com/graphics/2020-wuhan-novel-coronavirus-outbreak/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"html`

Confirmed cases added per day

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"MultiChart({\n yLabel: \"new cases\",\n fill: \"#00b1fa\",\n config: [\n [`Global (Johns Hopkins)`, dataCSSE],\n [`Global (ECDC)`, dataECDC],\n [\n `Italy (Johns Hopkins)`,\n dataCSSE,\n d => d[\"Country/Region\"].match(/^Italy/)\n ],\n [`Italy (ECDC)`, dataECDC, d => d.country === \"Italy\"],\n [\n `United States (Johns Hopkins)`,\n dataCSSE,\n d => d[\"Country/Region\"].match(/^US/)\n ],\n [`United States (ECDC)`, dataECDC, d => d.country === \"United States\"],\n [`United States (covidtracking.com)`, dataCovidTracking]\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"MultiChart = (sharedProps = {}) => {\n const { config = [[`Global (Johns Hopkins)`, dataCSSE]] } = sharedProps;\n const charts = config\n .map(arr => {\n const [title, data, filter = d => true] = arr;\n return {\n title,\n chart: Chart({ ...sharedProps, data, filter })\n };\n })\n .map(({ title, chart }) => {\n return html`\n

${title}

\n ${chart}\n `;\n });\n return html`\n

\n${charts}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"md`# Some Perspective`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"Chart2({\n title: `Total Covid-19 deaths in the U.S.`,\n data: dataCovidTracking,\n paddingTop: `80%`,\n yAccessor: d => d.totalDeaths,\n yMax: 140e3,\n yTickWidth: 20,\n yTickValues: [0, 70e3, 140e3],\n yTickSuffix: ({ style }) => html``\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"Chart2({\n title: `U.S. deaths added per day`,\n data: dataCovidTracking,\n paddingTop: `80%`,\n yAccessor: d => d.newDeaths,\n yMax: 3e3,\n yTickWidth: 30,\n yTickValues: [0, 1e3, 2e3, 3e3],\n yTickSuffix: ({ style }) => html``\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"s = obj => {\n return {\n ...obj,\n toString: () => {\n let string = '';\n Object.keys(obj).forEach(key => {\n const styleName = key.replace(\n /[A-Z]/g,\n match => `-${match.toLowerCase()}`\n );\n const styleValue = obj[key];\n if (typeof styleValue !== undefined && styleValue !== null) {\n string = `${string}${styleName}: ${styleValue};\\n`;\n }\n });\n return string;\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"dateMin = {\n return new Date(\"2020-03-01\");\n return d3.min(\n [dataCSSE, dataCovidTracking, dataWHO, dataECDC].map(arr =>\n d3.min(arr, d => d.dateObject)\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"dateMax = d3.max(\n [dataCSSE, dataCovidTracking, dataWHO, dataECDC].map(arr =>\n d3.max(arr, d => d.dateObject)\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"getGroupedByDay = data =>\n d3\n .groups(data, d => d.dateString)\n .map(([key, values]) => {\n const totalCases = d3.sum(values, d => d.cases);\n const totalDeaths = d3.sum(values, d => d.deaths);\n return {\n dateObject: new Date(key),\n dateString: key,\n key,\n values,\n totalCases,\n totalDeaths\n };\n })\n .map((obj, i, arr) => {\n const prev = arr[i - 1];\n let newCases = 0;\n let newDeaths = 0;\n if (prev) {\n newCases = obj.totalCases - prev.totalCases;\n newDeaths = obj.totalDeaths - prev.totalDeaths;\n }\n return {\n ...obj,\n newCases,\n newDeaths\n };\n })\n .sort((a, b) => d3.ascending(a.dateObject, b.dateObject))","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"dataCovidTracking = {\n const json = await fetch(`https://covidtracking.com/api/states/daily`)\n .then(res => res.json())\n .catch(() => []);\n const parsed = json\n .map(raw => {\n const dateObject = d3.utcParse(\"%Y%m%d\")(raw.date.toString());\n const dateString = d3.utcFormat(\"%Y-%m-%d\")(dateObject);\n return {\n ...raw,\n dateObject,\n dateString,\n cases: +raw.positive,\n deaths: +raw.death\n };\n })\n .sort((a, b) => d3.ascending(a.dateObject, b.dateObject));\n return parsed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"dataCSSE = {\n console.clear();\n const string = await fetch(\n `https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv`\n ).then(res => res.text());\n const parsed = d3.csvParse(string);\n const flattened = parsed\n .map(obj => {\n const out = [];\n const meta = {};\n Object.keys(obj).forEach(key => {\n const value = obj[key];\n if (key.match(/^\\d/)) {\n out.push({\n dateString: key,\n dateObject: new Date(key),\n cases: +value,\n ...meta\n });\n } else {\n meta[key] = value;\n }\n });\n return out;\n })\n .flat(Infinity);\n return flattened;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"dataWHO = {\n console.clear();\n const parsed = await fetch(\n `https://covid.ourworldindata.org/data/total_cases.csv`\n )\n .then(res => res.text())\n .then(text => d3.csvParse(text));\n const flattened = parsed\n .map(obj => {\n const { date: dateString } = obj;\n const out = [];\n Object.keys(obj).forEach(key => {\n if (key === \"date\") return;\n if (key === \"World\") return;\n const value = +obj[key];\n out.push({\n dateString,\n dateObject: new Date(dateString),\n cases: value,\n country: key\n });\n });\n return out;\n })\n .flat(Infinity);\n return flattened;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"dataECDC = {\n console.clear();\n const parsed = await fetch(\n `https://covid.ourworldindata.org/data/ecdc/total_cases.csv`\n )\n .then(res => res.text())\n .then(text => d3.csvParse(text));\n const flattened = parsed\n .map(obj => {\n const { date: dateString } = obj;\n const out = [];\n Object.keys(obj).forEach(key => {\n if (key === \"date\") return;\n if (key === \"World\") return;\n const value = +obj[key];\n out.push({\n dateString,\n dateObject: new Date(dateString),\n cases: value,\n country: key\n });\n });\n return out;\n })\n .flat(Infinity);\n return flattened;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3\", \"d3-array\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}