{ // const startDate = "2021-08-31" // const startDate = "2020-01-01" const dataMob = ukUpd.filter(d=>(d.place_id=="ChIJqZHHQhE7WgIReiWIMkOg-MQ")&&(d.date>new Date(startDate))) const dataMobLondon = ukUpd.filter(d=>(d.place_id=="ChIJ4Y3fTlUDdkgR0Gbsoi2uDgQ")&&(d.date>new Date(startDate))) const dataCovid = ukCovidApi.filter(d=>d.date>new Date(startDate)) const dataCovidLondon = londonCovidApi.filter(d=>d.date>new Date(startDate)) const holidays = [{date: new Date("2020-12-01"), text:"Start of 2020 Holiday Season", covid:150000, mob:20}, {date: new Date("2021-12-01"), text:"Start of 2021 Holiday Season", covid:150000, mob:20}] const heightFig = height*2.1 const widthFig = widthWide const marginRight = 100 const plotCovid = Plot.plot({ width:widthFig, height:heightFig/2, marginRight:marginRight, y: { // grid: true, label: '', // ticks: 4, ticks:[100, 1000, 5000, 20000, 80000], domain:startDate==="2021-08-31"?[25000, 50000]:[0,d3.max(dataCovid, d=>d.newCasesBySpecimenDate)], type:"symlog" }, x : { ticks: 14, tickFormat: d3.timeFormat("%b"), domain: d3.extent(dataMob, d=>d.date) // ticks:0 }, marks: [ // Plot.barY(dataCovid, { x: 'date', y: 'newCasesBySpecimenDate', fill: '#E02685', opacity:0.2}), // Plot.rectY(dataCovid, Plot.binX({y: "count"}, {x: "date"})), Plot.line(dataCovid, Plot.windowY({ x: 'date', y: 'newCasesBySpecimenDate', basis: 'mean', k: 7, stroke: "#E02685", strokeWidth: 2, opacity: 0.2 })), Plot.line(dataCovidLondon, Plot.windowY({ x: 'date', y: 'newCasesBySpecimenDate', basis: 'mean', k: 7, stroke: "#E02685", strokeWidth: 2 })), Plot.text(dataCovidLondon, Plot.selectFirst({ x: "date", y: 'newCasesBySpecimenDate', fill: "#E02685", fontWeight: 700, text: "areaName", fontSize: 11, textAnchor: "start", dx: 3, dy: -15 })), Plot.text(dataCovid, Plot.selectFirst({ x: "date", y: 'newCasesBySpecimenDate', fill: "#E02685", opacity:0.4, fontWeight: 700, fontSize: 11, text: "areaName", textAnchor: "start", dx: 3, })), Plot.text(holidays, { x: "date", y: "covid", fill: "#E02685", fontWeight: 700, fontSize: 11, text: "text", textAnchor: "end", dx: 3 }), Plot.ruleX([new Date("2020-12-01")], { strokeDasharray: [5, 3], strokeWidth: 1, stroke: "#E02685", opacity:0.4, }), Plot.ruleX([new Date("2021-12-01")], { strokeDasharray: [5, 3], strokeWidth: 1, stroke: "#E02685", opacity:0.4, }), // Plot.areaY(dataCovid, {...Plot.windowY({ // x: 'date', // y: 'newCasesBySpecimenDate', // basis: 'mean', // k: 7, // // stroke: 'black' // }), ...{ fill: 'rgba(0,0,0,0.3)' }}), // Plot.text(franceCovid, Plot.selectMaxY({x: 'date', y: 'incid_dchosp', text: _ => 'new deaths' })), ], // caption: 'New reported deaths at hospital by day' }) const plotMob = Plot.plot({ width:widthFig, height:heightFig/2, marginRight:marginRight, x : { ticks: 14, tickFormat: d3.timeFormat("%b"), domain: d3.extent(dataMob, d=>d.date) }, y:{ // domain:[-15, 1], domain:startDate==="2021-08-31"?[-15, 1]:d3.extent(dataMobLondon, d=>d[mobilityVar]), // type: "log", // grid: true, label: "", // tickFormat: "%"//(f => f/ 100)(d3.format("%")) }, marks: [ // Plot.line(dataMob, {x: "date", y: "retail_and_recreation_percent_change_from_baseline"}) Plot.line(dataMob, Plot.windowY({ x: "date", y: mobilityVar, k: 7, curve: "basis", stroke: "lightgrey", strokeWidth: 2 })), Plot.line(dataMobLondon, Plot.windowY({ x: "date", y: mobilityVar, k: 7, curve: "basis", stroke: "black", strokeWidth: 2 })), Plot.ruleY([0], { stroke:"grey", strokeDasharray: [5, 3], strokeWidth: 1, stroke: "lightgrey"}), Plot.text(dataMobLondon, Plot.selectLast({ x: "date", y: mobilityVar, fill: "black", fontWeight: 700, fontSize: 11, text: d=>d["sub_region_2"].replace("City of", ""), textAnchor: "start", dx: 3 })), Plot.text(dataMob, Plot.selectLast({ x: "date", y: mobilityVar, fill: "lightGrey", fontWeight: 700, fontSize: 11, text: "country_region", textAnchor: "start", dx: 3 })), Plot.ruleX([new Date("2020-12-01")], { strokeDasharray: [5, 3], strokeWidth: 1, stroke: "#E02685", opacity:0.4, }), Plot.ruleX([new Date("2021-12-01")], { strokeDasharray: [5, 3], strokeWidth: 1, stroke: "#E02685", opacity:0.4, }), ] }) const subTitle = "Evolution of power regression parameters (for the power relationship between tweets/day and protests/day) with population density" const title = "Change in mobility to retail spaces during the COVID-19 Pandemic in London and the United Kingdom" const plots = html`

Daily number of COVID-19 cases

% Change in mobility to retail spaces compared to baseline

`; //

${title}

// ; //

${[plotCovid, plotMob]}

// d3.select(plots).selectAll("svg").append("svg").append("rect").attr("x", "408").attr("y", "12").attr("width", "38").attr("height", heightFig/2-42).attr("stroke", "lightgrey").attr("stroke-width", 0.8).attr("fill", "lightgrey").attr("fill-opacity", 0.05).style("position", "relative").style("z-index", "200") // d3.select(plots).selectAll("svg").append("svg").append("rect").attr("x", "850").attr("y", "12").attr("width", "38").attr("height", heightFig/2-42).attr("stroke", "lightgrey").attr("stroke-width", 0.8).attr("fill", "lightgrey").attr("fill-opacity", 0.05).style("position", "relative").style("z-index", "200") return plots //

${title}

${subTitle}

// return html`

${plot}

` }