2b:T11ea,{ var svgDims = [900,600] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:#C9C9C9;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([0,usaDateData.length]).range([65,850]) var yScale = d3.scaleLog().base(2).domain([1048576,1]).range([100,550]) //axes var xAxis = svg.append("g").attr("transform",`translate(0,550)`) d3.axisBottom(xScale).tickFormat(d3.format(".0f"))(xAxis) var yAxis = svg.append("g").attr("transform",`translate(65,0)`) d3.axisLeft(yScale)(yAxis) //paths var usaPathData = d3.line().x(d => xScale(d.dayNumber)).y(d => yScale(d.caseCount)).curve(d3.curveMonotoneY)(usaDateData) svg.append("path") .attr("stroke","black") .attr("stroke-width","5") .attr("fill","none") .attr("d",usaPathData) var italyPathData = d3.line().x(d => xScale(d.dayNumber)).y(d => yScale(d.caseCount))(italyDateData) svg.append("path") .attr("stroke","#19BDFF") .attr("stroke-width","5") .attr("fill","none") .attr("d",italyPathData) var greecePathData = d3.line().x(d => xScale(d.dayNumber)).y(d => yScale(d.caseCount))(greeceDateData) svg.append("path") .attr("stroke","#FF00FF") .attr("stroke-width","5") .attr("fill","none") .attr("d",greecePathData) //legendBoxes var usaLegendBox = svg.append("rect") .attr("x",600) .attr("y",350) .attr("width",30) .attr("height",30) .attr("fill","black") .attr("stroke","white") .attr("stroke-width",2) //legendBoxes var italyLegendBox = svg.append("rect") .attr("x",600) .attr("y",430) .attr("width",30) .attr("height",30) .attr("fill","#19BDFF") .attr("stroke","white") .attr("stroke-width",2) //legendBoxes var greeceLegendBox = svg.append("rect") .attr("x",600) .attr("y",390) .attr("width",30) .attr("height",30) .attr("fill","#FF00FF") .attr("stroke","white") .attr("stroke-width",2) //legendText var usaLegendText = svg.append("text") .attr("x", 640) .attr("y", 370) .attr("font-size","12") .attr("font-weight","bold") .text("USA — 905,358 Cases") var italyLegendText = svg.append("text") .attr("x", 640) .attr("y", 450) .attr("font-size","12") .attr("font-weight","bold") .text("Italy — 192,994 Cases") var greeceLegendText = svg.append("text") .attr("x", 640) .attr("y", 410) .attr("font-size","12") .attr("font-weight","bold") .text("Greece — 2,490 Cases") //axesText var xAxisText = svg.append("text") .attr("x",850) .attr("y", 545) .attr("text-anchor","end") .attr("font-weight","bold") .attr("font-size","12") .text("Days since COVID-19 Outbreak") var yAxisText = svg.append("text") .attr("x",70) .attr("y", 105) .attr("font-weight","bold") .attr("font-size","12") .text("COVID-19 Case Count") //titleText var titleText = svg.append("text") .attr("x",450) .attr("y",50) .attr("text-anchor","middle") .attr("font-weight","bolder") .attr("font-size",50) .attr("fill","#CC9CC9") .attr("stroke","black") .text("COVID-19 Case Count over Time") //subtitleText var subtitleText = svg.append("text") .attr("x",450) .attr("y",75) .attr("text-anchor","middle") .attr("font-weight","bolder") .attr("font-size",14) .text("Not Adjusted for Population | Key is updated for the 26th of April, Graphics are updated daily.") return svg.node() }2c:T1222,{ var svgDims = [900,600] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:#C9C9C9;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([0,usaDateData.length]).range([65,850]) var yScale = d3.scaleLinear().domain([3.5,0]).range([100,550]) //axes var xAxis = svg.append("g").attr("transform",`translate(0,550)`) d3.axisBottom(xScale).tickFormat(d3.format(".0f"))(xAxis) var yAxis = svg.append("g").attr("transform",`translate(65,0)`) d3.axisLeft(yScale)(yAxis) //paths var usaPathData = d3.line().x(d => xScale(d.dayNumber)).y(d => yScale(d.caseCount)).curve(d3.curveMonotoneY)(usaPopData) svg.append("path") .attr("stroke","black") .attr("stroke-width","5") .attr("fill","none") .attr("d",usaPathData) var italyPathData = d3.line().x(d => xScale(d.dayNumber)).y(d => yScale(d.caseCount))(italyPopData) svg.append("path") .attr("stroke","#19BDFF") .attr("stroke-width","5") .attr("fill","none") .attr("d",italyPathData) var greecePathData = d3.line().x(d => xScale(d.dayNumber)).y(d => yScale(d.caseCount))(greecePopData) svg.append("path") .attr("stroke","#FF00FF") .attr("stroke-width","5") .attr("fill","none") .attr("d",greecePathData) //legendBoxes var usaLegendBox = svg.append("rect") .attr("x",200) .attr("y",210) .attr("width",30) .attr("height",30) .attr("fill","black") .attr("stroke","white") .attr("stroke-width",2) //legendBoxes var italyLegendBox = svg.append("rect") .attr("x",200) .attr("y",290) .attr("width",30) .attr("height",30) .attr("fill","#19BDFF") .attr("stroke","white") .attr("stroke-width",2) //legendBoxes var greeceLegendBox = svg.append("rect") .attr("x",200) .attr("y",250) .attr("width",30) .attr("height",30) .attr("fill","#FF00FF") .attr("stroke","white") .attr("stroke-width",2) //legendText var usaLegendText = svg.append("text") .attr("x", 240) .attr("y", 230) .attr("font-size","12") .attr("font-weight","bold") .text("USA — 905,358 Cases (2.79 infected / 1000)") var italyLegendText = svg.append("text") .attr("x", 240) .attr("y", 310) .attr("font-size","12") .attr("font-weight","bold") .text("Italy — 192,994 Cases (3.18 infected / 1000)") var greeceLegendText = svg.append("text") .attr("x", 240) .attr("y", 270) .attr("font-size","12") .attr("font-weight","bold") .text("Greece — 2,490 Cases (0.22 infected / 1000)") //axesText var xAxisText = svg.append("text") .attr("x",850) .attr("y", 545) .attr("text-anchor","end") .attr("font-weight","bold") .attr("font-size","12") .text("Days since COVID-19 Outbreak") var yAxisText = svg.append("text") .attr("x",70) .attr("y", 105) .attr("font-weight","bold") .attr("font-size","12") .text("COVID-19 Case Count") //titleText var titleText = svg.append("text") .attr("x",450) .attr("y",50) .attr("text-anchor","middle") .attr("font-weight","bolder") .attr("font-size",50) .attr("fill","#CC9CC9") .attr("stroke","black") .text("COVID-19 Case Count over Time") //subtitleText var subtitleText = svg.append("text") .attr("x",450) .attr("y",75) .attr("text-anchor","middle") .attr("font-weight","bolder") .attr("font-size",14) .text("Cases per Thousand Capitas | Key is updated for the 26th of April, Graphics are updated daily.") return svg.node() }2d:T608,coronaData = { const files = [ 'https://storage.googleapis.com/kartoteket/covid19/data/johnshopkins/raw_confirmed.csv', 'https://storage.googleapis.com/kartoteket/covid19/data/johnshopkins/raw_deaths.csv', 'https://storage.googleapis.com/kartoteket/covid19/data/johnshopkins/raw_recovered.csv' ]; // load all data (3 different raw csv files) const input = await Promise.all(files.map(url => d3.csv(url, d3.autoType))); const outputData = []; // load data segments matching the 3 files const segments = ['confirmed', 'deaths', 'recovered']; const output = input.forEach((array, i) => { array.forEach((obj, j) => { const state = obj['Province/State'] || obj['Country/Region']; const pos = [obj.Long, obj.Lat]; const country = obj['Country/Region']; // delete unused keys delete obj['Province/State']; delete obj['Country/Region']; delete obj.Lat; delete obj.Long; // if it is the first segment, create the original object // if (state !== 'Hubei') { Object.entries(obj).forEach(([key, value]) => { const index = outputData.findIndex( d => d.date === key && d.state === state ); if (index < 0) { const o = { state, pos, country, date: key }; o[segments[i]] = value; outputData.push(o); } else { outputData[index][segments[i]] = value; } }); // } }); }); return outputData; }2e:[] 2a:{"title":"\nCOVID-19\n","cells":[{"id":0,"value":"html`\n\n

\nCOVID-19\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1301,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"md`\n## Formatting and Calculations\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"greeceDateData = {\n var data = []\n for(let i = 0; i < greeceCoronaFilter.length; i++){\n data.push({dayNumber:i,caseCount:(greeceCoronaFilter[i].confirmed)})\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"greecePopData = {\n var data = []\n for(let i = 0; i < greeceCoronaFilter.length; i++){\n data.push({dayNumber:i,caseCount:(greeceCoronaFilter[i].confirmed)/10858.018})\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"italyDateData = {\n var data = []\n for(let i = 0; i < italyCoronaFilter.length; i++){\n data.push({dayNumber:i,caseCount:italyCoronaFilter[i].confirmed})\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"italyPopData = {\n var data = []\n for(let i = 0; i < italyCoronaFilter.length; i++){\n data.push({dayNumber:i,caseCount:(italyCoronaFilter[i].confirmed)/60665.551})\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1150,"value":"usaDateData = {\n var data = []\n for(let i = 0; i < usaCoronaFilter.length; i++){\n data.push({dayNumber:i,caseCount:usaCoronaFilter[i].confirmed})\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"usaPopData = {\n var data = []\n for(let i = 0; i < usaCoronaFilter.length; i++){\n data.push({dayNumber:i,caseCount:(usaCoronaFilter[i].confirmed)/323947.000})\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"md`\n## Filters\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"greecePopulationFilter = populationData.filter(d => d.name == \"Greece\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"greeceCoronaFilter = coronaData.filter(d => d.country == \"Greece\" && d.confirmed > 0) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"italyPopulationFilter = populationData.filter(d => d.name == \"Italy\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"italyCoronaFilter = coronaData.filter(d => d.country == \"Italy\" && d.confirmed > 0) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"usaPopulationFilter = populationData.filter(d => d.name == \"United States of America\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"usaCoronaFilter = coronaData.filter(d => d.country == \"United States of America\" && d.confirmed > 0) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"md`\n## Datasets\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"populationData = d3.json(\"https://restcountries.eu/rest/v2/all\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2e","stdlib":"1","titling":"auto"}