2b:null 2c:["$","title",null,{"children":"London in the Pandemic Era: Consequences and Implications of COVID-19 on Mobility | leonardo Nicoletti | Observable"}] 31:T198d,chart0 = { const grid = d3.select(DOM.svg(widthWide, height*2.1)) // Add annotations to chart const annot = grid .selectAll("line") .data(policies) const policyLines = annot.join('line') .attr('x1',d=> xScaleWide(new Date(d.date))) .attr('x2',d=> xScaleWide(new Date(d.date))) .attr('y1',35) .attr('y2',height*2-20) .attr('stroke','#E02685') // .attr('stroke','red') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const policyText = annot.join("text") .attr('x',d=> xScaleWide(new Date(d.date))) .attr('y',d=>d.y) .attr("class", "policyAnnotation") .text(d=> d.date + " - " + d.id) .attr("text-anchor", d=> d.text_anchor) .attr("fill", d=> d.font_color) .attr("font-weight", d=> d.font_weight) .call(wrap, 10) // .on("mouseover", d => d3.select(this).attr("font-weight", "bold")) // .attr("href", d=> d.url) // .attr("link", d=> d.url) // .on("click", d=>window.open(d.url)); const source = grid.append("text") .text("Data from Google, Greater London Authority and The Health Foundation.") .attr('x',margin.right) .attr('y', d=>height*2.08) .attr("class", "sourceMeta") // plots const svg2 = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr("width", width*2) // .attr('transform', `translate(${width}, ${height})`) const svg = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") // .attr("width", width*2) .attr('transform', `translate(${0}, ${height})`) // svg1 svg .append("g") .attr("class", "AxisWide") .call(xAxisWide); svg .append("g") // .attr("class", "y-axis") .call(yAxis) .attr("class", "AxisWide") .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line = svg .append("path") .datum(mobilityCities.filter(d=>d.city==="Greater London")) .attr("class", "line") .attr("d", d => lineGeneratorAggMob(d)) .attr('stroke', 'black') .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round"); // const line = svg // .selectAll('.line') // .data(cityMob.filter(d=>d.code === "Greater London")) // line // .join('path') // .attr("class", "line") // .attr('d',d=>lineGeneratorReWide(d.mobility.filter(lineGeneratorReWide.defined()))) // .style("opacity", 1) // .style("stroke", "#E5B541") // .style("fill", "none") // .style("stroke-width", 2) // .style("stroke-linecap", "round") // .style("mix-blend-mode", "multiply"); // line // .join('path') // .attr("class", "line") // .attr('d',d=>lineGeneratorWwide(d.mobility.filter(lineGeneratorWwide.defined()))) // .style("opacity", 1) // .style("stroke", "#695B78") // .style("fill", "none") // .style("stroke-width", 2) // .style("stroke-linecap", "round") // .style("mix-blend-mode", "multiply"); // line // .join('path') // .attr("class", "line") // .attr('d',d=>lineGeneratorTwide(d.mobility.filter(lineGeneratorTwide.defined()))) // .style("opacity", 1) // .style("stroke", "#70C8F2") // .style("fill", "none") // .style("stroke-width", 2) // .style("stroke-linecap", "round") // .style("mix-blend-mode", "multiply"); // annotations for categories // svg.append('text') // .attr('x',xScaleWide(new Date(2020,7,1))) // .attr('y',yScale(25)) // .text('People Staying Home') // .attr('font-weight', "bold") // .attr('class', 'cityAnnot') // .style('fill', "#E5B541") // svg.append('text') // .attr('x',xScaleWide(new Date(2020,1,20))) // .attr('y',yScale(-94)) // .text('People Going to Workplaces') // .attr('font-weight', "bold") // .attr('class', 'cityAnnot') // .style('fill', "#695B78") // svg.append('text') // .attr('x',xScaleWide(new Date(2020,7,1))) // .attr('y',yScale(-35)) // .text('People Taking Public Transportation') // .attr('font-weight', "bold") // .attr('class', 'cityAnnot') // .style('fill', "#70C8F2") // svg2 svg2 .append("g") .attr("class", "x-axis") .call(xAxisWide); svg2 .append("g") .attr("class", "y-axis") .call(yAxisCovid) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("Daily Covid Cases in the Greater London Area") .attr("class", "yAxisAnnot") ); svg2.append("g") .attr("fill", "#E02685") // .attr("fill", "red") .attr("opacity", 0.17) .selectAll("rect") .data(bins) .join("rect") .attr("x", d => xScaleWide(d.x0) + 1) .attr("width", d => Math.max(0, xScaleWide(d.x1) - xScaleWide(d.x0) - 1)) .attr("y", d => yScaleCovid(d[0].new_cases)) .attr("height", d => yScaleCovid(0) - yScaleCovid(d[0].new_cases)); const line2 = svg2 .append("path") .datum(covidData.filter(d=>new Date(d.date) < dateExtent[1])) .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) // .attr('d',d=>lineGeneratorT(d.mobility.filter(lineGenerator.defined()))) .attr('stroke','#E02685') // .attr('stroke','red') // .style("opacity", d=>d.code === "E09000001" ? 1:0.5) .style("fill", "none") .attr("d", d=>lineGeneratorCovid(d)) .style("stroke-width", 2) .style("stroke-linecap", "round") // .style("mix-blend-mode", "multiply"); svg2.append("path") .datum(covidData.filter(d=>new Date(d.date) < dateExtent[1])) .attr("class", "area") .attr("d", area) .style("fill", "red") // .attr('fill','#E02685') .attr("opacity", 0.2) return grid.node(); }32:T8cb,html`

The figure above outlines daily COVID-19 cases in the GLA, resulting policy implications in response to surging infections, and overall trends in aggregated mobility for all of the GLA from March 2020 through November 2020. Early on, it can be observed that key policies were implemented in anticipation of an increase in positive COVID-19 cases. As COVID-19 infections increased, more policy, aimed at reducing the spread of the virus by limiting citizen movement, emerged. As a result of COVID-19 policy and rising COVID-19 infections, aggregated mobility (i.e citizen movement for 1) Retail and Recreation; 2) Essential Services; 3) Work Habits; and 4) Public Transportation) began to fall below that of baseline activity. Notably in April 2020, as COVID-19 infections peaked to a local maximum of about 1,250 daily cases in the GLA, aggregated mobility hit a global minimum with the percent change in overall mobility about 65% below baseline activity. Following the April 2020 peak in COVID-19 infections, as daily COVID-19 infection cases decreased, aggregated mobility also increased steadily, whilst still remaining below that of baseline activity. In June 2020 when there were about 100 COVID-19 cases per day in the GLA, UK government policy was introduced to lift lockdown measures. At the time of introducing this policy, aggregated mobility for the GLA was about 55% below that of baseline activity. Throughout June 2020, July 2020, and August 2020, COVID-19 daily infections remained below 500 cases per day in the GLA, and aggregated mobility rose to about 35% below baseline activity. In September of 2020, after months of diminished COVID-19 infections, daily cases began to surge once again. However, with about 500 daily COVID-19 cases for the GLA in September 2020, overall mobility within the GLA remained relatively unchanged, as aggregated mobility was just about 30% below that of baseline activity. As daily COVID-19 cases began to drastically increase throughout October 2020, November 2020 led to a global maximum of 2,750 daily recorded infections. Following this surgence in COVID-19 cases, a second lockdown was introduced by the UK government in hopes of curbing infections. `33:T54c,chart1 = { const width = 600; const height = 600; const svg = d3.select(DOM.svg(width, height)).attr("transform", `translate(120,0)`); // const colorScale = d3.scaleQuantile() // .domain(colorDomain) // pass the whole dataset to a scaleQuantile’s domain // .range(d3.schemeReds[9]) const colorScale = d3.scaleSequential(d3.interpolateLab("white", "#9D1A5F")) .domain(colorDomain) // pass the whole dataset to a scaleQuantile’s domain // const colorScale = d3.scaleSequential(colorDomain, d3.interpolatePuRd) // const colorScale = d3.scaleSequentialQuantile() // .domain(colorDomain) // .range(["white", "pink", "red"]) const LS = atf.londonSquared() .data(covidBoroughs, d=>d.area_code) .width(width) .height(height); svg.call(LS); LS.background() .attr('fill',d=>colorScale(d.data['total_cases'])) // make the fill a random colour LS.foreground() .append('text') .attr('class', 'LStext') // .attr('fill',d=>Number(d.data.total_cases) > 5200 ? '#fff':'#000') .attr('fill',d=> d.LSAbbreviation=== "cty" ?'#000':'#fff') .attr('dy',15) .attr('dx',3) .text(d => d.LSAbbreviation); // .style("font-size", 8) // .text(d => d.data['area_name']); return svg.node(); //to add the chart to the page the block should return its node }34:T54a,html`

The figure above outlines the total number of COVID-19 cases per each London borough. Lighter shades of red indicate boroughs with the least total number of COVID-19 cases amongst residents, and darker shades of red indicate boroughs with the most total number of COVID-19 cases amongst residents. Notably, London’s central business district (CBD), home to very few residents, has less than 800 total confirmed COVID-19 cases. Below, the following figure outlines the median aggregated mobility drop from baseline activity (as a percentage) per borough for March 2020 through November 2020. Darker shades of black indicate a smaller median drop in aggregated mobility when compared to the baseline. Brighter shades of red indicate larger median drops in aggregated mobility. Thus, the brighter the shade of red, the greater the drop of aggregated mobility for a borough. As observed in the figure below, the London CBD has had the greatest drop (greater than 70%) in median aggregated mobility in comparison to baseline activity. Boroughs surrounding the London CBD, such as Westminster, Camden, and to a lesser extent Islington, Tower Hamlets, Southwark, Lambeth, Kensington & Chelsea, and Hammersmith & Fulham have also experienced greater drops in median aggregated mobility in comparison to baseline activity. `35:T9db,chart2 = { mobilityExtent; boroughMob; const width = 600; const height = 600; // colorscale for blocks // const colorScale = d3.scaleQuantile() // .domain(colorDomainMob) // pass the whole dataset to a scaleQuantile’s domain // .range(d3.schemeGreys[9].reverse()) // const colorScale = d3.scaleSequential(d3.interpolateLab("#19C1DF", "#F52D4F")) // .domain(colorDomainMob.reverse()); // const colorScale = d3.scaleSequential(d3.interpolateLab("black", "red")) // .domain(colorDomainMob.reverse()); const colorScale = d3.scaleSequential(d3.interpolateLab("black", "#E02685")) // const colorScale = d3.scaleSequential(d3.interpolateLab("black", "red")) .domain(colorDomainMob); // process the data into a set of timeseries arrays // (and as a side effect calculate the domain extent of the population) const svg = d3.select(DOM.svg(width, height)).attr("transform", `translate(120,0)`); const LS = atf.londonSquared() .data(boroughMob) .width(width) .height(height); svg.call(LS); const valueScale = d3.scaleLinear() .domain(mobilityExtent) .range([LS.blockSize(), 0]); const timeScale = d3.scaleTime() .domain(dateExtent) .range([0, LS.blockSize()]); const line = d3.line() .defined(function(d) { return !(d.value===0); }) .x((d)=>timeScale(d.date)) .y((d)=>valueScale(d.value)) .curve(d3.curveBasis); LS.background() .attr('fill',d=>colorScale(d.data['median'])) // .attr('fill','rgb(50,50,50)'); // LS.masked() // .call(function(parent){ // parent.append('line') // .attr('x1',0) // .attr('x2',LS.blockSize()) // .attr('y1',valueScale(0)) // .attr('y2',valueScale(0)) // .attr('stroke','rgb(255,255,255)') // .attr('stroke-width', '0.5') // .style("stroke-dasharray", ("2, 2")) // .style("opacity", 0.5); // }); LS.masked() .call(function(parent){ parent.append('path') .attr('d',d=>line(d.data.mobility.filter(line.defined()))) // .datum(mobilityExtent.filter(line.defined())) .attr('fill', 'none') .attr("stroke", "rgb(255,255,255)") .attr('stroke-width', '1'); }); LS.foreground() .append('text') .attr('class', 'LStext') .attr('fill', 'rgb(255,255,255)') .attr('dy', 20) .attr('dx', 25) .text(d => d.LSAbbreviation); return svg.node(); //to add the chart to the page the block should return its node }36:T615,html`

While aggregated, mobility in this analysis represents overall movement of citizens for 1) Retail and Recreation; 2) Essential Services; 3) Work Habits; and 4) Public Transportation). In disaggregating mobility, major shifts in urban lifestyles can be identified. With regard to Work Habits mobility, lifestyle shifts from work-in-office to work-from-home behaviour can be observed for all of the GLA. In the figure below, the percent change in mobility compared to baseline activity for “people staying home” and “people going to workplaces” is illustrated. The figure indicates that in March 2020, both activities were in line with baseline mobility. However, as COVID-19 cases surged and government policy was implemented to combat infections, the change in mobility for “people staying home” increased to about 35% above the baseline and the change in mobility for “people going to workplaces” decreased to about 75% below the baseline in the beginning of April 2020. Throughout the months of April, May, June, July, August, September, and October, mobility pertaining to “people staying home” slightly decreased whilst still remaining above baseline activity. During this same timeframe, mobility regarding “people going to workplaces” slightly increased whilst still remaining below baseline activity. Now, in November 2020, mobility for “people staying home” is about 15% above baseline activity, and mobility for “people going to workplaces” is about 45% below baseline activity. `37:T1431,chart3 = { const grid = d3.select(DOM.svg(widthWide, height*2)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) const svg2 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${0}, ${height})`) // Annotations svg2.append('text') .attr('x',xScaleWide(new Date(2020,2,15))) .attr('y',yScale(-90)) .text('People Going for Retail and Recreation') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', "#E02685") svg.append('text') .attr('x',xScaleWide(new Date(2020,7,1))) .attr('y',yScale(25)) .text('People Staying Home') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', "#E5B541") svg2.append('text') .attr('x',xScaleWide(new Date(2020,3,5))) .attr('y',yScale(-7)) .text('People Going to Supermarkets and Pharmacies') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', "#096E76") svg.append('text') .attr('x',xScaleWide(new Date(2020,1,20))) .attr('y',yScale(-94)) .text('People Going to Workplaces') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', "#695B78") svg.append('text') .attr('x',xScaleWide(new Date(2020,7,1))) .attr('y',yScale(-35)) .text('People Taking Public Transportation') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', "#70C8F2") // svg1 svg .append("g") // .attr("class", "x-axis") .attr('class', 'AxisWide') .call(xAxisWide); svg .append("g") // .attr("class", "y-axis") .attr('class', 'AxisWide') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line = svg .selectAll('.line') .data(cityMob.filter(d=>d.code === "Greater London")) line .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorReWide(d.mobility.filter(lineGeneratorReWide.defined()))) .style("opacity", 1) .style("stroke", "#E5B541") .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); line .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorWwide(d.mobility.filter(lineGeneratorWwide.defined()))) .style("opacity", 1) .style("stroke", "#695B78") .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg2 svg2 .append("g") // .attr("class", "x-axis") .attr('class', 'AxisWide') .call(xAxisWide); svg2 .append("g") // .attr("class", "y-axis") .attr('class', 'AxisWide') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg2.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line2 = svg2 .selectAll('.line') .data(cityMob.filter(d=>d.code === "Greater London")) line2 .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorRwide(d.mobility.filter(lineGeneratorRwide.defined()))) .style("opacity", 1) .style("stroke", "#E02685") .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); line2 .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorGwide(d.mobility.filter(lineGeneratorGwide.defined()))) .style("opacity", 1) .style("stroke", "#096E76") .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); line .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorTwide(d.mobility.filter(lineGeneratorTwide.defined()))) .style("opacity", 1) .style("stroke", "#70C8F2") .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); return grid.node(); }38:T65c,html`

As observed above, changes in mobility can also be observed for essential services, retail and recreation, and public transportation in the GLA, thus prompting changes in citizen lifestyles. In March 2020, just prior to surging COVID-19 infections and movement-restrictive government policy, mobility for essential services, such as grocery shopping, spiked about 35% above baseline activity before plummeting far below baseline activity levels. Simultaneously, mobility pertaining to leisurely activities and public transportation experienced significant drops below baseline measurements. In April 2020, mobility pertaining to essential services was about 35% below baseline activity, mobility pertaining to leisurely activities was about 80% below baseline activity, and mobility pertaining to public transportation was about 75% below baseline activity. While throughout the months of May, June, July, August, September, and October, all of these mobility categories have been below baseline activity for all of the GLA, mobility for public transportation has experienced the most consistent drops in activity when compared to the baseline. Across these months, on average, mobility for public transportation was about 57% below baseline activity. Mobility for leisurely activities was, on average, about 55% below baseline activity, and mobility for essential services was, on average, about 23% below baseline activity. In November 2020, mobility for public transportation, leisurely activities, and essential services has been about 40%, 15%, and 10% below baseline activity accordingly.`39:T7b9,chart5 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg .append("g") .attr("class", "AxisBig") .call(xAxis); svg .append("g") .attr("class", "AxisBig") .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); svg.append('text') .attr('x',xScale(new Date(2020,2,1))) .attr('y',yScale(-97)) .text('City of London') .attr('class', 'annotation') .style('fill', '#E02685') // .style('fill', 'red') .attr('font-weight', 'bold') svg.append('text') .attr('x',xScale(new Date(2020,7,1))) .attr('y',yScale(-15)) .text('Rest of GLA Boroughs') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', 'grey') const line = svg .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGenerator(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? '#E02685':'lightgrey') // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 1:0.5) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 1.5:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); return svg.node(); }3a:T1a2d,chart6 = { const grid = d3.select(DOM.svg(width*2, height*2)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) const svg2 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${0}, ${height})`) const svg3 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width}, ${0})`) const svg4 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width}, ${height})`) // svg1 svg .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Workplaces Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); // svg.append('text') // .attr('x',xScale(new Date(2020,2,1))) // .attr('y',yScale(-97)) // .text('City of London (CBD)') // .attr('font-weight', "bold") // .attr('class', 'annotation') // .style('fill', 'red') svg.append('text') .attr('x',xScale(new Date(2020,7,1))) .attr('y',yScale(-30)) .text('32 GLA Boroughs') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', 'grey') const line = svg .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorW(d.mobility)) .attr('d',d=>lineGeneratorW(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? 'lightgrey':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 0.7:0.7) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 0.7:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg2 svg2 .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg2 .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Transit Stations Compared to Baseline") .attr("class", "yAxisAnnot") ); svg2.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line2 = svg2 .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorT(d.mobility)) .attr('d',d=>lineGeneratorT(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? 'lightgrey':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 0.7:0.7) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 0.7:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg3 svg3 .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg3 .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Retail and Recreation Compared to Baseline") .attr("class", "yAxisAnnot") ); svg3.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line3 = svg3 .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorR(d.mobility)) .attr('d',d=>lineGeneratorR(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? 'lightgrey':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 0.7:0.7) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 0.7:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg4 svg4 .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg4 .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Grocery and Pharmacies Compared to Baseline") .attr("class", "yAxisAnnot") ); svg4.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line4 = svg4 .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorG(d.mobility)) .attr('d',d=>lineGeneratorG(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? 'lightgrey':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 0.7:0.7) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 0.7:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // return grid.node(); }3b:T1b48,chart7 = { const grid = d3.select(DOM.svg(width*2, height*2)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) const svg2 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${0}, ${height})`) const svg3 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width}, ${0})`) const svg4 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width}, ${height})`) // svg1 svg .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Workplaces Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); svg.append('text') .attr('x',xScale(new Date(2020,2,1))) .attr('y',yScale(-90)) .text('City of London') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', '#E02685') // .style('fill', 'red') svg.append('text') .attr('x',xScale(new Date(2020,7,1))) .attr('y',yScale(-30)) .text('Rest of GLA Boroughs') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', 'grey') const line = svg .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorW(d.mobility)) .attr('d',d=>lineGeneratorW(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? '#E02685':'lightgrey') // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 1:0.5) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 1.5:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg2 svg2 .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg2 .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Transit Stations Compared to Baseline") .attr("class", "yAxisAnnot") ); svg2.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line2 = svg2 .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorT(d.mobility)) .attr('d',d=>lineGeneratorT(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? '#E02685':'lightgrey') // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 1:0.5) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 1.5:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg3 svg3 .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg3 .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Retail and Recreation Compared to Baseline") .attr("class", "yAxisAnnot") ); svg3.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line3 = svg3 .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorR(d.mobility)) .attr('d',d=>lineGeneratorR(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? '#E02685':'lightgrey') // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 1:0.5) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 1.5:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg4 svg4 .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg4 .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Grocery and Pharmacies Compared to Baseline") .attr("class", "yAxisAnnot") ); svg4.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line4 = svg4 .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorG(d.mobility)) .attr('d',d=>lineGeneratorG(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? '#E02685':'lightgrey') // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 1:0.5) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 1.5:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); return grid.node(); }3c:T601,html`

Mobility in cities across the world has similarly been impacted by COVID-19. Comparisons between London and other economic hubs in North America, Asia, and Oceania can be made.

The figure below presents the change in overall aggregated mobility compared to baseline activity for London and North American economic hubs of Paris and New York City. While all of these cities have experienced below baseline aggregated mobility in the last months, New York City has consistently performed better than both London and Paris. Also illustrated within this figure is London’s aggregated mobility in comparison to Asian economic hubs of Seoul and Hong Kong. While Seoul and Hong Kong have experienced slight drops in overall aggregated mobility, it is apparent that London has experienced significantly greater drops in mobility when compared to its baseline. Finally, London’s aggregated mobility has also been compared to that of Oceanic cities, Auckland and Sydney. While Auckland has demonstrated greater resilience in mobility patterns, Sydney’s reduction in mobility is on par with London.

Interestingly, all North American economic hubs and Sydney appear to experience significantly greater drops in aggregated mobility when compared to their baselines. Auckland seems to display somewhat small drops in aggregated mobility when compared to its baseline. Finally, Asian economic hubs appear to experience the smallest drops in aggregated mobility when compared to their baselines. `3d:T1ed6,chart8 = { const grid = d3.select(DOM.svg(widthWide, height*3)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) const svg2 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${0}, ${height})`) const svg3 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${0}, ${height*2})`) // Annotations svg.append('text') .attr('x',xScaleWide(new Date(2020,5,15))) .attr('y',yScale(-60)) .text('London') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', "#E02685") svg2.append('text') .attr('x',xScaleWide(new Date(2020,2,15))) .attr('y',yScale(-77)) .text('London') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', "#E02685") svg.append('text') .attr('x',xScaleWide(new Date(2020,7,1))) .attr('y',yScale(-17)) .text('New York City') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', cityColors("New York City")) .style("opacity", "0.7") svg.append('text') .attr('x',xScaleWide(new Date(2020,3,1))) .attr('y',yScale(-35)) .text('Los Angeles') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', cityColors("Los Angeles")) .style("opacity", "0.7") svg2.append('text') .attr('x',xScaleWide(new Date(2020,4,1))) .attr('y',yScale(-35)) .text('Hong Kong') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', cityColors("Hong Kong")) .style("opacity", "0.7") svg.append('text') .attr('x',xScaleWide(new Date(2020,2,3))) .attr('y',yScale(-80)) .text('Paris') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', cityColors("Paris")) .style("opacity", "0.7") svg2.append('text') .attr('x',xScaleWide(new Date(2020,7,1))) .attr('y',yScale(5)) .text('Seoul') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', cityColors("Seoul")) svg3.append('text') .attr('x',xScaleWide(new Date(2020,11,25))) .attr('y',yScale(3)) .text('Auckland') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', cityColors("Auckland")) svg3.append('text') .attr('x',xScaleWide(new Date(2020,6,15))) .attr('y',yScale(-60)) .text('Sydney') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', cityColors("Sydney")) svg3.append('text') .attr('x',xScaleWide(new Date(2020,2,5))) .attr('y',yScale(-70)) .text('London') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', "#E02685") // svg1 svg .append("g") // .attr("class", "x-axis") .attr('class', 'AxisWide') .call(xAxisWide); svg .append("g") // .attr("class", "y-axis") .attr('class', 'AxisWide') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line = svg .selectAll('.line') .data(cityMob.filter(d=>d.code === "Greater London" | d.code === "New York City" | d.code === "Los Angeles" |d.code === "Paris")) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGeneratorCities(d.mobility.filter(lineGeneratorCities.defined()))) // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>(d.code === "Greater London") ? 1:0.5) // .style("stroke", "black") .style("stroke", d=>d.code === "Greater London" ? "#E02685":cityColors(d.code)) .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg2 svg2 .append("g") // .attr("class", "x-axis") .attr('class', 'AxisWide') .call(xAxisWide); svg2 .append("g") // .attr("class", "y-axis") .attr('class', 'AxisWide') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg2.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line2 = svg2 .selectAll('.line') .data(cityMob.filter(d=>d.code === "Greater London" | d.code === "Seoul" | d.code === "Hong Kong")) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGeneratorCities(d.mobility.filter(lineGeneratorCities.defined()))) // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>(d.code === "Greater London")|(d.code === "Seoul") ? 1:0.5) // .style("stroke", "black") .style("stroke", d=>d.code === "Greater London" ? "#E02685":cityColors(d.code)) .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg3 svg3 .append("g") // .attr("class", "x-axis") .attr('class', 'AxisWide') .call(xAxisWide); svg3 .append("g") // .attr("class", "y-axis") .attr('class', 'AxisWide') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg3.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line3 = svg3 .selectAll('.line') .data(cityMob.filter(d=>d.code === "Greater London" | d.code === "Auckland" | d.code === "Sydney")) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGeneratorCities(d.mobility.filter(lineGeneratorCities.defined()))) // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>(d.code === "Greater London")|(d.code === "Auckland") ? 1:0.5) // .style("stroke", "black") .style("stroke", d=>d.code === "Greater London" ? "#E02685":cityColors(d.code)) .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); return grid.node(); }3e:Tdb7,chart9 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); // .attr('transform', `translate(${width}, ${height})`) const annot = svg .selectAll("line") .data(nationalPolicies) const policyLines = annot.join('line') .attr('x1',d=> xScale(new Date(d.date))) .attr('x2',d=> xScale(new Date(d.date))) .attr('y1',35) .attr('y2',height-20) // .attr('stroke','#E02685') .attr('stroke','red') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const policyText = annot.join("text") .attr('x',d=> xScale(new Date(d.date))) .attr('y',d=>d.y) .attr("class", "annotation") .text(d=> d.date + " - " + d.id) .attr("text-anchor", d=> d.text_anchor) .attr("fill", d=> d.font_color) .attr("font-weight", d=> d.font_weight) .call(wrap, 10) // Annotations svg.append('text') .attr('x',xScale(new Date(2020,2,5))) .attr('y',yScale(-70)) .text('London') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', "#C70039") svg.append('text') .attr('x',xScale(new Date(2020,9,5))) .attr('y',yScale(-60)) .text('Cardiff') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', cityColors("Cardiff")) svg.append('text') .attr('x',xScale(new Date(2020,10,20))) .attr('y',yScale(-53)) .text('Glasgow') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', cityColors("Glasgow")) svg.append('text') .attr('x',xScale(new Date(2020,6,8))) .attr('y',yScale(-30)) .text('Birmingham') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', cityColors("Birmingham")) // svg1 svg .append("g") .attr("class", "AxisBig") .call(xAxis); svg .append("g") .attr("class", "AxisBig") .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line = svg .selectAll('.line') .data(cityMob.filter(d=>d.code === "Greater London" | d.code === "Cardiff" | d.code === "Birmingham"| d.code === "Glasgow")) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGenerator(d.mobility.filter(lineGenerator.defined()))) // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>d.code === "Greater London" ? 1:0.5) // .style("stroke", "black") .style("stroke", d=>d.code === "Greater London" ? "#C70039":cityColors(d.code)) .style("fill", "none") .style("stroke-width", 1) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); return svg.node(); }3f:T1074,chart10 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); // .attr('transform', `translate(${width}, ${height})`) // Annotations // svg.append('text') // .attr('x',xScale(new Date(2020,2,15))) // .attr('y',yScale(-90)) // .text('People Going for Retail and Recreation') // .attr('font-weight', "bold") // .attr('class', 'annotation') // .style('fill', "#E02685") svg.append('text') .attr('x',xScale(new Date(2020,7,1))) .attr('y',yScale(25)) .text('People Staying Home') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', "#E5B541") // svg.append('text') // .attr('x',xScale(new Date(2020,3,5))) // .attr('y',yScale(-7)) // .text('People Going to Supermarkets and Pharmacies') // .attr('font-weight', "bold") // .attr('class', 'annotation') // .style('fill', "#096E76") svg.append('text') .attr('x',xScale(new Date(2020,1,20))) .attr('y',yScale(-94)) .text('People Going to Workplaces') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', "#695B78") svg.append('text') .attr('x',xScale(new Date(2020,7,1))) .attr('y',yScale(-35)) .text('People Taking Public Transportation') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', "#70C8F2") // svg1 svg .append("g") .attr("class", "AxisBig") .call(xAxis); svg .append("g") .attr("class", "AxisBig") .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); // const line = svg // .selectAll('.line') // .data(cityMob.filter(d=>d.code === "Greater London" | d.code === "Cardiff" | // d.code === "Birmingham"| d.code === "Glasgow")) // .join('path') // .attr("class", "line") // // .attr("d", d => lineGenerator(d[1])) // // .attr("d", d => lineGenerator(d.mobility)) // .attr('d',d=>lineGenerator(d.mobility.filter(lineGenerator.defined()))) // // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') // .style("opacity", d=>d.code === "Greater London" ? 1:0.5) // // .style("stroke", "black") // .style("stroke", d=>d.code === "Greater London" ? "#C70039":cityColors(d.code)) // .style("fill", "none") // .style("stroke-width", 1) // .style("stroke-linecap", "round") // .style("mix-blend-mode", "multiply"); const line = svg .selectAll('.line') .data(cityMob.filter(d=>d.code === "Greater London")) line .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorRe(d.mobility.filter(lineGeneratorReWide.defined()))) .style("opacity", 1) .style("stroke", "#E5B541") .style("fill", "none") .style("stroke-width", 1) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); line .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorW(d.mobility.filter(lineGeneratorWwide.defined()))) .style("opacity", 1) .style("stroke", "#695B78") .style("fill", "none") .style("stroke-width", 1) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); line .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorT(d.mobility.filter(lineGeneratorTwide.defined()))) .style("opacity", 1) .style("stroke", "#70C8F2") .style("fill", "none") .style("stroke-width", 1) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // return svg.node(); }40:Tf3d,chart11 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); // .attr('transform', `translate(${width}, ${height})`) // Annotations svg.append('text') .attr('x',xScale(new Date(2020,2,15))) .attr('y',yScale(-90)) .text('People Going for Retail and Recreation') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', "#E02685") // svg.append('text') // .attr('x',xScale(new Date(2020,7,1))) // .attr('y',yScale(25)) // .text('People Staying Home') // .attr('font-weight', "bold") // .attr('class', 'annotation') // .style('fill', "#E5B541") svg.append('text') .attr('x',xScale(new Date(2020,3,5))) .attr('y',yScale(-7)) .text('People Going to Supermarkets and Pharmacies') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', "#096E76") // svg.append('text') // .attr('x',xScale(new Date(2020,1,20))) // .attr('y',yScale(-94)) // .text('People Going to Workplaces') // .attr('font-weight', "bold") // .attr('class', 'annotation') // .style('fill', "#695B78") // svg.append('text') // .attr('x',xScale(new Date(2020,7,1))) // .attr('y',yScale(-35)) // .text('People Taking Public Transportation') // .attr('font-weight', "bold") // .attr('class', 'annotation') // .style('fill', "#70C8F2") // svg1 svg .append("g") .attr("class", "AxisBig") .call(xAxis); svg .append("g") .attr("class", "AxisBig") .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); // const line = svg // .selectAll('.line') // .data(cityMob.filter(d=>d.code === "Greater London" | d.code === "Cardiff" | // d.code === "Birmingham"| d.code === "Glasgow")) // .join('path') // .attr("class", "line") // // .attr("d", d => lineGenerator(d[1])) // // .attr("d", d => lineGenerator(d.mobility)) // .attr('d',d=>lineGenerator(d.mobility.filter(lineGenerator.defined()))) // // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') // .style("opacity", d=>d.code === "Greater London" ? 1:0.5) // // .style("stroke", "black") // .style("stroke", d=>d.code === "Greater London" ? "#C70039":cityColors(d.code)) // .style("fill", "none") // .style("stroke-width", 1) // .style("stroke-linecap", "round") // .style("mix-blend-mode", "multiply"); const line = svg .selectAll('.line') .data(cityMob.filter(d=>d.code === "Greater London")) line .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorR(d.mobility.filter(lineGeneratorReWide.defined()))) .style("opacity", 1) .style("stroke", "#E02685") .style("fill", "none") .style("stroke-width", 1) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); line .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorG(d.mobility.filter(lineGeneratorGwide.defined()))) .style("opacity", 1) .style("stroke", "#096E76") .style("fill", "none") .style("stroke-width", 1) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // return svg.node(); }41:T1056,chart20 = { const grid = d3.select(DOM.svg(widthWide, height*2.1)) // Add annotations to chart const annot = grid .selectAll("line") .data(policies) const policyLines = annot.join('line') .attr('x1',d=> xScaleWide(new Date(d.date))) .attr('x2',d=> xScaleWide(new Date(d.date))) .attr('y1',35) .attr('y2',height*2-20) .attr('stroke','#E02685') // .attr('stroke','red') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const policyText = annot.join("text") .attr('x',d=> xScaleWide(new Date(d.date))) .attr('y',d=>d.y) .attr("class", "policyAnnotation") .text(d=> d.date + " - " + d.id) .attr("text-anchor", d=> d.text_anchor) .attr("fill", d=> d.font_color) .attr("font-weight", d=> d.font_weight) .call(wrap, 10) // .on("mouseover", d => d3.select(this).attr("font-weight", "bold")) // .attr("href", d=> d.url) // .attr("link", d=> d.url) // .on("click", d=>window.open(d.url)); const source = grid.append("text") .text("Data from Google, Greater London Authority and The Automatic Urban and Rural Network.") .attr('x',margin.right) .attr('y', d=>height*2.08) .attr("class", "sourceMeta") // plots const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr("width", width*2) // .attr('transform', `translate(${width}, ${height})`) const svg2 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") // .attr("width", width*2) .attr('transform', `translate(${0}, ${height})`) // svg1 svg .append("g") .attr("class", "AxisWide") .call(xAxisWide); svg .append("g") // .attr("class", "y-axis") .call(yAxis) .attr("class", "AxisWide") .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line = svg .append("path") .datum(mobilityCities.filter(d=>d.city==="Greater London")) .attr("class", "line") .attr("d", d => lineGeneratorAggMob(d)) .attr('stroke', 'black') .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round"); // svg2 svg2 .append("g") .attr("class", "AxisWide") .call(xAxisWide); svg2.append('text') .attr('x',xScaleWide(new Date(2020,6,16))) .attr('y',yScaleAQ(-40)) .text('NO2 + PM2.5') .attr('font-weight', "bold") .attr('class', 'cityAnnot') .style('fill', 'green') svg2 .append("g") // .attr("class", "y-axis") .call(yAxisAQGLA) .attr("class", "AxisWide") .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Air Pollutants Compared to Baseline") .attr("class", "yAxisAnnot") ); svg2.append('line') .attr('x1',0+margin.left) .attr('x2',widthWide-margin.right) .attr('y1',yScaleAQGLA(0)) .attr('y2',yScaleAQGLA(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line2 = svg2 .append("path") .datum(AQdataGLA.filter(d=>new Date(d.ReadingDateTime)> new Date("2020-02-10"))) .attr("class", "line") .attr("d", d => lineGeneratorAggAQ(d)) .attr('stroke', 'green') .style("fill", "none") .style("stroke-width", 2) .style("stroke-linecap", "round"); return grid.node(); }42:T654,html`

As a result of COVID-19 policy and rising COVID-19 infections, aggregated mobility (i.e citizen movement for 1) Retail and Recreation; 2) Essential Services; 3) Work Habits; and 4) Public Transportation) began to fall below that of baseline activity early on.

Notably in April 2020 as a result of the First Lockdown (23/03/2020), aggregated mobility hit a local minimum with the percent change in overall mobility about 65% below baseline activity. Simultaneously, the percent change in overall air pollutants dropped to about 45% below baseline activity. Following the First Lockdown and the local minimum drop in aggregated mobility changes, aggregated mobility began to increase steadily, whilst still remaining below that of baseline activity. Similarly, the percent change in air pollutants also displayed similar behaviour until August 2020 with an average percent change in overall air pollution measured at about 24% below baseline activity. In August 2020, the percent change in air pollution compared to the baseline peeked to about 20% above baseline activity levels before it plummeted to about 25% below baseline activity in September 2020. Following this drop in September 2020, changes in air pollutants rose once again to about 15% above baseline activity before dropping once again to below baseline levels.

Following the Second Lockdown (05/11/2020) the percent change in air pollutants have oscillated around baseline activity levels until around January 2021. Following this date, they have dropped to about 30% below baseline activity.

`43:T498,html`

With a cartogram approach, changes in overall air quality can be investigated further per each London borough for March 2020 through February 2021. The figure below outlines the median percent change in air pollution for each borough when compared to the baseline. Brighter shades of blue indicate boroughs with a larger drop in air pollutants when compared to the baseline. Brighter shades of red indicate boroughs with very small drops in median air pollutants when compared to the baseline activity. Thus, the brighter the shade of blue, the greater the drop in air pollution for a borough. As observed in the figure below, the London CBD has had one of the greatest drops (greater than 24% less) in median air pollution in comparison to baseline activity. Boroughs such as Harrow, Hounslow, and Richmond upon Thames have also experienced considerable drops in median air pollution compared to baseline activities. Notably, while some boroughs have experienced greater median reductions in overall air pollution than others, all boroughs have experienced improved air quality from March 2020 to February 2021 when compared to the baseline.`44:T7c0,chart17 = { AQIextent; boroughAQ; const width = 600; const height = 600; // colorscale for blocks // const colorScale = d3.scaleQuantile() // .domain(colorDomainAQ) // .range(d3.schemeRdBu[10].reverse()) // // .range(d3.schemeBrBG[10].reverse()) const colorScale = d3.scaleSequential(d3.interpolateLab("#F52D4F", "#0072bb")) // const colorScale = d3.scaleSequential(d3.interpolateLab("black", "red")) .domain(colorDomainAQ); // process the data into a set of timeseries arrays // (and as a side effect calculate the domain extent of the population) const svg = d3.select(DOM.svg(width, height)).attr("transform", `translate(120,0)`); const LS = atf.londonSquared() .data(boroughAQ) .width(width) .height(height); svg.call(LS); const valueScale = d3.scaleLinear() .domain(AQIextent) .range([LS.blockSize(), 0]); const timeScale = d3.scaleTime() .domain(AQdateExtent) .range([0, LS.blockSize()]); const line = d3.line() .defined(function(d) { return !(d.value===0); }) .x((d)=>timeScale(d.date)) .y((d)=>valueScale(d.AQIdrop)) .curve(d3.curveBasis); LS.background() .attr('fill', d=>(d.code==="E09000031")|(d.code==="E09000006")?"#eeeeee": colorScale(+d.data['median'])) // .attr('fill','rgb(50,50,50)'); LS.masked() .call(function(parent){ parent.append('path') .attr('d',d=>line(d.data.AQ.filter(line.defined()))) // .datum(mobilityExtent.filter(line.defined())) .attr('fill', 'none') .attr("stroke", d=>(d.code==="E09000031")|(d.code==="E09000006")?"none": "rgb(255,255,255)") .attr('stroke-width', '1'); }); LS.foreground() .append('text') .attr('class', 'LStext') .attr('fill', 'rgb(255,255,255)') .attr('dy', 20) .attr('dx', 25) .text(d => d.LSAbbreviation); return svg.node(); //to add the chart to the page the block should return its node }45:T86e,chart18 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg .append("g") .attr("class", "AxisBig") .call(xAxis); svg .append("g") .attr("class", "AxisBig") .call(yAxisAQ) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Air Pollutants Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScaleAQ(0)) .attr('y2',yScaleAQ(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); svg.append('text') .attr('x',xScaleAQ(new Date(2020,3,1))) .attr('y',yScaleAQ(-65)) .text('City of London, High Median Drop in Air Pollutants') .attr('class', 'annotation') .style('fill', '#0072bb') // .style('fill', 'red') .attr('font-weight', 'bold') svg.append('text') .attr('x',xScale(new Date(2020,6,16))) .attr('y',yScaleAQ(30)) .text('Hillingdon, Low Median Drop in Air Pollutants') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', '#F52D4F') const line = svg .selectAll('.line') .data(boroughAQ) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorAQ(d.AQ)) // .attr('d',d=>lineGenerator(d.AQ.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? '#0072bb': d.code === "E09000017" ? '#F52D4F':'lightgrey') // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>(d.code === "E09000001")|(d.code === "E09000017") ? 1:0.5) .style("fill", "none") .style("stroke-width", d=>(d.code === "E09000001")|(d.code === "E09000017") ? 1.5:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // ("#F52D4F","#0072bb") return svg.node(); }46:T1c6a,chart21 = { const grid = d3.select(DOM.svg(width*2, height)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) // const svg2 = grid // .append("g") // // .attr("viewBox", [0, -height, width*2, height*2]) // .style("overflow", "visible") // .attr('transform', `translate(${0}, ${height})`) const svg3 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width}, ${0})`) // const svg4 = grid // .append("g") // // .attr("viewBox", [0, -height, width*2, height*2]) // .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) // svg1 svg .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Workplaces Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); svg.append('text') .attr('x',xScale(new Date(2020,2,1))) .attr('y',yScale(-90)) .text('City of London') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', '#E02685') // .style('fill', 'red') svg.append('text') .attr('x',xScale(new Date(2020,7,1))) .attr('y',yScale(-30)) .text('Rest of GLA Boroughs') .attr('font-weight', "bold") .attr('class', 'annotation') .style('fill', 'grey') const line = svg .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorW(d.mobility)) .attr('d',d=>lineGeneratorW(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? '#E02685':'lightgrey') // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 1:0.5) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 1.5:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // // svg2 // svg2 // .append("g") // // .attr("class", "x-axis") // .attr('class', 'axisGrid') // .call(xAxis); // svg2 // .append("g") // // .attr("class", "y-axis") // .attr('class', 'axisGrid') // .call(yAxis) // .call(g => // g // .select(".tick:last-of-type text") // .clone() // .attr("x", 3) // .text("% Change in Mobility to Transit Stations Compared to Baseline") // .attr("class", "yAxisAnnot") // ); // svg2.append('line') // .attr('x1',0+margin.left) // .attr('x2',width-margin.right) // .attr('y1',yScale(0)) // .attr('y2',yScale(0)) // .attr('stroke','grey') // .attr('stroke-width', '0.5') // .style("stroke-dasharray", ("2, 2")) // .style("opacity", 0.5); // const line2 = svg2 // .selectAll('.line') // .data(boroughMob) // .join('path') // .attr("class", "line") // // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGeneratorT(d.mobility)) // .attr('d',d=>lineGeneratorT(d.mobility.filter(lineGenerator.defined()))) // .attr('stroke',d=>d.code === "E09000001" ? '#E02685':'lightgrey') // // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') // .style("opacity", d=>d.code === "E09000001" ? 1:0.5) // .style("fill", "none") // .style("stroke-width", d=>d.code === "E09000001" ? 1.5:0.7) // .style("stroke-linecap", "round") // .style("mix-blend-mode", "multiply"); // svg3 svg3 .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg3 .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Retail and Recreation Compared to Baseline") .attr("class", "yAxisAnnot") ); svg3.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line3 = svg3 .selectAll('.line') .data(boroughMob) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) .attr("d", d => lineGeneratorR(d.mobility)) .attr('d',d=>lineGeneratorR(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>d.code === "E09000001" ? '#E02685':'lightgrey') // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') .style("opacity", d=>d.code === "E09000001" ? 1:0.5) .style("fill", "none") .style("stroke-width", d=>d.code === "E09000001" ? 1.5:0.7) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // // svg4 // svg4 // .append("g") // // .attr("class", "x-axis") // .attr('class', 'axisGrid') // .call(xAxis); // svg4 // .append("g") // // .attr("class", "y-axis") // .attr('class', 'axisGrid') // .call(yAxis) // .call(g => // g // .select(".tick:last-of-type text") // .clone() // .attr("x", 3) // .text("% Change in Mobility to Grocery and Pharmacies Compared to Baseline") // .attr("class", "yAxisAnnot") // ); // svg4.append('line') // .attr('x1',0+margin.left) // .attr('x2',width-margin.right) // .attr('y1',yScale(0)) // .attr('y2',yScale(0)) // .attr('stroke','grey') // .attr('stroke-width', '0.5') // .style("stroke-dasharray", ("2, 2")) // .style("opacity", 0.5); // const line4 = svg4 // .selectAll('.line') // .data(boroughMob) // .join('path') // .attr("class", "line") // // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGeneratorG(d.mobility)) // .attr('d',d=>lineGeneratorG(d.mobility.filter(lineGenerator.defined()))) // .attr('stroke',d=>d.code === "E09000001" ? '#E02685':'lightgrey') // // .attr('stroke',d=>d.code === "E09000001" ? 'red':'lightgrey') // .style("opacity", d=>d.code === "E09000001" ? 1:0.5) // .style("fill", "none") // .style("stroke-width", d=>d.code === "E09000001" ? 1.5:0.7) // .style("stroke-linecap", "round") // .style("mix-blend-mode", "multiply"); // return grid.node(); }47:Td36,chart12 = { const svg = d3 .create("svg") .attr("id", "incomeChart") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg .append("g") .attr("class", "AxisBig") // .attr("font-size", 8) .call(xAxis); svg .append("g") .attr("class", "AxisBig") .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5) svg.append('text') .attr('x',xScale(new Date(2020,2,1))) .attr('y',yScale(-97)) .text('Wealthiest London Boroughs (Average Mobility Reduction: ' + Math.round(d3.mean(boroughMob.filter(d => (d.code === "Mean Value HI")).map(d=>d.mobility).map(d=>d.map(d=>d.value))[0])) + '%)') .attr('class', 'annotation') .attr('font-weight', 'bold') .style('fill', incomeColors("High Income")) svg.append('text') .attr('x',xScale(new Date(2020,6,1))) .attr('y',yScale(-15)) .text('Poorest London Boroughs (Average Mobility Reduction: ' + Math.round(d3.mean(boroughMob.filter(d => (d.code === "Mean Value LI")).map(d=>d.mobility).map(d=>d.map(d=>d.value))[0])) + '%)') .attr('class', 'annotation') .attr('font-weight', 'bold') .style('fill', incomeColors("Low Income")) // d3.select("#incomeChart").append('div') // // .attr('x',xScale(new Date(2020,2,1))) // // .attr('y',yScale(30)) // .html("In London " + " Poorest Londoners " + "hshs") // // .attr('class', 'annotation') // // .attr('font-weight', 'bold') // .style('fill', "black") const line = svg .selectAll('.line') .data(boroughMob.filter(d=>d.incomeS !== "Mid Income")) // .data(boroughMob.filter(d=>(d.incomeS !== "Mid Income") & (d.code !== "Mean Value"))) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGenerator(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>incomeColors(d.incomeS)) .style("opacity", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1:0.25) .style("fill", "none") .style("stroke-width", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1.5:0.5) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // const meanline = svg // // .selectAll('.line') // .datum(demoMob) // .enter().append('path') // .attr("class", "line") // // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) // // .attr('d',d=>lineGenerator(d.mobility.filter(lineGenerator.defined()))) // .attr('stroke',d=>incomeColors(d.incomeS)) // .style("opacity", 0.5) // .style("fill", "none") // .style("stroke-width", 2) // .style("stroke-linecap", "round") // .style("mix-blend-mode", "multiply"); return svg.node(); }48:T1acc,chart13 = { const grid = d3.select(DOM.svg(width*2, height*2)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) const svg2 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${0}, ${height})`) const svg3 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width}, ${0})`) const svg4 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width}, ${height})`) // svg1 svg .append("g") // .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg .append("g") // .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Workplaces Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); svg.append('text') .attr('x',xScale(new Date(2020,2,1))) .attr('y',yScale(-97)) .text('Wealthiest London Boroughs') .attr('class', 'annotation') .attr('font-weight', 'bold') .style('fill', incomeColors("High Income")) svg.append('text') .attr('x',xScale(new Date(2020,6,1))) .attr('y',yScale(-35)) .text('Poorest London Boroughs') .attr('class', 'annotation') .attr('font-weight', 'bold') .style('fill', incomeColors("Low Income")) const line = svg .selectAll('.line') .data(boroughMob.filter(d=>d.incomeS !== "Mid Income")) // .data(boroughMob.filter(d=>(d.incomeS !== "Mid Income") & (d.code !== "Mean Value"))) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGeneratorW(d.mobility.filter(lineGeneratorW.defined()))) .attr('stroke',d=>incomeColors(d.incomeS)) .style("opacity", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1:0.25) .style("fill", "none") .style("stroke-width", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1.5:0.5) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg2 svg2 .append("g") .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg2 .append("g") .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Transit Stations Compared to Baseline") .attr("class", "yAxisAnnot") ); svg2.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line2 = svg2 .selectAll('.line') .data(boroughMob.filter(d=>d.incomeS !== "Mid Income")) .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorT(d.mobility.filter(lineGeneratorT.defined()))) .attr('stroke',d=>incomeColors(d.incomeS)) .style("opacity", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1:0.25) .style("fill", "none") .style("stroke-width", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1.5:0.5) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg3 svg3 .append("g") .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg3 .append("g") .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Retail and Recreation Compared to Baseline") .attr("class", "yAxisAnnot") ); svg3.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line3 = svg3 .selectAll('.line') .data(boroughMob.filter(d=>d.incomeS !== "Mid Income")) .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorR(d.mobility.filter(lineGeneratorR.defined()))) .attr('stroke',d=>incomeColors(d.incomeS)) .style("opacity", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1:0.25) .style("fill", "none") .style("stroke-width", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1.5:0.5) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg4 svg4 .append("g") .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg4 .append("g") .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Grocery and Pharmacies Compared to Baseline") .attr("class", "yAxisAnnot") ); svg4.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line4 = svg4 .selectAll('.line') .data(boroughMob.filter(d=>d.incomeS !== "Mid Income")) .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorG(d.mobility.filter(lineGeneratorG.defined()))) .attr('stroke',d=>incomeColors(d.incomeS)) .style("opacity", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1:0.25) .style("fill", "none") .style("stroke-width", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1.5:0.5) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); return grid.node(); }49:Tcce,viewof selection2 = { const colorDomainRev = colorDomainInc const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .property("value", []); const brush = d3.brush() .on("start brush end", brushed); svg.append("g") .call(xAxisScatterLD) .attr("class", "AxisBig"); svg.append("g") .call(yAxisScatterLD) .attr("class", "AxisBig"); // color of dots const colorScale = metric === "residential_percent_change_from_baseline"? d3.scaleSequential(d3.interpolateLab("#f4c20c", "#385704")) .domain([colorDomainRev[1], colorDomainRev[0]]): d3.scaleSequential(d3.interpolateLab("#f4c20c", "#385704")) .domain(colorDomainInc) const circles = svg.append("g") .attr("fill", "none") // .attr("stroke", "steelblue") // .attr("stroke-width", 0.2) .attr("stroke-width", 1) // .attr("opacity", 0.7) .selectAll("circle") .data(boroughIncMob.filter(d=>(d.tot_mobility>-60)&(d.city==="Greater London"))) const dot = circles.join("circle") .attr("transform", d => `translate(${xScaleIncomeLD(d["Total annual income (£)"])},${yScaleTotMobLD(d[metric])})`) .attr("r", 2.5) .attr("stroke", "steelblue") // .attr("stroke", d=>colorScale(d["Total annual income (£)"])) // .attr("stroke", "white") // .attr("fill", d=>colorScale(d["Total annual income (£)"])); const text = circles.join('text') .attr("x", d =>xScaleIncomeLD(d["Total annual income (£)"])+8) .attr("y", d => yScaleTotMobLD(d[metric])) .attr('class', 'annotation') .attr("fill", "black") // .attr('fill', d=>colorScale(+d["Total annual income (£)"])) // .text(d=>(d["city"]==="Greater London")?d.borough_abbr:"") .text(d=>(d["borough_abbr"]==="Islington")| (d["borough_abbr"]==="Kensington and Chelsea")| (d["borough_abbr"]==="Wandsworth")| (d["borough_abbr"]==="Richmond Upon Thames")| (d["borough_abbr"]==="Enfield")| (d["borough_abbr"]==="Barking and Dagenham")| (d["borough_abbr"]==="Hackney")| (d["borough_abbr"]==="Wandsworth")| (d["borough_abbr"]==="Hastings")| (d["borough_abbr"]==="Thanet")| (d["borough_abbr"]==="Great Yarmouth")| (d["borough_abbr"]==="Manchester")?d.borough_abbr:"") svg.call(brush); function brushed({selection}) { let value = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; value = dot .style("stroke", "gray") .filter(d => x0 <= xScaleIncomeLD(d["Total annual income (£)"]) && xScaleIncomeLD(d["Total annual income (£)"]) < x1 && y0 <= yScaleTotMobLD(d[metric]) && yScaleTotMobLD(d[metric]) < y1) .style("stroke", "steelblue") .data(); } else { dot.style("stroke", "steelblue"); } svg.property("value", value).dispatch("input"); } return svg.node(); }4a:Td9d,chart16 = { const svg = d3 .create("svg") .attr("id", "incomeChart") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg .append("g") .attr("class", "AxisBig") // .attr("font-size", 8) .call(xAxis); svg .append("g") .attr("class", "AxisBig") .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5) svg.append('text') .attr('x',xScale(new Date(2020,2,1))) .attr('y',yScale(-97)) .text('Predominantly White Boroughs (Average Mobility Reduction: ' + Math.round(d3.mean(boroughMob.filter(d => (d.code === "Mean Value W")).map(d=>d.mobility).map(d=>d.map(d=>d.value))[0])) + '%)') .attr('class', 'annotation') .attr('font-weight', 'bold') .style('fill', ethnicColors("White")) svg.append('text') .attr('x',xScale(new Date(2020,6,1))) .attr('y',yScale(-15)) .text('Predominantly BAME Boroughs (Average Mobility Reduction: ' + Math.round(d3.mean(boroughMob.filter(d => (d.code === "Mean Value EM")).map(d=>d.mobility).map(d=>d.map(d=>d.value))[0])) + '%)') .attr('class', 'annotation') .attr('font-weight', 'bold') .style('fill', ethnicColors("Ethnic Minority")) // d3.select("#incomeChart").append('div') // // .attr('x',xScale(new Date(2020,2,1))) // // .attr('y',yScale(30)) // .html("In London " + " Poorest Londoners " + "hshs") // // .attr('class', 'annotation') // // .attr('font-weight', 'bold') // .style('fill', "black") const line = svg .selectAll('.line') // .data(boroughMob.filter(d=>d.incomeS !== "Mid Income")) .data(boroughMob) // .data(boroughMob.filter(d=>(d.incomeS !== "Mid Income") & (d.code !== "Mean Value"))) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGenerator(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>ethnicColors(d.ethnicMaj)) .style("opacity", d => (d.code === "Mean Value W")|(d.code === "Mean Value EM")?1:0.25) // .style("opacity", d => 0.25) .style("fill", "none") .style("stroke-width", d => (d.code === "Mean Value W")|(d.code === "Mean Value EM")?1.5:0.25) // .style("stroke-width", 0.5) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // const meanline = svg // // .selectAll('.line') // .datum(demoMob) // .enter().append('path') // .attr("class", "line") // // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) // // .attr('d',d=>lineGenerator(d.mobility.filter(lineGenerator.defined()))) // .attr('stroke',d=>incomeColors(d.incomeS)) // .style("opacity", 0.5) // .style("fill", "none") // .style("stroke-width", 2) // .style("stroke-linecap", "round") // .style("mix-blend-mode", "multiply"); return svg.node(); }4b:T1acf,chart22 = { const grid = d3.select(DOM.svg(width*2, height*2)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) const svg2 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${0}, ${height})`) const svg3 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width}, ${0})`) const svg4 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width}, ${height})`) // svg1 svg .append("g") .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg .append("g") .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Workplaces Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); svg.append('text') .attr('x',xScale(new Date(2020,2,1))) .attr('y',yScale(-97)) .text('Predominantly White Boroughs') .attr('class', 'annotation') .attr('font-weight', 'bold') .style('fill', ethnicColors("White")) svg.append('text') .attr('x',xScale(new Date(2020,6,1))) .attr('y',yScale(-35)) .text('Predominantly BAME Boroughs') .attr('class', 'annotation') .attr('font-weight', 'bold') .style('fill', ethnicColors("Ethnic Minority")) const line = svg .selectAll('.line') .data(boroughMob.filter(d=>d.incomeS !== "Mid Income")) // .data(boroughMob.filter(d=>(d.incomeS !== "Mid Income") & (d.code !== "Mean Value"))) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGeneratorW(d.mobility.filter(lineGeneratorW.defined()))) .attr('stroke',d=>ethnicColors(d.ethnicMaj)) .style("opacity", d => (d.code === "Mean Value W")|(d.code === "Mean Value EM")?1:0.25) .style("fill", "none") .style("stroke-width", d => (d.code === "Mean Value W")|(d.code === "Mean Value EM")?1.5:0.25) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg2 svg2 .append("g") .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg2 .append("g") .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Transit Stations Compared to Baseline") .attr("class", "yAxisAnnot") ); svg2.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line2 = svg2 .selectAll('.line') .data(boroughMob.filter(d=>d.incomeS !== "Mid Income")) .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorT(d.mobility.filter(lineGeneratorT.defined()))) .attr('stroke',d=>ethnicColors(d.ethnicMaj)) .style("opacity", d => (d.code === "Mean Value W")|(d.code === "Mean Value EM")?1:0.25) .style("fill", "none") .style("stroke-width", d => (d.code === "Mean Value W")|(d.code === "Mean Value EM")?1.5:0.25) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg3 svg3 .append("g") .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg3 .append("g") .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Retail and Recreation Compared to Baseline") .attr("class", "yAxisAnnot") ); svg3.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line3 = svg3 .selectAll('.line') .data(boroughMob.filter(d=>d.incomeS !== "Mid Income")) .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorR(d.mobility.filter(lineGeneratorR.defined()))) .attr('stroke',d=>ethnicColors(d.ethnicMaj)) .style("opacity", d => (d.code === "Mean Value W")|(d.code === "Mean Value EM")?1:0.25) .style("fill", "none") .style("stroke-width", d => (d.code === "Mean Value W")|(d.code === "Mean Value EM")?1.5:0.25) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // svg4 svg4 .append("g") .attr("class", "x-axis") .attr('class', 'axisGrid') .call(xAxis); svg4 .append("g") .attr("class", "y-axis") .attr('class', 'axisGrid') .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Mobility to Grocery and Pharmacies Compared to Baseline") .attr("class", "yAxisAnnot") ); svg4.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); const line4 = svg4 .selectAll('.line') .data(boroughMob.filter(d=>d.incomeS !== "Mid Income")) .join('path') .attr("class", "line") .attr('d',d=>lineGeneratorG(d.mobility.filter(lineGeneratorG.defined()))) .attr('stroke',d=>ethnicColors(d.ethnicMaj)) .style("opacity", d => (d.code === "Mean Value W")|(d.code === "Mean Value EM")?1:0.25) .style("fill", "none") .style("stroke-width", d => (d.code === "Mean Value W")|(d.code === "Mean Value EM")?1.5:0.25) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); return grid.node(); }4c:Tb14,viewof selection3 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .property("value", []); const brush = d3.brush() .on("start brush end", brushed); svg.append("g") .call(xAxisScatterELD) .attr("class", "AxisBig"); svg.append("g") .call(yAxisScatterELD) .attr("class", "AxisBig"); // color of dots const colorScale = d3.scaleSequential(d3.interpolateLab("#4d194d", "#009699")) // const colorScale = d3.scaleSequential(d3.interpolateLab("black", "red")) .domain(colorDomainW) const circles = svg.append("g") .attr("fill", "none") // .attr("stroke", "steelblue") .attr("stroke-width", 0.2) .attr("opacity", 0.7) .selectAll("circle") .data(boroughEMob) const dot = circles.join("circle") .attr("transform", d => `translate(${xScaleEthnicityLD(d["White"])},${yScaleTotMobELD(d[metricE])})`) .attr("r", 2.5) .attr("stroke", d=>colorScale(d["White"])) // .attr("stroke", "white") .attr("fill", d=>colorScale(d["White"])); // .attr("fill", "blue"); const text = circles.join('text') .attr("x", d =>xScaleEthnicityLD(d["White"])+8) .attr("y", d => yScaleTotMobELD(d[metricE])) .attr('class', 'annotation') .attr('fill', d=>colorScale(d["White"])) // .attr('fill', d=>colorScale(+d["Total annual income (£)"])) // .text(d=>(d["city"]==="Greater London")?d.borough_abbr:"") .text(d=>(d["area_name"]==="Islington")| (d["area_name"]==="Kensington and Chelsea")| (d["area_name"]==="Wandsworth")| (d["area_name"]==="Richmond Upon Thames")| (d["area_name"]==="Enfield")| (d["area_name"]==="Barking and Dagenham")| (d["area_name"]==="Hackney")| (d["area_name"]==="Wandsworth")| (d["area_name"]==="Hastings")| (d["area_name"]==="Thanet")| (d["area_name"]==="Great Yarmouth")| (d["area_name"]==="Manchester")?d.area_name:"") svg.call(brush); function brushed({selection}) { let value = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; value = dot .style("stroke", "gray") .filter(d => x0 <= xScaleIncomeLD(d["Total annual income (£)"]) && xScaleIncomeLD(d["Total annual income (£)"]) < x1 && y0 <= yScaleTotMobELD(d[metricE]) && yScaleTotMobELD(d[metricE]) < y1) .style("stroke", "steelblue") .data(); } else { dot.style("stroke", "steelblue"); } svg.property("value", value).dispatch("input"); } return svg.node(); }4d:Tbcf,hexmap = { // Create the svg element const figScale = 1 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height*figScale]) .property("value", []); // color of hexes // income const colorScale = mapMetric === "Total annual income (£)"? d3.scaleSequential(d3.interpolateLab("#385704", "#f4c20c")) .domain(colorDomainInc): d3.scaleSequential(d3.interpolateLab("black", "#E02685")) .domain(colorDomainMob); // Render the hexes var hexes = d3.renderHexJSON(hex_la, width, height*figScale) var boundarySegments = d3.getBoundarySegmentsForHexJSON(hex_la, width, height*figScale, "region"); // Bind the hexes to g elements of the svg and position them var hexmap = svg .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); // Draw the polygons around each hex's centre hexmap .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScale(ukUpd_tot.filter(c=>c.area_code===d.key)[0][mapMetric])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // d3.selectAll(".hex") // .on("mouseover", function(event, d) {d3.select(this).attr("stroke-width", "3")}) // .on("mouseover", (event, d) => d3.select(this).attr("stroke-width", "3")) // .on("mousemove", (event, d) => d3.select(this).attr("stroke-width", "3")) // .on("mouseout", (event, d) => d3.select(this).attr("stroke-width", "1")) // .attr("fill", "#b0e8f0"); // Add the hex codes as labels hexmap .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr('font-size', 3*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); // Draw boundary lines var boundaryLines = svg .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "red") .attr("stroke-width", figScale) .attr("stroke-linecap", "round") .attr("fill", "none"); // return svg.node(); }4e:T157c,{ const data = ukUpd.filter(d=>(d.place_id=="ChIJqZHHQhE7WgIReiWIMkOg-MQ"))//&&(d.date.getUTCDay()!==0)&&(d.date.getUTCDay()!==6)) // const months = [...Array(53).keys()].map(d=>"") // months.splice(3, 1, 'Jan.') // months.splice(7, 1, 'Feb.') // months.splice(11, 1, 'Mar.') // months.splice(15, 1, 'Apr.') // months.splice(19, 1, 'May') // months.splice(23, 1, 'Jun.') // months.splice(27, 1, 'Jul.') // months.splice(31, 1, 'Aug.') // months.splice(35, 1, 'Sept.') // months.splice(39, 1, 'Oct.') // months .splice(43, 1, 'Nov.') // months.splice(47, 1, 'Dec.') // const months = [...Array(12).keys()] const months = ["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."] const monthScale = d3 .scaleBand() // .scaleUtc() .domain(months.map(d=>d)) .range([0, 1150 - 40]) const plot = Plot.plot({ // height: 1000, height: 470, width: 1150, marginTop:140, marginBottom: 30, marginRight: 40, x: { axis: null, type: "band", padding: 0, // tickFormat: formatDay, // ticks: d3.ticks(...d3.extent(data, d => d.date.getUTCMonth()), 11), // ticks: months, // domain: [new Date("2020-01-01"), new Date("2022-01-12")] // domain: d3.range(d3.min(data, d => d.date.getUTCMonth()), d3.max(data, d => d.date.getUTCMonth()) + 1) // domain:[...Array(53).keys()], // range:months, // ticks:12, // tickFormat: Plot.formatMonth("en", "narrow"), }, y: { padding: 0, tickFormat: Plot.formatWeekday("en", "narrow"), tickSize: 0, domain: [1, 2, 3, 4, 5, 6, 0], // domain: ["M", "T", "W", "T", "F", "S", "S"] }, fy: { reverse: false, // padding: 0.1 // tickFormat: Plot.formatMonth("en", "long"), }, facet: { data: data, // y: d => d.date.getUTCMonth(), y: d => d.date.getUTCFullYear(), }, color: { // type: "diverging", // scheme: "PiYG", // scheme: "BuRd", reverse: true, // range: ["black", "#E02685"], // range: ["#fff0f7", "#e30777"], range: ["black", "#e30777"], // range: d3.quantize(d3.interpolateLab("#fff0f7", "#e30777"), 3) interpolate: "lab", domain: [-70, 0] }, marks: [ Plot.cell(data, { // x: d => d3.utcWeek.count(d3.utcMonth(d.date), d.date), x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date), y: d => d.date.getUTCDay(), // y: d => d.date.getUTCDay()===0? fill: (d, i) => i > 0 ? d.workplaces_percent_change_from_baseline : NaN, title: (d, i) => d.date, inset: 1.5 }) // Plot.dot(data, { // // x: d => d3.utcWeek.count(d3.utcMonth(d.date), d.date), // x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date), // y: d => d.date.getUTCDay(), // // y: d => d.date.getUTCDay()===0? // fill: (d, i) => i > 0 ? d.workplaces_percent_change_from_baseline : NaN, // // title: (d, i) => i > 0 ? ((d.Close - DJI[i - 1].Close) / DJI[i - 1].Close * 100).toFixed(1) : NaN, // // inset: 0.5, // r: 8 // }) ] }) // tick styling let ticks = d3 .select(plot) .selectAll('.tick') .attr("font-size", "13") .attr("font-weight", "bold") // Title let title = d3 .select(plot) .append("text") .attr("class", "FigTitle") .attr("x", 200) .attr("y", 50) .style('font-weight', 400) .attr("text-anchor", "left") .text(`Mobility patterns in the UK since Feb. 2020`) // legend const widthLegend = 100 const legendTicks = 4 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 const colorScaleMob = d3.scaleSequential(d3.interpolateLab("black", "#e30777")) .domain([d3.max(data, d=>d['workplaces_percent_change_from_baseline']),d3.min(data, d=>d['workplaces_percent_change_from_baseline'])]).nice() const monthsScale = d3.scaleBand() .domain(months) // const colorScaleMob = // d3.scaleSequential(d3.interpolateRdBu) // .domain(colorDomainMob); const svgLegendMob = d3 .select(plot) .append("g") // .attr("viewBox", [0, 0, widthLegend, heightLegend]) // // .style("overflow", "visible") .attr('transform', `translate(${50}, ${-10})`) const legendText = d3 .select(plot) .append("text") .attr("class", "legendTitle") .attr("x", 100) .attr("y", 80) .attr("text-anchor", "left") .text("Mobility change since Feb. 2020 (%)") // .attr('transform', `translate(${50}, ${-20})`) const legendMob = renderLegend(svgLegendMob, colorScaleMob, heightLegend, widthLegend, barHeight, legendTicks, legendMobTickformat, "linear-gradient-mob-ts") // x axis const xAxisMonths = g => g.attr("transform", `translate(0,${470 - margin.bottom})`).call( d3 .axisBottom(monthScale) .ticks(12) .tickSize(0) .tickSizeOuter(0) ) const xAxis = d3 .select(plot) .append("g") .call(xAxisMonths) .attr("class", "AxisMonth") .call(g => g.select(".domain").remove()) // .attr("class", "AxisBig"); return plot }4f:T46ee,hexmap_mob_cat = { // Create the svg element const figScale = 1.1 const figWidth = width*2.5 const figHeight = height*figScale const figOffset = 280 const marginTop = 200 const marginBottom = 30 const widthLegend = 100 const legendTicks = 4 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 const boundWidth = 3 const grid = d3.select(DOM.svg(figWidth, figHeight+marginTop+marginBottom)); const svg = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${0}, ${marginTop})`) // const svg2 = grid // .append("g") // .attr("viewBox", [0, 0, figWidth, figHeight]) // // .style("overflow", "visible") // .attr('transform', `translate(${figOffset}, ${marginTop})`) const svg3 = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset}, ${marginTop})`) const svg4 = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset*2}, ${marginTop})`) const svg5 = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset*3}, ${marginTop})`) const svgBounds = grid .append("svg") .attr("viewBox", [0, 0, figWidth*2, figHeight*2]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset*5}, ${marginTop})`) const svgLegendMob = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${20}, ${-20})`) // annotations const g = grid.append("g") .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); g.append("text") .attr("class", "legendTitle") .attr("x", -margin.left) .attr("dy", -30) .attr("text-anchor", "left") .text("Mobility change since Feb. 2020 (%)") .attr('transform', `translate(${0}, ${-20})`) // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -100) .style('font-weight', 400) .attr("text-anchor", "left") .text(`Average change across 4 categories of `) .append('tspan') .style('font-weight', 900) .text('mobility ') .style("fill", "#E02685") .append('tspan') .style('font-weight', 400) .text("for the UK's Local Authority Areas") .style("fill", "black") // g.append("line") // .attr("x1", -margin.left) // .attr("x2", -20) // .attr("y1", -75) // .attr("y2", -75) // .attr("stroke", "black") // color scales const colorScaleMob = d3.scaleSequential(d3.interpolateLab("black", "#E02685")) .domain([d3.max(ukUpd_tot, d=>d['tot_mobility']),d3.min(ukUpd_tot, d=>d['tot_mobility'])]).nice() // legend const legendMob = renderLegend(svgLegendMob, colorScaleMob, heightLegend, widthLegend, barHeight, legendTicks, legendMobTickformat, "linear-gradient-mob-cat") // Render the hexes var hexes = d3.renderHexJSON(hex_la, figWidth, figHeight) var hexesBounds = d3.renderHexJSON(hex_la, figWidth, figHeight) var boundarySegments = d3.getBoundarySegmentsForHexJSON(hex_la, figWidth, figHeight, "region"); // boundary legend var hexmapBounds = svgBounds .selectAll("g") .data(hexesBounds) .join("g") .attr("transform", function(hex) { return "translate(" + (hex.x+figOffset*7) + "," + (hex.y-220) + ")"; }); // Draw the polygons around each hex's centre hexmapBounds .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "lightgrey") .attr("stroke-width", "0") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", "lightgrey") .attr("class", "hex") // Draw boundary lines var boundaryLines = svgBounds .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1+ figOffset*7;}) .attr("y1", function(d) { return d.y1-220;}) .attr("x2", function(d) { return d.x2+ figOffset*7;}) .attr("y2", function(d) { return d.y2-220;}) .attr("stroke", "black") .attr("stroke-width", 3) .attr("stroke-linecap", "round") .attr("fill", "none"); const wales = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7) // .attr("dy", -30) .attr("text-anchor", "left") .text("Wales") // .attr('transform', `translate(${0}, ${-20})`) const WM = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7+ 110) // .attr("dy", -30) .attr("text-anchor", "left") .text("WM") const EM = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7+ 170) .attr("dy", -20) .attr("text-anchor", "left") .text("EM") const London = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7+ 180) .attr("dy", 50) .attr("text-anchor", "left") .text("London") const Anglia = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7+ 200) .attr("dy", 10) .attr("text-anchor", "left") .text("Anglia") const SE = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7+ 110) .attr("dy", 60) .attr("text-anchor", "left") .text("S. East") const SW = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7-20) .attr("dy", 70) .attr("text-anchor", "left") .text("S. West") const NW = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7+ 100) .attr("dy", -50) .attr("text-anchor", "left") .text("N. West") const yorkshire = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7+ 220) .attr("dy", -70) .attr("text-anchor", "left") .text("Yorkshire") const NE = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7+ 170) .attr("dy", -120) .attr("text-anchor", "left") .text("N. East") const scotland = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7+ 140) .attr("dy", -170) .attr("text-anchor", "left") .text("Scotland") const NI = svgBounds.append("text") .attr("class", "regionAnnot") .attr("x", figOffset*7-60) .attr("dy", -80) .attr("text-anchor", "left") .text("N. Ireland") // maps // Bind the hexes to g elements of the svg and position them colorScaleMob.domain([d3.max(ukUpd_tot, d=>d['workplaces_percent_change_from_baseline']),d3.min(ukUpd_tot, d=>d['workplaces_percent_change_from_baseline'])]) var hexmap = svg .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg .append("text") .attr("class", "legendTitle") .attr("x", figOffset/2) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("Travel to Workplaces") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["workplaces_percent_change_from_baseline"])) .attr("class", "hex") // .append("svg:title") // .text(function(d, i) { return d; }); .on("mouseover", function(event, d) { // console.log(d) d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // residential // colorScaleMob.domain(d3.extent(ukUpd_tot, d=> +d["residential_percent_change_from_baseline"]).reverse()) // // Bind the hexes to g elements of the svg and position them // var hexmap_res = svg2 // .selectAll("g") // .data(hexes) // .join("g") // .attr("transform", function(hex) { // return "translate(" + hex.x + "," + hex.y + ")"; // }); // svg2 // .append("text") // .attr("class", "legendTitle") // .attr("x", figOffset/2) // .attr("y", figHeight+marginBottom/2) // .attr("text-anchor", "middle") // .text("Work from Home") // .style("font-weight", 900) // // Draw the polygons around each hex's centre // hexmap_res // .append("polygon") // .attr("points", function(hex) {return hex.points;}) // .attr("stroke", "white") // .attr("stroke-width", "0.5") // // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) // .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": // colorScaleMob(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["residential_percent_change_from_baseline"])) // .attr("class", "hex") // .on("mouseover", function(event, d) { // d3.select(this) // .attr("stroke-width", "1.5") // // .raise() // }) // .on("mouseleave", function(event, d) { // d3.select(this) // .attr("stroke-width", "0.5") // // .lower() // }) // residential // colorScaleMob.domain(d3.extent(ukUpd_tot, d=> d["transit_stations_percent_change_from_baseline"]).reverse()) colorScaleMob.domain([d3.max(ukUpd_tot, d=>d['transit_stations_percent_change_from_baseline']),d3.min(ukUpd_tot, d=>d['transit_stations_percent_change_from_baseline'])]) // Bind the hexes to g elements of the svg and position them var hexmap_t = svg3 .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg3 .append("text") .attr("class", "legendTitle") .attr("x", figOffset/2) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("Public Transport Use") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap_t .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["transit_stations_percent_change_from_baseline"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // residential // colorScaleMob.domain(d3.extent(ukUpd_tot, d=> d["retail_and_recreation_percent_change_from_baseline"]).reverse()) colorScaleMob.domain([d3.max(ukUpd_tot, d=>d['retail_and_recreation_percent_change_from_baseline']),d3.min(ukUpd_tot, d=>d['retail_and_recreation_percent_change_from_baseline'])]) // Bind the hexes to g elements of the svg and position them var hexmap_ret = svg4 .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg4 .append("text") .attr("class", "legendTitle") .attr("x", figOffset/2) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("Retail and Recreation") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap_ret .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["retail_and_recreation_percent_change_from_baseline"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // residential // colorScaleMob.domain(d3.extent(ukUpd_tot, d=> d["grocery_and_pharmacy_percent_change_from_baseline"]).reverse()) colorScaleMob.domain([d3.max(ukUpd_tot, d=>d['grocery_and_pharmacy_percent_change_from_baseline']),d3.min(ukUpd_tot, d=>d['grocery_and_pharmacy_percent_change_from_baseline'])]) // Bind the hexes to g elements of the svg and position them var hexmap_g = svg5 .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg5 .append("text") .attr("class", "legendTitle") .attr("x", figOffset/2) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("Essential Services") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap_g .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["grocery_and_pharmacy_percent_change_from_baseline"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // Draw boundary lines var boundaryLines = svg .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // Draw boundary lines var boundaryLines = svg3 .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // Draw boundary lines var boundaryLines = svg4 .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // Draw boundary lines var boundaryLines = svg5 .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); return grid.node() }50:T1ee0,hexmap_inc_mob = { // Create the svg element // Canterbury // Waverley // Winchester //Christchurch const figScale = 2 const figWidth = width*2.5 const figHeight = height*figScale const marginTop = 150 const widthLegend = 100 const legendTicks = 4 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 const grid = d3.select(DOM.svg(figWidth, figHeight+marginTop)); const svg = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${0}, ${marginTop})`) const svg2 = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${figWidth/2}, ${marginTop})`) const svgLegendMob = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${figWidth/6}, ${-20})`) const svgLegendInc = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${figWidth/1.5}, ${-20})`) // annotations const g = grid.append("g") .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -100) .style('font-weight', 400) .attr("text-anchor", "left") .text(`Trends in `) .append('tspan') .style('font-weight', 900) .text('mobility change ') .style("fill", "#E02685") .append('tspan') .style('font-weight', 400) .text('compared to ') .style("fill", "black") .append('tspan') .style('font-weight', 900) .text('local household income ') .style("fill", "#4e7a00") .append('tspan') .style('font-weight', 400) .text("for the UK's Local Authority Areas") .style("fill", "black") // g.append("line") // .attr("x1", -margin.left) // .attr("x2", -20) // .attr("y1", -75) // .attr("y2", -75) // .attr("stroke", "black") g.append("text") .attr("class", "legendTitle") .attr("x", -margin.left) .attr("dy", -30) .attr("text-anchor", "left") .text("Mobility change since Feb. 2020 (%)") .attr('transform', `translate(${figWidth/6-35}, ${-20})`) g.append("text") .attr("class", "legendTitle") .attr("x", -margin.left) .attr("dy", -30) .attr("text-anchor", "left") .text("2020 Household Income") .attr('transform', `translate(${figWidth/1.5-10}, ${-20})`) // color scales // income const colorScaleInc = d3.scaleSequential(d3.interpolateLab("#f4d10c", "#203300")) .domain(d3.extent(ukUpd_tot, d=>d["Total annual income (£)"])).nice() // const colorScaleInc = // d3.scaleSequential(d3.interpolatePiYG) // .domain(colorDomainInc) const colorScaleMob = d3.scaleSequential(d3.interpolateLab("black", "#E02685")) .domain([d3.max(ukUpd_tot, d=>d['tot_mobility']),d3.min(ukUpd_tot, d=>d['tot_mobility'])]) const legendScaleMob = d3.scaleSequential(d3.interpolateLab("black", "#ff309a")) .domain([0, d3.min(ukUpd_tot, d=>d['tot_mobility'])]) const toolTipScale = d3.scaleSequential(d3.interpolateLab("white", "#ff309a")) .domain([0, -60]) // legend const legendMob = renderLegend(svgLegendMob, legendScaleMob, heightLegend, widthLegend, barHeight, legendTicks, legendMobTickformat, "linear-gradient-mob") const legendInc = renderLegend(svgLegendInc, colorScaleInc, heightLegend, widthLegend, barHeight, legendTicks, legendIncTickformat, "linear-gradient-inc") // Render the hexes var hexes = d3.renderHexJSON(hex_la, figWidth, figHeight) var hexes2 = d3.renderHexJSON(hex_la, figWidth, figHeight) var boundarySegments = d3.getBoundarySegmentsForHexJSON(hex_la, figWidth, figHeight, "region"); // Bind the hexes to g elements of the svg and position them var hexmap = svg .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); // Draw the polygons around each hex's centre hexmap .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["tot_mobility"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) .on("mouseover.tt", function(event, d) { // toolTipScale.domain([0, -90]) console.log(d) return showTooltip(event, ukUpd_tot.filter(c=>c.area_code===d.key)[0], toolTipScale) }) .on("mouseleave.tt", (event, d) => hideTooltip(event, d)) // Add the hex codes as labels hexmap .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr('font-size', 3*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); // Income // Bind the hexes to g elements of the svg and position them var hexmap_inc = svg2 .selectAll("g") .data(hexes2) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); // Draw the polygons around each hex's centre hexmap_inc .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined ? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === null? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === undefined ? "#ccc": colorScaleInc(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // Add the hex codes as labels hexmap_inc .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr('font-size', 3*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); // return [ // svg2.node(), svg.node() // ] // return grid.node() }51:T3093,hexmap_inc_mob_pop = { // Create the svg element const figScale = 1.5 const figWidth = width*2.5 const figHeight = height*figScale const figOffset = 400 const marginTop = 150 const widthLegend = 100 const legendTicks = 4 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 const boundWidth = 3 const grid = d3.select(DOM.svg(figWidth, figHeight+marginTop)); const svg = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${0}, ${marginTop})`) const svg2 = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset}, ${marginTop})`) const svg3 = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset*2}, ${marginTop})`) const svgLegendMob = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset/3}, ${-20})`) const svgLegendInc = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset*1.3}, ${-20})`) const svgLegendPop = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset*2.3}, ${-20})`) // annotations const g = grid.append("g") .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -100) .style('font-weight', 400) .attr("text-anchor", "left") .text(`Trends in `) .append('tspan') .style('font-weight', 900) .text('mobility change ') .style("fill", "#E02685") .append('tspan') .style('font-weight', 400) .text('compared to ') .style("fill", "black") .append('tspan') .style('font-weight', 900) .text('local household income ') .style("fill", "#4e7a00") .append('tspan') .style('font-weight', 400) .text('and ') .style("fill", "black") .append('tspan') .style('font-weight', 900) .text('population ') .style("fill", "darkred") .append('tspan') .style('font-weight', 400) .text("for the UK's Local Authority Areas") .style("fill", "black") // g.append("line") // .attr("x1", -margin.left) // .attr("x2", -20) // .attr("y1", -75) // .attr("y2", -75) // .attr("stroke", "black") g.append("text") .attr("class", "legendTitle") .attr("x", -margin.left) .attr("dy", -30) .attr("text-anchor", "left") .text("Mobility change since Feb. 2020 (%)") .attr('transform', `translate(${figWidth/8.1-35}, ${-20})`) g.append("text") .attr("class", "legendTitle") .attr("x", -margin.left) .attr("dy", -30) .attr("text-anchor", "left") .text("2020 Household Income") .attr('transform', `translate(${figWidth/2.3-10}, ${-20})`) g.append("text") .attr("class", "legendTitle") .attr("x", -margin.left) .attr("dy", -30) .attr("text-anchor", "left") .text("2020 Population") .attr('transform', `translate(${figWidth/1.3-10}, ${-20})`) // color scales // income const colorScaleInc = d3.scaleSequential(d3.interpolateLab("#f4d10c", "#203300")) .domain(d3.extent(ukUpd_tot, d=>d["Total annual income (£)"])).nice() // const colorScaleInc = // d3.scaleSequential(d3.interpolatePiYG) // .domain(colorDomainInc) const colorScaleMob = d3.scaleSequential(d3.interpolateLab("black", "#E02685")) .domain([d3.max(ukUpd_tot, d=>d['tot_mobility']),d3.min(ukUpd_tot, d=>d['tot_mobility'])]) const colorScalePop = d3.scaleSequential(d3.interpolateLab("white", "darkred")) // .domain(d3.extent(ukUpd_tot, d=>d["pop"])).nice() .domain([5000, 350000]).nice() // d3.scaleQuantile() // .domain(d3.extent(ukUpd_tot, d=>d["pop"])) // .range(d3.quantize(d3.interpolateLab("black", "red"), 3)) const legendScaleMob = d3.scaleSequential(d3.interpolateLab("black", "#ff309a")) .domain([0, d3.min(ukUpd_tot, d=>d['tot_mobility'])]) const toolTipScale = d3.scaleSequential(d3.interpolateLab("white", "#ff309a")) .domain([0, -60]) // legend const legendMob = renderLegend(svgLegendMob, legendScaleMob, heightLegend, widthLegend, barHeight, legendTicks, legendMobTickformat, "linear-gradient-mob") const legendInc = renderLegend(svgLegendInc, colorScaleInc, heightLegend, widthLegend, barHeight, legendTicks, legendIncTickformat, "linear-gradient-inc") const legendPop = renderLegend(svgLegendPop, colorScalePop, heightLegend, widthLegend, barHeight, legendTicks, legendIncTickformat, "linear-gradient-pop") // Render the hexes var hexes = d3.renderHexJSON(hex_la, figWidth, figHeight) var hexes2 = d3.renderHexJSON(hex_la, figWidth, figHeight) var hexes3 = d3.renderHexJSON(hex_la, figWidth, figHeight) var boundarySegments = d3.getBoundarySegmentsForHexJSON(hex_la, figWidth, figHeight, "region"); // Bind the hexes to g elements of the svg and position them var hexmap = svg .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); // Draw the polygons around each hex's centre hexmap .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["tot_mobility"])) .attr("class", "hex") .on("mouseover", function(event, d) { console.log(d) d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) .on("mouseover.tt", function(event, d) { // toolTipScale.domain([0, -90]) console.log(d) return showTooltip(event, ukUpd_tot.filter(c=>c.area_code===d.key)[0], toolTipScale) }) .on("mouseleave.tt", (event, d) => hideTooltip(event, d)) // Add the hex codes as labels hexmap .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr('font-size', 3*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); // Income // Bind the hexes to g elements of the svg and position them var hexmap_inc = svg2 .selectAll("g") .data(hexes2) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); // Draw the polygons around each hex's centre hexmap_inc .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined ? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === null? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === undefined ? "#ccc": colorScaleInc(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // Add the hex codes as labels hexmap_inc .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr('font-size', 3*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); // Pop // Bind the hexes to g elements of the svg and position them var hexmap_pop = svg3 .selectAll("g") .data(hexes3) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); // Draw the polygons around each hex's centre hexmap_pop .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined ? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["pop"] === null? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["pop"] === undefined ? "#ccc": colorScalePop(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["pop"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // Add the hex codes as labels hexmap_pop .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr('font-size', 3*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); // Draw boundary lines var boundaryLines = svg .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // Draw boundary lines var boundaryLines = svg2 .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // Draw boundary lines var boundaryLines = svg3 .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // return [ // svg2.node(), svg.node() // ] return grid.node() }52:T1237,chart15_UKincome = { const svg = d3 .create("svg") .attr("id", "incomeChart") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg .append("g") .attr("class", "AxisBig") // .attr("font-size", 8) .call(xAxis); svg .append("g") .attr("class", "AxisBig") .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .text("% Change in Overall Mobility Compared to Baseline") .attr("class", "yAxisAnnot") ); svg.append('line') .attr('x1',0+margin.left) .attr('x2',width-margin.right) .attr('y1',yScale(0)) .attr('y2',yScale(0)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5) svg.append('text') .attr('x',xScale(new Date(2020,2,1))) .attr('y',yScale(-93)) .text('Wealthiest UK Boroughs') .attr('class', 'annotation') .attr('font-weight', 'bold') .style('fill', incomeColors("High Income")) svg.append('text') .attr('x',xScale(new Date(2020,10,1))) .attr('y',yScale(10)) .text('Poorest UK Boroughs') .attr('class', 'annotation') .attr('font-weight', 'bold') .style('fill', incomeColors("Low Income")) // d3.select("#incomeChart").append('div') // // .attr('x',xScale(new Date(2020,2,1))) // // .attr('y',yScale(30)) // .html("In London " + " Poorest Londoners " + "hshs") // // .attr('class', 'annotation') // // .attr('font-weight', 'bold') // .style('fill', "black") const line = svg .selectAll('.line') .data(boroughMobUK.filter(d=>(d.incomeS !== "Mid Income"))) //&(d.median < -15) // .data(boroughMob.filter(d=>(d.incomeS !== "Mid Income") & (d.code !== "Mean Value"))) .join('path') .attr("class", "line") // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGenerator(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>incomeColors(d.incomeS)) .style("opacity", 0.15) .style("fill", "none") .style("stroke-width", 0.5) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply") .on("mouseover", function(d) { d3.selectAll('.medianLine') .style('opacity', 0.15); // d3.selectAll('.circle') // .style('opacity', circleOpacityOnLineHover); d3.select(this) .style('opacity', 1) .style("stroke-width", 1) .style("cursor", "pointer") }) .on("mouseout", function(d) { d3.selectAll('.medianLine') .style('opacity', 1); d3.selectAll(".hoverAnnotation").remove() // d3.selectAll('.circle') // .style('opacity', circleOpacity); d3.select(this) .style('opacity', 0.15) .style("stroke-width", 0.5) .style("cursor", "none"); }) .on("mouseover.text", function(event, d) { svg.append("text") .attr("class", "hoverAnnotation") .style("fill", incomeColors(d.incomeS)) .text(d.code) // .text("TEST") .attr("text-anchor", "middle") // .attr('x', event.screenX) // .attr('y', event.screenY) .attr('x', xScale(new Date(2020,7,1))) .attr('y', yScale(-80)) console.log(event.screenX) console.log(event.screenY) console.log("scale") console.log(xScale(new Date(2020,6,1))) console.log(yScale(10)) console.log(d) }); const medianline = svg .selectAll('.medianLine') .data(boroughMobUK.filter(d =>(d.code === "Mean Value HI")|(d.code === "Mean Value LI"))) // .data(boroughMob.filter(d=>(d.incomeS !== "Mid Income") & (d.code !== "Mean Value"))) .join('path') .attr("class", ".medianLine") // .attr("d", d => lineGenerator(d[1])) // .attr("d", d => lineGenerator(d.mobility)) .attr('d',d=>lineGenerator(d.mobility.filter(lineGenerator.defined()))) .attr('stroke',d=>incomeColors(d.incomeS)) // .style("opacity", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1:0.25) .style("opacity", 1) .style("fill", "none") // .style("stroke-width", d => (d.code === "Mean Value HI")|(d.code === "Mean Value LI")?1.5:0.5) .style("stroke-width", d => 1.5) .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply"); // .style("mix-blend-mode", "luminosity"); // svg.call(hover, line); return svg.node(); }53:T156f,{ let xLabel = "Increase in Work from Home Households (%) →" let yLabel = "Change in Travel to workplaces since Feb. 2020 (%)" let plot = Plot.plot({ grid: false, marginLeft: 135, marginRight: 0, marginBottom: 50, marginTop: 100, width: width*2.35, height: height*2.2+100, inset: 10, x: { // label: "Increase in Work from Home Households (%) →", // className: "axis-x", ticks: 10, }, y: { // label: " Decrease in Travel to workplaces since feb 2020 (%)", // dx:200, // className: "axis-y", domain: [-65, -15], ticks: 10, }, color: { scheme: "YlGn", type: "sequential" // scheme: d3.interpolateLab("#f4d10c", "#2a4200").values // range: d3.quantize(d3.interpolateRgbBasis(["#ffe345", "white", "white", "#203300"]), 100) // interpolate: "lab", }, marks: [ // Plot.rect(ukUpd_tot.filter(d=>+d["Total annual income (£)"]>20000), Plot.bin({fillOpacity: "count"}, { // x: d=>+d["residential_percent_change_from_baseline"], // y: d=>+d["workplaces_percent_change_from_baseline"], // fill: d=>+d["Total annual income (£)"], Plot.dot(ukUpd_tot.filter(d=>+d["Total annual income (£)"]>20000), { // x: d=>+d["Total annual income (£)"], x: d=>+d["residential_percent_change_from_baseline"], y: d=>+d["workplaces_percent_change_from_baseline"], fill: d=>+d["Total annual income (£)"], r: 5, // r: d=>+d["retail_and_recreation_percent_change_from_baseline"]*-1, }), // Plot.text(ukUpd_tot, { // // Plot.text(ukUpd_tot.filter(d=>d["sub_region_1"]==="Blackpool"), { // filter: d => +d["workplaces_percent_change_from_baseline"]===d3.max(ukUpd_tot, d=>+d["workplaces_percent_change_from_baseline"]), // x: d=>+d["residential_percent_change_from_baseline"], // y: d=>+d["workplaces_percent_change_from_baseline"], // // fill: d=>+d["Total annual income (£)"], // text: "sub_region_1", // dx: 35}) Plot.text(ukUpd_tot, { // Plot.text(ukUpd_tot.filter(d=>d["sub_region_1"]==="Blackpool"), { filter: d => (d["borough_abbr"]==="Islington")| (d["borough_abbr"]==="Kensington and Chelsea")| (d["borough_abbr"]==="Wandsworth")| (d["borough_abbr"]==="Richmond Upon Thames")| (d["borough_abbr"]==="Enfield")| (d["borough_abbr"]==="Barking and Dagenham")| (d["borough_abbr"]==="Hackney")| (d["borough_abbr"]==="Wandsworth")| (d["borough_abbr"]==="Hastings")| (d["borough_abbr"]==="Thanet")| (d["borough_abbr"]==="Great Yarmouth")| (d["borough_abbr"]==="Manchester")| (d["borough_abbr"]==="Tower Hamlets"), x: d=>+d["residential_percent_change_from_baseline"], y: d=>+d["workplaces_percent_change_from_baseline"], fill: d=>d["Total annual income (£)"], text: "borough_abbr", dx: 10, textAnchor: "start", fontWeight: "bold" // dy: 10 }) // ) ] }) // d3 selection hack let ylabelStyle = d3 .select(plot) // .selectAll('text:not(.tick)') .select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(yLabel) .attr("font-size", "14") let xlabelStyle = d3 .select(plot) // .selectAll('text:not(.tick)') .select(".tick:first-of-type text").clone() .attr("x", width*2.05) .attr("y", 50) .attr("text-anchor", "end") .attr("font-weight", "bold") .text(xLabel) .attr("font-size", "14") let ticks = d3 .select(plot) .selectAll('.tick') .attr("font-size", "13") // Title let title = d3 .select(plot) .append("text") .attr("class", "FigTitle") .attr("x", 520) .attr("y", 50) .style('font-weight', 400) .attr("text-anchor", "left") .text(`In the Pandemic Era, `) .append('tspan') .style('font-weight', 900) .text('wealthy brits ') .style("fill", "darkgreen") .append('tspan') .style('font-weight', 400) .text("work from home while ") .style("fill", "black") .append('tspan') .style('font-weight', 900) .text("poor brits ") .style("fill", incomeColors("Low Income")) .append('tspan') .style('font-weight', 400) .text("continue to commute") .style("fill", "black") // legend let legendDot = d3 .select(plot) .append("circle") .attr("cx", 200) .attr("cy", height*2) .attr("r", 5) .attr("fill", "None") .attr("stroke", "grey") let legendText = d3 .select(plot) .append("text") .attr("class", "annotation") .attr("x", 260) .attr("y", height*2+4) .style('font-weight', 400) .style('font-size', 13) .attr("fill", "grey") .attr("text-anchor", "left") .text(`= Local Authority`) // let tooltipCircles = d3 // .select(plot) // .selectAll("circle") // .on("mouseover", (event, d) => console.log(d)) return plot }54:T470,html`

Changes in travel to the workplace can also be visualised across all of the UK when considering both time and space. As illustrated below, all of the UK experienced large reductions in mobility to workplaces at the inital start of the COVID-19 pandemic. Following the initial National Lockdown #1, however, the GLA continued to maintain larger reductions in mobility patterns to the workplace when compared to other parts of the UK for the entirety of the pandemic. In contrast, following the initial national lockdown and throughout subsequent lockdown measures, local authority areas outside of the GLA produced less pronounced reductions in their mobility patterns to the workplace. Regardless of lockdown measures, residents of these local authority areas still commuted to the office. Interestingly, residents of the local authority areas within the GLA that were able to reduce their mobility to the workplace more also happen to be, on average, wealthier than residents of the local authority areas that are outside of the GLA and that could not reduce their workplace mobility to the same extent.`55:T2e19,{ // the usual set up const {visWidth, visHeight, margin} = smDimensions; const figMargin = 150 const widthLegend = 100 const legendTicks = 3 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 // income map const ifigScale = 0.5 const ifigWidth = width*2.5 const ifigHeight = visHeight*ifigScale const ifigOffset = 280 const boundWidth = 2 const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right + ifigWidth) .attr('height', visHeight + margin.top + margin.bottom + figMargin); const svgIncome = svg .append("g") .attr("viewBox", [0, 0, colScale.bandwidth(), rowScale.bandwidth()]) // .style("overflow", "visible") .attr('transform', `translate(${visWidth}, ${70})`) const svgLegendMob = svg .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${20}, ${-20})`) const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top+figMargin})`); g.append("text") .attr("class", "legendTitle") .attr("x", -margin.left) .attr("dy", -60) .attr("text-anchor", "left") .text("Mobility change since Feb. 2020 (%)") .attr('transform', `translate(${0}, ${-30})`) // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -130) .style('font-weight', 400) .attr("text-anchor", "left") .text(`Impact of national and regional COVID-19 lockdown measures on `) .append('tspan') .style('font-weight', 900) .text('travel to workplaces ') .style("fill", "#E02685") .append('tspan') .style('font-weight', 400) .text("across the UK") .style("fill", "black") // add a group for each cell and position it according to its row and column const cells = g.selectAll('g') .data(ukUpd_lockdowns.sort((a, b) => d3.ascending(a.date, b.date))) .join('g') .attr('transform', (d, i) => { /* i is the current index in this case, the value of i will be from 0-25. */ // get the row index and column index for this cell const r = Math.floor(i / numberOfCols); const c = i % numberOfCols; // use the scales to get the x, y coordinates return `translate(${colScale(c)}, ${rowScale(r)})`; }); // add a rectangle to each group and make it take up the entire cell // color scales const colorScaleMob = // d3.scaleSequential(d3.interpolateLab("black", "#E02685")) // d3.scaleSequential(d3.quantize(d3.interpolateLab("black", "#E02685"), 3)) d3.scaleQuantile() // .domain([0,-90]) .range(d3.quantize(d3.interpolateLab("#ff309a", "black"), 3)) // .domain([d3.max(ukUpd_lockdowns[1].data, d=>d['transit_stations_percent_change_from_baseline']), // d3.min(ukUpd_lockdowns[1].data, d=>d['transit_stations_percent_change_from_baseline'])]) // .interpolate(d3.interpolateRgb.gamma(2.2)) // .range(d3.interpolateLab("black", "#E02685")) // .range(d3.interpolateLab("red", "blue")) const legendScale = d3.scaleSequential(d3.interpolateLab("black", "#ff309a")) .domain([0, -60]) const toolTipScale = d3.scaleSequential(d3.interpolateLab("white", "#ff309a")) .domain([0, -60]) // Render the hexes var hexes = d3.renderHexJSON(hex_la, colScale.bandwidth(), rowScale.bandwidth()) var boundarySegments = d3.getBoundarySegmentsForHexJSON(hex_la, colScale.bandwidth(), rowScale.bandwidth(), "region"); // var hexes = d3.renderHexJSON(hex_la, 100, 100) // console.log("hexes", hexes) // Bind the hexes to g elements of the svg and position them // colorScaleMob.domain([d3.max(ukUpd_lockdowns[2].data, d=>d['workplaces_percent_change_from_baseline']), // d3.min(ukUpd_lockdowns[2].data, d=>d['workplaces_percent_change_from_baseline'])]) // legend const legendMob = renderLegend(svgLegendMob, legendScale, heightLegend, widthLegend, barHeight, legendTicks, legendMobTickformat, "linear-gradient-mob-lk") // var map = cells // .append("g") // .attr('width', colScale.bandwidth()) // .attr('height', rowScale.bandwidth()) // var basemap = cells.selectAll("g") // .data(hexes) // .join("g") // .attr("transform", function(hex) { // return "translate(" + hex.x + "," + hex.y + ")"; // }) // basemap.append("polygon") // .attr("points", function(hex) {return hex.points;}) // .attr("fill", "lightgrey") // .attr("stroke", "none") var hexmap = cells .append("g") .attr('width', colScale.bandwidth()) .attr('height', rowScale.bandwidth()) .selectAll("g") .data(d=>d.data) .join("g") .attr("transform", function(hex) { if (hex.hex_data !== null) { if (hex.hex_data[0]!==undefined) { // console.log(hex.hex_data[0].x) return "translate(" + (hex.hex_data[0].x + colScale.bandwidth()/6.5) + "," + hex.hex_data[0].y + ")"; } } }); // Draw the polygons around each hex's centre hexmap .append("polygon") // .attr("points", function(hex) {return hex.points;}) .attr("points", function(hex) { if (hex.hex_data !== null) { if (hex.hex_data[0]!==undefined) { // console.log(hex.hex_data[0].x) return hex.hex_data[0].points; } } }) .attr("stroke", "white") .attr("stroke-width", "0.2") .attr("fill", function(d) { // colorScaleMob.domain([0, d.colorDomain[1]]) //// colorScaleMob.domain([d.colorDomain[1], 0]) // colorScaleMob.domain([d.colorDomain[0], -70]) colorScaleMob.domain([-20, -70]) // colorScaleMob.domain(d.colorDomain) return colorScaleMob(d["workplaces_percent_change_from_baseline"]) } ) .attr("class", "hex") .on("mouseover", function(event, d) { // console.log("col", d.colorDomain) console.log("col", d) d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseover.tt", function(event, d) { toolTipScale.domain([0, -90]) return showTooltip(event, d, toolTipScale) }) .on("mouseleave.tt", (event, d) => hideTooltip(event, d)) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.2") // .lower() }) // Draw boundary lines var boundaryLines = cells .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1+ colScale.bandwidth()/6.5;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2+ colScale.bandwidth()/6.5;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // console.log("fill", fill) // console.log("hex", hexmap) // cells.append('rect') // .attr('width', colScale.bandwidth()) // .attr('height', rowScale.bandwidth()) // .attr('fill', 'none') // .attr('stroke', 'red'); // add the list of words to each group cells.append('text') .attr("class", "legendTitle") .style("font-weight", "900") .attr("transform", `translate(${colScale.bandwidth()/2}, ${rowScale.bandwidth()+margin.bottom})`) .attr('text-anchor', 'middle') .text(d => formatYearMonth(d.date) + " ") .append('tspan') .style('font-weight', 400) .text(d=>"("+d.lockdown+")") // .style("fill", "#E02685"); /////// income map // svgIncome.append('rect') // .attr('width', colScale.bandwidth()) // .attr('height', rowScale.bandwidth()) // .attr('fill', 'none') // .attr('stroke', 'red'); const colorScaleInc = d3.scaleSequential(d3.interpolateLab("#f4d10c", "#203300")) .domain(d3.extent(ukUpd_tot, d=>d["Total annual income (£)"])).nice() // Render the hexes var hexesInc = d3.renderHexJSON(hex_la, colScale.bandwidth()*0.8, rowScale.bandwidth()*0.8) var boundarySegmentsInc = d3.getBoundarySegmentsForHexJSON(hex_la, colScale.bandwidth()*0.8, rowScale.bandwidth()*0.8, "region"); // Bind the hexes to g elements of the svg and position them // colorScaleMob.domain([d3.max(ukUpd_tot, d=>d['workplaces_percent_change_from_baseline']),d3.min(ukUpd_tot, d=>d['workplaces_percent_change_from_baseline'])]) var hexmapInc = svgIncome .selectAll("g") .data(hexesInc) .join("g") .attr("transform", function(hex) { return "translate(" + (hex.x + colScale.bandwidth()/6.5) + "," + hex.y + ")"; }); // svg // .append("text") // .attr("class", "legendTitle") // .attr("x", figOffset/2) // .attr("y", figHeight+marginBottom/2) // .attr("text-anchor", "middle") // .text("Travel to Workplaces") // .style("font-weight", 900) // Draw the polygons around each hex's centre hexmapInc .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.2") .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined ? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === null? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === undefined ? "#ccc": colorScaleInc(ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.2") // .lower() }) // legend of income legend const svgLegendInc = svgIncome .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${(colScale.bandwidth()*0.8)/3.1}, ${(rowScale.bandwidth()*0.8)/2})`) const legendInc = renderLegend(svgLegendInc, colorScaleInc, heightLegend, widthLegend, barHeight, 4, legendIncTickformat, "linear-gradient-inc-sm") svgIncome.append("text") .attr("class", "legendTitle") .attr("x", -margin.left) .attr("dy", -30) .attr("text-anchor", "left") .text("Household Income") .attr('transform', `translate(${(colScale.bandwidth()*0.8)/2.5}, ${(rowScale.bandwidth()*0.8)+50})`) var boundaryLines = svgIncome .selectAll("g.lines") .data(boundarySegmentsInc) .enter() .append("line") .attr("x1", function(d) { return d.x1+ colScale.bandwidth()/6.5;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2+ colScale.bandwidth()/6.5;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); return svg.node(); }56:T180a,hexIndex = { // Create the svg element const marginTop = 110 const figScale = 2.1 const figWidth = width*2.5 const figHeight = height*figScale const boundWidth = 4 const grid = d3.select(DOM.svg(figWidth, figHeight+marginTop)); const svg = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${0}, ${marginTop+20})`) // annotations const g = grid.append("g") .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -100) .style('font-weight', 400) .attr("text-anchor", "left") .text(`Spatial distribution of the `) .append('tspan') .style('font-weight', 900) .text('most socially impacted ') .style("fill", "#9c75b4") .append('tspan') .style('font-weight', 400) .text('and ') .style("fill", "black") .append('tspan') .style('font-weight', 900) .text('least socially impacted ') .style("fill", "#cbb35c") .append('tspan') .style('font-weight', 400) .text("Local Authority Areas across the UK") .style("fill", "black") const subtitle = g.append("text") .attr("class", "FigSubtitle") .attr("x", -margin.left) // .attr("dy", -70) .style("text-anchor", "start") .text("This figure illustrates the relationship between household income and the intensity in travel to workplaces over the course of the COVID-19 pandemic. In this map, areas coloured in gold represent areas that are both high income and that experienced lower levels of travel to workplaces throughout the pandemic. Here, residents of these wealthier areas were able to successfully reduce their mobility and adopt a work-from-home lifestyle. In contrast, areas coloured in purple represent areas that are both low income and that experienced higher levels of travel to workplaces throughout the pandemic. Residents of these poorer areas were not able to reduce their mobility as much, and they continued to commute to work. Finally, shades of brown represent (the few) local authorities that are both high income and that experienced higher levels of travel to workplaces throughout the pandemic. Regardless of the wealthy status of these areas, residents continued to commute to work.") // subtitle // .each(function(d, i) { wrap_text(d3.select(this), figWidth-500) }); .call(textWrapper, 200) .attr('transform', `translate(${-margin.left}, ${-40})`) // color of hexes // income const colorScale = mapMetric === "Total annual income (£)"? d3.scaleSequential(d3.interpolateLab("#385704", "#f4c20c")) .domain(colorDomainInc): d3.scaleSequential(d3.interpolateLab("black", "#E02685")) .domain(colorDomainMob); // Render the hexes var hexes = d3.renderHexJSON(hex_la, figWidth, figHeight) var boundarySegments = d3.getBoundarySegmentsForHexJSON(hex_la, width, height*figScale, "region"); // Bind the hexes to g elements of the svg and position them var hexmap = svg .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg.append(legendIndex) // .attr("transform", `translate(550, 500)`); .attr("transform", `rotate(45), translate(${figWidth/1.4},${-90})`); // Draw the polygons around each hex's centre hexmap .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) // .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": // colorScale(ukUpd_tot.filter(c=>c.area_code===d.key)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined ? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === null? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === undefined ? "#ccc": colorBivar(ukUpd_tot_map.get(d.key))) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // d3.selectAll(".hex") // .on("mouseover", function(event, d) {d3.select(this).attr("stroke-width", "3")}) // .on("mouseover", (event, d) => d3.select(this).attr("stroke-width", "3")) // .on("mousemove", (event, d) => d3.select(this).attr("stroke-width", "3")) // .on("mouseout", (event, d) => d3.select(this).attr("stroke-width", "1")) // .attr("fill", "#b0e8f0"); // Add the hex codes as labels hexmap .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr('font-size', 3*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); // Draw boundary lines var boundaryLines = svg .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // return grid.node(); }57:T15d6,viewof selection = { const widthLegend = 100 const legendTicks = 4 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height+20]) .property("value", []) .attr('transform', `translate(${0}, ${20})`); // const brush = d3.brush() // .on("start brush end", brushed); svg.append("g") .call(xAxisScatter) .attr("class", "AxisBig"); svg.append("g") .call(yAxisScatter) .attr("class", "AxisBig"); const svgLegendInc = svg .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) .attr('transform', `scale(0.4), translate(${1000}, ${10})`) svgLegendInc.append("text") .attr("class", "legendTitle") // .attr("x", -margin.left) // .attr("dy", -30) .attr("text-anchor", "left") .text("2020 Household Income") .attr('transform', `translate(${0}, ${90})`) // Title svgLegendInc.append("text") .attr("class", "FigTitle") .attr("x", -width*1.8) .attr("y", 3.8) .style('font-weight', 400) .attr("text-anchor", "left") .text(`In the Pandemic Era, `) .append('tspan') .style('font-weight', 900) .text('wealthy brits ') .style("fill", "#4e7a00") .append('tspan') .style('font-weight', 400) .text("work from home while ") .style("fill", "black") .append('tspan') .style('font-weight', 900) .text("poor brits ") .style("fill", incomeColors("Low Income")) .append('tspan') .style('font-weight', 400) .text("continue to commute") .style("fill", "black") // color of dots // const colorScale = d3.scaleSequential(d3.interpolateLab("#f4c20c", "#385704")) const colorScale = d3.scaleSequential(d3.interpolateLab("#ffe345", "#203300")) .domain(d3.extent(ukUpd_tot, d=>d["Total annual income (£)"])).nice() const circles = svg.append("g") .attr("fill", "none") // .attr("stroke", "steelblue") .attr("stroke-width", 0.6) .attr("opacity", 0.7) .selectAll("circle") .data(boroughIncMob.filter(d=>d.tot_mobility>-60)) const dot = circles.join("circle") .attr("transform", d => `translate(${xScaleIncome(d["Total annual income (£)"])},${yScaleTotMob(d[metric])})`) .attr("r", 2.5) // .attr("stroke", d=>colorScale(d["Total annual income (£)"])) .attr("stroke", "white") .attr("fill", d=>colorScale(d["Total annual income (£)"])); const text = circles.join('text') .attr("x", d =>xScaleIncome(d["Total annual income (£)"])+8) .attr("y", d => yScaleTotMob(d[metric])) .attr('class', 'annotation') .attr('fill', d=>colorScale(+d["Total annual income (£)"])) // .text(d=>(d["city"]==="Greater London")?d.borough_abbr:"") .text(d=>(d["borough_abbr"]==="Islington")| (d["borough_abbr"]==="Kensington and Chelsea")| (d["borough_abbr"]==="Wandsworth")| (d["borough_abbr"]==="Richmond Upon Thames")| (d["borough_abbr"]==="Enfield")| // (d["borough_abbr"]==="Barking and Dagenham")| (d["borough_abbr"]==="Hackney")| (d["borough_abbr"]==="Wandsworth")| // (d["borough_abbr"]==="Hastings")| // (d["borough_abbr"]==="Thanet")| (d["borough_abbr"]==="Great Yarmouth")| (d["borough_abbr"]==="Manchester")?d.borough_abbr:"") dot.on("mouseover", (event, d) => { d3.selectAll(dot).attr("opacity", 0.2) d3.selectAll(text).attr("opacity", 0.2) dot.filter(c=>c.borough_abbr === d.borough_abbr).attr("opacity", 1) circles .join('text') .attr("x", d =>xScaleIncome(d["Total annual income (£)"])+8) .attr("y", d => yScaleTotMob(d[metric])) .attr('class', 'annotation') .attr("font-weight", 900) .attr('fill', d=> colorScale(+d["Total annual income (£)"])) // .text(d=>(d["city"]==="Greater London")?d.borough_abbr:"") .text(c=>c["borough_abbr"]===d.borough_abbr?d.borough_abbr:"") .attr("id", "ttipAnnot").raise() } ) dot.on("mouseleave", (event, d) => { d3.selectAll(dot).attr("opacity", 1) d3.selectAll(text).attr("opacity", 1) d3.selectAll("#ttipAnnot").remove() } ) const legendInc = renderLegend(svgLegendInc, colorScale, heightLegend, widthLegend, barHeight, legendTicks, legendIncTickformat, "linear-gradient-inc") // svg.call(brush); // function brushed({selection}) { // let value = []; // if (selection) { // const [[x0, y0], [x1, y1]] = selection; // value = dot // .style("stroke", "gray") // .filter(d => x0 <= xScaleIncome(d["Total annual income (£)"]) && xScaleIncome(d["Total annual income (£)"]) < x1 && y0 <= yScaleTotMob(d[metric]) && yScaleTotMob(d[metric]) < y1) // .style("stroke", "steelblue") // .data(); // } else { // dot.style("stroke", "steelblue"); // } // svg.property("value", value).dispatch("input"); // } // return svg.node(); }58:Tdcf,UKMap = { const figWidth = width*1.1 const figHeight = height*1.1 const svg = d3.create("svg").attr("viewBox", [0, 0, figWidth, figHeight]); const widthLegend = 100 const legendTicks = 4 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 const boundWidth = 3 // color scales // income const colorScaleInc = d3.scaleSequential(d3.interpolateLab("#f4d10c", "#203300")) .domain(d3.extent(ukUpd_tot, d=>d["Total annual income (£)"])).nice() // const colorScaleInc = // d3.scaleSequential(d3.interpolatePiYG) // .domain(colorDomainInc) const colorScaleMob = d3.scaleSequential(d3.interpolateLab("black", "#E02685")) .domain([d3.max(ukUpd_tot, d=>d['workplaces_percent_change_from_baseline']),d3.min(ukUpd_tot, d=>d['workplaces_percent_change_from_baseline'])]).nice() const colorScalePop = d3.scaleSequential(d3.interpolateLab("white", "darkred")) // .domain(d3.extent(ukUpd_tot, d=>d["pop"])).nice() .domain([5000, 350000]).nice() //fill svg.append("g") .selectAll("path") .data(ukGeo.features) .join("path") .attr("class", "localAuthority") .attr("fill", "lightgrey") .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.properties.geo_code)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot.filter(c=>c.area_code===d.properties.geo_code)[0]["workplaces_percent_change_from_baseline"])) // .attr("fill", d => colourScale(geoCodeToAge.get(d.properties.geo_code))) .attr("d", gPath) //stroke svg.append("path") .datum(topojson.mesh(uk, uk.objects.infuse_dist_lyr_2011, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width","0.15px") .attr("stroke-linejoin", "round") .attr("d", gPath); //tooltip const tooltip = svg.append("g"); // legend const svgLegendMob = svg .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `scale(0.4) translate(${20}, ${-20})`) svg.append("g") .append("text") .attr("class", "legendTitle") .attr("x", -margin.left) .attr("dy", 25) .attr("text-anchor", "left") .text("Mobility change since Feb. 2020 (%)") // .attr("font-size", 5) .attr('transform', `scale(0.4) translate(${70}, ${45})`) const legendMob = renderLegend(svgLegendMob, colorScaleMob, heightLegend, widthLegend, barHeight, legendTicks, legendMobTickformat, "linear-gradient-mob-ar") // svg // .selectAll(".localAuthority") // .on("touchmove mousemove", function(event, d) { // tooltip.call( // callout, // `${geoCodeToAge.get(d.properties.geo_code)} ${d.properties.name}` // ); // tooltip.attr("transform", `translate(${d3.pointer(event, this)})`); // d3.select(this) // .attr("stroke", "white") // .attr("stroke-width","1.0px") // .raise(); // }) // .on("touchend mouseleave", function() { // tooltip.call(callout, null); // d3.select(this) // .attr("stroke", null) // .lower(); // }); // //legend // svg.append("g") // .attr("transform", "translate(40,40)") // .append(() => legend({color: colourScale, title: "Average age", width: 250})); // return svg.node(); }59:T1b73,{ // 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}

` }5a:T3001,hexmap_mob_holiday2 = { // Create the svg element const figScale = 1.2 const figWidth = width*2.5 const figHeight = height*figScale const figOffset = 500 const subPlotMargin = 20 const marginTop = 100 const marginBottom = 30 const widthLegend = 100 const legendTicks = 4 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 const boundWidth = 3 const grid = d3.select(DOM.svg(figWidth, figHeight*2+marginTop+marginBottom+subPlotMargin)); const svg5 = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${0}, ${marginTop})`) // const svg2 = grid // .append("g") // .attr("viewBox", [0, 0, figWidth, figHeight]) // // .style("overflow", "visible") // .attr('transform', `translate(${figOffset}, ${marginTop})`) const svg = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset}, ${marginTop})`) const svg4 = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${0}, ${figHeight+marginTop+subPlotMargin})`) const svg3 = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset}, ${figHeight+marginTop+subPlotMargin})`) const svgLegendMob = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset*1.18}, ${-30})`) const svgLegendCovid = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${70}, ${-30})`) // annotations const g = grid.append("g") .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); g.append("text") .attr("class", "legendTitle") .attr("x", figOffset) .attr("dy", -30) .attr("text-anchor", "left") .text("Change in mobility compared to baseline (%)") .attr('transform', `translate(${0}, ${-20})`) g.append("text") .attr("class", "legendTitle") .attr("x", -20) .attr("dy", -30) .attr("text-anchor", "left") .text("Number of new COVID-19 cases") .attr('transform', `translate(${0}, ${-20})`) // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -100) .style('font-weight', 400) .attr("text-anchor", "left") .text(`Change in `) .append('tspan') .style('font-weight', 900) .text('mobility to retail spaces ') .style("fill", "#E02685") .append('tspan') .style('font-weight', 400) .text("during the 2020 and 2021 december holiday seasons across the") .style("fill", "black") .append('tspan') .style('font-weight', 900) .text(" UK") .style("fill", "black") // g.append("line") // .attr("x1", -margin.left) // .attr("x2", -20) // .attr("y1", -75) // .attr("y2", -75) // .attr("stroke", "black") // color scales const colorScaleMob = d3.scaleSequential(d3.interpolateLab("black", "#E02685")) .domain([0,-60]) const colorScaleCovid = d3.scaleSequential(d3.interpolateLab("white", "#9D1A5F")) .domain([0, 5000]) // .domain(d3.extent(Array.from(ukCovidApiLoa2020.values()))) // .domain([0, d3.max(Array.from(ukCovidApiLoa2021.values()))]) // legends const legendMob = renderLegend(svgLegendMob, colorScaleMob, heightLegend, widthLegend, barHeight, legendTicks, legendMobTickformat, "linear-gradient-mob-cat") const legendCovid = renderLegend(svgLegendCovid, colorScaleCovid, heightLegend, widthLegend, barHeight, legendTicks, legendIncTickformat, "linear-gradient-covid-cat") // Render the hexes var hexes = d3.renderHexJSON(hex_la, figWidth, figHeight) var boundarySegments = d3.getBoundarySegmentsForHexJSON(hex_la, figWidth, figHeight, "region"); // maps // Bind the hexes to g elements of the svg and position them var hexmap = svg .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg .append("text") .attr("class", "legendTitle") .attr("x", figOffset/3) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("Dec. 2021 Mobility to Retail") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot_dec_2021.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot_dec_2021.filter(c=>c.area_code===d.key)[0]["retail_and_recreation_percent_change_from_baseline"])) .attr("class", "hex") // .append("svg:title") // .text(function(d, i) { return d; }); .on("mouseover", function(event, d) { // console.log(d) d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // 2020 mob // Bind the hexes to g elements of the svg and position them var hexmap_t = svg3 .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg3 .append("text") .attr("class", "legendTitle") .attr("x", figOffset/3) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("Dec. 2020 Mobility to Retail") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap_t .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot_dec_2020.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot_dec_2020.filter(c=>c.area_code===d.key)[0]["retail_and_recreation_percent_change_from_baseline"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // residential // Array.from(ukCovidApiLoa2020.values()) // Bind the hexes to g elements of the svg and position them var hexmap_ret = svg4 .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg4 .append("text") .attr("class", "legendTitle") .attr("x", figOffset/3) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("Dec. 2020 COVID-19 Cases") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap_ret .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", "grey") .attr("fill", d => ukCovidApiLoa2020.get(d.key) === undefined? "#ccc": colorScaleCovid(ukCovidApiLoa2020.get(d.key))) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) //covid 2021 // Bind the hexes to g elements of the svg and position them var hexmap_g = svg5 .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg5 .append("text") .attr("class", "legendTitle") .attr("x", figOffset/3) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("Dec. 2021 COVID-19 Cases") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap_g .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukCovidApiLoa2021.get(d.key) === undefined? "#ccc": colorScaleCovid(ukCovidApiLoa2021.get(d.key))) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // Draw boundary lines var boundaryLines = svg .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // Draw boundary lines var boundaryLines = svg3 .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // Draw boundary lines var boundaryLines = svg4 .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // Draw boundary lines var boundaryLines = svg5 .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); return grid.node() }5b:T3949,hexmap_mob_holiday_london = { // Create the svg element const figScale = 4.8 const figWidth = width*2.5 const figHeight = height*figScale const figOffset = 500 const subPlotMargin = 20 const marginTop = 100 const marginBottom = 30 const widthLegend = 100 const legendTicks = 4 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 const boundWidth = 3 const grid = d3.select(DOM.svg(figWidth, height*2.2+marginTop+marginBottom+subPlotMargin)); const svg5 = grid .append("g") .attr("viewBox", [0, 0, figWidth, height]) // .style("overflow", "visible") .attr('transform', `translate(${-650}, ${-900})`) // const svg2 = grid // .append("g") // .attr("viewBox", [0, 0, figWidth, figHeight]) // // .style("overflow", "visible") // .attr('transform', `translate(${figOffset}, ${marginTop})`) const svg = grid .append("g") .attr("viewBox", [0, 0, figWidth, height]) // .style("overflow", "visible") .attr('transform', `translate(${-650/3}, ${-900})`) const svg4 = grid .append("g") .attr("viewBox", [0, 0, figWidth, height]) // .style("overflow", "visible") .attr('transform', `translate(${-650}, ${-900/1.6})`) const svg3 = grid .append("g") .attr("viewBox", [0, 0, figWidth, height]) // .style("overflow", "visible") .attr('transform', `translate(${-650/3}, ${-900/1.6})`) const svgLegendMob = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset*1.18}, ${-30})`) const svgLegendCovid = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${70}, ${-30})`) // annotations const g = grid.append("g") .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); g.append("text") .attr("class", "legendTitle") .attr("x", figOffset) .attr("dy", -30) .attr("text-anchor", "left") .text("Change in mobility compared to baseline (%)") .attr('transform', `translate(${0}, ${-20})`) g.append("text") .attr("class", "legendTitle") .attr("x", -20) .attr("dy", -30) .attr("text-anchor", "left") .text("Number of new COVID-19 cases") .attr('transform', `translate(${0}, ${-20})`) // annotations g .append("text") .attr("class", "legendTitle") .attr("x", figOffset/3) .attr("y", height+marginBottom) .attr("text-anchor", "middle") .text("Dec. 2021 COVID-19 Cases") .style("font-weight", 900) g .append("text") .attr("class", "legendTitle") .attr("x", figOffset/3) .attr("y", height*2+marginBottom*2) .attr("text-anchor", "middle") .text("Dec. 2020 COVID-19 Cases") .style("font-weight", 900) g .append("text") .attr("class", "legendTitle") .attr("x", figOffset*1.15) .attr("y", height+marginBottom) .attr("text-anchor", "middle") .text("Dec. 2021 Mobility to Retail") .style("font-weight", 900) g .append("text") .attr("class", "legendTitle") .attr("x", figOffset*1.15) .attr("y", height*2+marginBottom*2) .attr("text-anchor", "middle") .text("Dec. 2020 Mobility to Retail") .style("font-weight", 900) // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -100) .style('font-weight', 400) .attr("text-anchor", "left") .text(`Change in `) .append('tspan') .style('font-weight', 900) .text('mobility to retail spaces ') .style("fill", "#E02685") .append('tspan') .style('font-weight', 400) .text("during the 2020 and 2021 december holiday seasons across") .style("fill", "black") .append('tspan') .style('font-weight', 900) .text(" London") .style("fill", "black") // g.append("line") // .attr("x1", -margin.left) // .attr("x2", -20) // .attr("y1", -75) // .attr("y2", -75) // .attr("stroke", "black") // color scales const colorScaleMob = d3.scaleSequential(d3.interpolateLab("black", "#E02685")) .domain([0,-80]) const colorScaleCovid = d3.scaleSequential(d3.interpolateLab("white", "#9D1A5F")) .domain([0, 10000]) // .domain(d3.extent(Array.from(ukCovidApiLoa2020.values()))) // .domain([0, d3.max(Array.from(ukCovidApiLoa2021.values()))]) // legends const legendMob = renderLegend(svgLegendMob, colorScaleMob, heightLegend, widthLegend, barHeight, legendTicks, legendMobTickformat, "linear-gradient-mob-cat") const legendCovid = renderLegend(svgLegendCovid, colorScaleCovid, heightLegend, widthLegend, barHeight, legendTicks, legendIncTickformat, "linear-gradient-covid-cat") // Render the hexes var hexes = d3.renderHexJSON(hex_la, figWidth, figHeight).filter(d=>boroughMob.map(c=>c.code).includes(d.key)) // var boundarySegments = d3.getBoundarySegmentsForHexJSON(hex_la, figWidth, figHeight, "region"); // maps // Bind the hexes to g elements of the svg and position them var hexmap = svg .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); // svg // .append("text") // .attr("class", "legendTitle") // .attr("x", figOffset/3) // .attr("y", height+marginBottom/2) // .attr("text-anchor", "middle") // .text("2021 Retail") // .style("font-weight", 900) // .attr('transform', `translate(${-100}, ${-900})`) // Draw the polygons around each hex's centre hexmap .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "2.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot_dec_2021.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot_dec_2021.filter(c=>c.area_code===d.key)[0]["retail_and_recreation_percent_change_from_baseline"])) .attr("class", "hex") // .append("svg:title") // .text(function(d, i) { return d; }); .on("mouseover", function(event, d) { // console.log(d) d3.select(this) .attr("stroke-width", "4") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "2.5") // .lower() }) // Add the hex codes as labels hexmap .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr("font-weight", "bold") .attr('font-size', 2.5*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); // 2020 mob // Bind the hexes to g elements of the svg and position them var hexmap_t = svg3 .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg3 .append("text") .attr("class", "legendTitle") .attr("x", figOffset/3) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("2020 Retail") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap_t .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "2.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot_dec_2020.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot_dec_2020.filter(c=>c.area_code===d.key)[0]["retail_and_recreation_percent_change_from_baseline"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "4") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "2.5") // .lower() }) // Add the hex codes as labels hexmap_t .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr("font-weight", "bold") .attr('font-size', 2.5*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); // Array.from(ukCovidApiLoa2020.values()) // Bind the hexes to g elements of the svg and position them var hexmap_ret = svg4 .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg4 .append("text") .attr("class", "legendTitle") .attr("x", figOffset/3) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("2020 COVID") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap_ret .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "2.5") // .attr("fill", "grey") .attr("fill", d => ukCovidApiLoa2020.get(d.key) === undefined? "#ccc": colorScaleCovid(ukCovidApiLoa2020.get(d.key))) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "4") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "2.5") // .lower() }) // Add the hex codes as labels hexmap_ret .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr("font-weight", "bold") .attr('font-size', 2.5*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); //covid 2021 // Bind the hexes to g elements of the svg and position them var hexmap_g = svg5 .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg5 .append("text") .attr("class", "legendTitle") .attr("x", figOffset/3) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("2021 COVID") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap_g .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "2.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukCovidApiLoa2021.get(d.key) === undefined? "#ccc": colorScaleCovid(ukCovidApiLoa2021.get(d.key))) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "4") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "2.5") // .lower() }) // Add the hex codes as labels hexmap_g .append("text") // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr("font-weight", "bold") .attr('font-size', 2.5*figScale) .attr('fill', 'rgb(255,255,255)') .text(function(hex) {return hex.n.slice(0,3);}); // // Draw boundary lines // var boundaryLines = svg // .selectAll("g.lines") // .data(boundarySegments) // .enter() // .append("line") // .attr("x1", function(d) { return d.x1;}) // .attr("y1", function(d) { return d.y1;}) // .attr("x2", function(d) { return d.x2;}) // .attr("y2", function(d) { return d.y2;}) // .attr("stroke", "white") // .attr("stroke-width", showBounds==="0"?0:boundWidth) // .attr("stroke-linecap", "round") // .attr("fill", "none"); // // Draw boundary lines // var boundaryLines = svg3 // .selectAll("g.lines") // .data(boundarySegments) // .enter() // .append("line") // .attr("x1", function(d) { return d.x1;}) // .attr("y1", function(d) { return d.y1;}) // .attr("x2", function(d) { return d.x2;}) // .attr("y2", function(d) { return d.y2;}) // .attr("stroke", "white") // .attr("stroke-width", showBounds==="0"?0:boundWidth) // .attr("stroke-linecap", "round") // .attr("fill", "none"); // // Draw boundary lines // var boundaryLines = svg4 // .selectAll("g.lines") // .data(boundarySegments) // .enter() // .append("line") // .attr("x1", function(d) { return d.x1;}) // .attr("y1", function(d) { return d.y1;}) // .attr("x2", function(d) { return d.x2;}) // .attr("y2", function(d) { return d.y2;}) // .attr("stroke", "white") // .attr("stroke-width", showBounds==="0"?0:boundWidth) // .attr("stroke-linecap", "round") // .attr("fill", "none"); // // Draw boundary lines // var boundaryLines = svg5 // .selectAll("g.lines") // .data(boundarySegments) // .enter() // .append("line") // .attr("x1", function(d) { return d.x1;}) // .attr("y1", function(d) { return d.y1;}) // .attr("x2", function(d) { return d.x2;}) // .attr("y2", function(d) { return d.y2;}) // .attr("stroke", "white") // .attr("stroke-width", showBounds==="0"?0:boundWidth) // .attr("stroke-linecap", "round") // .attr("fill", "none"); return grid.node() }5c:T53e,// html`

// The Social Cost of the pandemic: Wealthy Brits Work From Home While Poor Brits Continue To Commute //

This figure illustrates the relationship between household income and the intensity in travel to workplaces over the course of the COVID-19 pandemic. In this map, areas coloured in gold represent areas that are both high income and that experienced lower levels of travel to workplaces throughout the pandemic. Here, residents of these wealthier areas were able to successfully reduce their mobility and adopt a work-from-home lifestyle. In contrast, areas coloured in purple represent areas that are both low income and that experienced higher levels of travel to workplaces throughout the pandemic. Residents of these poorer areas were not able to reduce their mobility as much, and they continued to commute to work. Finally, shades of brown represent (the few) local authorities that are both high income and that experienced higher levels of travel to workplaces throughout the pandemic. Regardless of the wealthy status of these areas, residents continued to commute to work.

// `5d:T2a7a,hexIndexAn = { // Create the svg element const marginTop = 0 const marginBottom = 40 const marginLeft = 100 // const figScale = 2.1 // const figWidth = width // const figHeight = height*figScale const figWidth = 850 const scatterWidth = figWidth-100 const figHeight = 600 const radius = 10//9.8 const boundWidth = 4 const fontSize = 6.5 const yVar = "mobilityWork" const xVar = "mobilityRes" const xVarLabel = "Average Change in Work From Home Households Since Feb. 2020" const yVarLabel = "Average Change in People Going to Workplaces Since Feb. 2020" const grid = d3.select(DOM.svg(figWidth, figHeight+marginTop+marginBottom)); const svg = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${0}, ${marginTop})`) grid.append(legendIndex) // .attr("transform", `translate(550, 500)`); .attr("transform", `rotate(45), translate(${figWidth+100},${-180})`); // annotations // const g = grid.append("g") // .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); // // annotations // const g = grid.append("g") // .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); // // Title // g.append("text") // .attr("class", "FigTitle") // .attr("x", -margin.left) // .attr("y", -100) // .style('font-weight', 400) // .attr("text-anchor", "left") // .text(`Work From Home: `) // .append('tspan') // .style('font-weight', 900) // .text('most socially impacted ') // .style("fill", "#9c75b4") // .append('tspan') // .style('font-weight', 400) // .text('and ') // .style("fill", "black") // .append('tspan') // .style('font-weight', 900) // .text('least socially impacted ') // .style("fill", "#cbb35c") // .append('tspan') // .style('font-weight', 400) // .text("Local Authority Areas across the UK") // .style("fill", "black") // const subtitle = g.append("text") // .attr("class", "FigSubtitle") // .attr("x", -margin.left) // // .attr("dy", -70) // .style("text-anchor", "start") // .text("This figure illustrates the relationship between household income and the intensity in travel to workplaces over the course of the COVID-19 pandemic. In this map, areas coloured in gold represent areas that are both high income and that experienced lower levels of travel to workplaces throughout the pandemic. Here, residents of these wealthier areas were able to successfully reduce their mobility and adopt a work-from-home lifestyle. In contrast, areas coloured in purple represent areas that are both low income and that experienced higher levels of travel to workplaces throughout the pandemic. Residents of these poorer areas were not able to reduce their mobility as much, and they continued to commute to work. Finally, shades of brown represent (the few) local authorities that are both high income and that experienced higher levels of travel to workplaces throughout the pandemic. Regardless of the wealthy status of these areas, residents continued to commute to work.") // .call(textWrapper, 200) // .attr('transform', `translate(${-margin.left}, ${-40})`) // color of hexes // income // const colorScale = mapMetric === "Total annual income (£)"? // d3.scaleSequential(d3.interpolateLab("#385704", "#f4c20c")) // .domain(colorDomainInc): // d3.scaleSequential(d3.interpolateLab("black", "#E02685")) // .domain(colorDomainMob); // Render the hexes var hexes = d3.renderHexJSON(hex_la, figWidth, figHeight).map(d=> ({ ...d, income: (ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined)|| (ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === null)|| (ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === undefined)?null: ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"], mobilityWork: (ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined)|| (ukUpd_tot.filter(c=>c.area_code===d.key)[0]["workplaces_percent_change_from_baseline"] === null)|| (ukUpd_tot.filter(c=>c.area_code===d.key)[0]["workplaces_percent_change_from_baseline"] === undefined)?null: ukUpd_tot.filter(c=>c.area_code===d.key)[0]["workplaces_percent_change_from_baseline"], mobilityRes: (ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined)|| (ukUpd_tot.filter(c=>c.area_code===d.key)[0]["residential_percent_change_from_baseline"] === null)|| (ukUpd_tot.filter(c=>c.area_code===d.key)[0]["residential_percent_change_from_baseline"] === undefined)?null: ukUpd_tot.filter(c=>c.area_code===d.key)[0]["residential_percent_change_from_baseline"] })) // var boundarySegments = d3.getBoundarySegmentsForHexJSON(hex_la, figWidth, figHeight, "region"); const xScaleInc = d3.scaleLinear() .domain(d3.extent(hexes, d => d[xVar])).nice() .range([margin.left, scatterWidth - margin.right]) const yScaleMob = d3.scaleLinear() .domain(d3.extent(hexes, d => d[yVar])).nice() .range([figHeight - margin.bottom, margin.top]) const xAxis = g => g .attr("transform", `translate(0,${figHeight - margin.bottom})`) .call(d3.axisBottom(xScaleInc)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", scatterWidth - margin.right) .attr("y", 30) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text(xVarLabel)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScaleMob)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(yVarLabel)) // Bind the hexes to g elements of the svg and position them var hexmap = svg .selectAll("g") .data(hexes) .join("g") // .attr("transform", function(hex) { // return "translate(" + hex.x + "," + hex.y + ")"; // }); // Draw the polygons around each hex's centre const circles = hexmap .append("circle") .attr("cx", function(hex) {return hex.x;}) .attr("cy", function(hex) {return hex.y;}) .attr("r", radius) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) // .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": // colorScale(ukUpd_tot.filter(c=>c.area_code===d.key)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined ? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === null? "#ccc": ukUpd_tot.filter(c=>c.area_code===d.key)[0]["Total annual income (£)"] === undefined ? "#ccc": colorBivar([d.mobilityWork, d.income])) .attr("class", "laCircle") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // d3.selectAll(".hex") // .on("mouseover", function(event, d) {d3.select(this).attr("stroke-width", "3")}) // .on("mouseover", (event, d) => d3.select(this).attr("stroke-width", "3")) // .on("mousemove", (event, d) => d3.select(this).attr("stroke-width", "3")) // .on("mouseout", (event, d) => d3.select(this).attr("stroke-width", "1")) // .attr("fill", "#b0e8f0"); // Add the hex codes as labels const annot = hexmap .append("text") .attr("x", function(hex) {return hex.x;}) .attr("y", function(hex) {return hex.y;}) // .append("tspan") .attr("text-anchor", "middle") .attr('class', 'LStextUK') .attr('font-size', fontSize) // .attr('font-size', 3*figScale) .attr('fill', 'rgb(255,255,255)') .attr("z-index", 10) .text(function(hex) {return hex.n.slice(0,3);}); d3.select("#chartView").on("change", function(select){ var view = d3.select("#chartView").node().value console.log(view) if (view==="chart") { svg.append("g") .call(xAxis) .attr("class", "AxisLAN"); svg.append("g") .call(yAxis) .attr("class", "AxisLAN"); circles .transition() .duration(750) .ease(d3.easeLinear) .attr("cx", d => xScaleInc(d[xVar])) .attr("cy", d=> yScaleMob(d[yVar])) // .attr("transform", function(hex) { // return "translate(" + (-hex.x) + "," + (-hex.y) + ")"; // }) .attr("r", radius/1.5) .attr("opacity", d=>d.income!==null?1:0) annot .transition() .duration(750) .ease(d3.easeLinear) .attr("cx", d => xScaleInc(d[xVar])) .attr("cy", d=> yScaleMob(d[yVar])) .attr("opacity", 0) // .attr("transform", d => `translate(${xScaleIncome(d["income"])}, // ${yScaleTotMob(d["workplaces_percent_change_from_baseline"])})`) // .attr("r", 2.5) } else if (view==="map"){ svg.selectAll(".AxisLAN").remove() circles .transition() .duration(750) .ease(d3.easeLinear) // .attr("transform", function(hex) { // return "translate(" + hex.x + "," + hex.y + ")"; // }) .attr("cx", function(hex) {return hex.x;}) .attr("cy", function(hex) {return hex.y;}) .attr("r", radius) .attr("opacity", 1) annot .transition() .duration(750) .ease(d3.easeLinear) // .attr("transform", function(hex) { // return "translate(" + hex.x + "," + hex.y + ")"; // }) .attr("x", function(hex) {return hex.x;}) .attr("y", function(hex) {return hex.y;}) .attr("opacity", 1) } }) // return grid.node(); }5e:T1659,animatedChart = { const widthLegend = 100 const legendTicks = 4 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height+20]) .property("value", []) .attr('transform', `translate(${0}, ${20})`); // const brush = d3.brush() // .on("start brush end", brushed); svg.append("g") .call(xAxisScatter) .attr("class", "AxisBig"); svg.append("g") .call(yAxisScatter) .attr("class", "AxisBig"); const svgLegendInc = svg .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) .attr('transform', `scale(0.4), translate(${1000}, ${10})`) svgLegendInc.append("text") .attr("class", "legendTitle") // .attr("x", -margin.left) // .attr("dy", -30) .attr("text-anchor", "left") .text("2020 Household Income") .attr('transform', `translate(${0}, ${90})`) // Title svgLegendInc.append("text") .attr("class", "FigTitle") .attr("x", -width*1.8) .attr("y", 3.8) .style('font-weight', 400) .attr("text-anchor", "left") .text(`In the Pandemic Era, `) .append('tspan') .style('font-weight', 900) .text('wealthy brits ') .style("fill", "#4e7a00") .append('tspan') .style('font-weight', 400) .text("work from home while ") .style("fill", "black") .append('tspan') .style('font-weight', 900) .text("poor brits ") .style("fill", incomeColors("Low Income")) .append('tspan') .style('font-weight', 400) .text("continue to commute") .style("fill", "black") // color of dots // const colorScale = d3.scaleSequential(d3.interpolateLab("#f4c20c", "#385704")) const colorScale = d3.scaleSequential(d3.interpolateLab("#ffe345", "#203300")) .domain(d3.extent(ukUpd_tot, d=>d["Total annual income (£)"])).nice() const circles = svg.append("g") .attr("fill", "none") // .attr("stroke", "steelblue") .attr("stroke-width", 0.6) .attr("opacity", 0.7) .selectAll("circle") .data(boroughIncMob.filter(d=>d.tot_mobility>-60)) const dot = circles.join("circle") // .attr("cx", d => xScaleIncome(xScaleIncome(d["Total annual income (£)"]))) // .attr("cy", d=> yScaleTotMob(d[metric])) .attr("transform", d => `translate(${xScaleIncome(d["Total annual income (£)"])},${yScaleTotMob(d[metric])})`) .attr("r", 2.5) // .attr("stroke", d=>colorScale(d["Total annual income (£)"])) .attr("stroke", "white") .attr("fill", d=>colorScale(d["Total annual income (£)"])); const text = circles.join('text') .attr("x", d =>xScaleIncome(d["Total annual income (£)"])+8) .attr("y", d => yScaleTotMob(d[metric])) .attr('class', 'annotation') .attr('fill', d=>colorScale(+d["Total annual income (£)"])) // .text(d=>(d["city"]==="Greater London")?d.borough_abbr:"") .text(d=>(d["borough_abbr"]==="Islington")| (d["borough_abbr"]==="Kensington and Chelsea")| (d["borough_abbr"]==="Wandsworth")| (d["borough_abbr"]==="Richmond Upon Thames")| (d["borough_abbr"]==="Enfield")| // (d["borough_abbr"]==="Barking and Dagenham")| (d["borough_abbr"]==="Hackney")| (d["borough_abbr"]==="Wandsworth")| // (d["borough_abbr"]==="Hastings")| // (d["borough_abbr"]==="Thanet")| (d["borough_abbr"]==="Great Yarmouth")| (d["borough_abbr"]==="Manchester")?d.borough_abbr:"") dot.on("mouseover", (event, d) => { d3.selectAll(dot).attr("opacity", 0.2) d3.selectAll(text).attr("opacity", 0.2) dot.filter(c=>c.borough_abbr === d.borough_abbr).attr("opacity", 1) circles .join('text') .attr("x", d =>xScaleIncome(d["Total annual income (£)"])+8) .attr("y", d => yScaleTotMob(d[metric])) .attr('class', 'annotation') .attr("font-weight", 900) .attr('fill', d=> colorScale(+d["Total annual income (£)"])) // .text(d=>(d["city"]==="Greater London")?d.borough_abbr:"") .text(c=>c["borough_abbr"]===d.borough_abbr?d.borough_abbr:"") .attr("id", "ttipAnnot").raise() } ) dot.on("mouseleave", (event, d) => { d3.selectAll(dot).attr("opacity", 1) d3.selectAll(text).attr("opacity", 1) d3.selectAll("#ttipAnnot").remove() } ) const legendInc = renderLegend(svgLegendInc, colorScale, heightLegend, widthLegend, barHeight, legendTicks, legendIncTickformat, "linear-gradient-inc") // svg.call(brush); // function brushed({selection}) { // let value = []; // if (selection) { // const [[x0, y0], [x1, y1]] = selection; // value = dot // .style("stroke", "gray") // .filter(d => x0 <= xScaleIncome(d["Total annual income (£)"]) && xScaleIncome(d["Total annual income (£)"]) < x1 && y0 <= yScaleTotMob(d[metric]) && yScaleTotMob(d[metric]) < y1) // .style("stroke", "steelblue") // .data(); // } else { // dot.style("stroke", "steelblue"); // } // svg.property("value", value).dispatch("input"); // } return svg.node(); }5f:T227e,hexmap_mob_comp = { // Create the svg element const figScale = 1.1 // const figScaleLegend = 1.1 // const figWidthLegend = width // const figHeightLegend = height*figScaleLegend const figWidth = width*2.5 const figHeight = height*figScale const figOffset = 400 const hOffsetLegend = 1300 const vOffsetLegend = 100 const marginTop = 200 const marginBottom = 30 const widthLegend = 100 const legendTicks = 4 const legendIncTickformat = ".0s" const legendMobTickformat = "" const heightLegend = 100 const barHeight = 10 const boundWidth = 3 const grid = d3.select(DOM.svg(figWidth, figHeight+marginTop+marginBottom)); const svg = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${0}, ${marginTop})`) // const svg2 = grid // .append("g") // .attr("viewBox", [0, 0, figWidth, figHeight]) // // .style("overflow", "visible") // .attr('transform', `translate(${figOffset}, ${marginTop})`) const svg3 = grid .append("g") .attr("viewBox", [0, 0, figWidth, figHeight]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset}, ${marginTop})`) // const svg4 = grid // .append("g") // .attr("viewBox", [0, 0, figWidth, figHeight]) // // .style("overflow", "visible") // .attr('transform', `translate(${figOffset*2}, ${marginTop})`) // const svg5 = grid // .append("g") // .attr("viewBox", [0, 0, figWidth, figHeight]) // // .style("overflow", "visible") // .attr('transform', `translate(${figOffset*3}, ${marginTop})`) const svgBounds = grid .append("svg") .attr("viewBox", [0, 0, figWidth*2, figHeight*2]) // .style("overflow", "visible") .attr('transform', `translate(${figOffset*5}, ${marginTop})`) const svgLegendMob = grid .append("g") .attr("viewBox", [0, 0, widthLegend, heightLegend]) // .style("overflow", "visible") .attr('transform', `translate(${20}, ${-20})`) // annotations const g = grid.append("g") .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); g.append("text") .attr("class", "legendTitle") .attr("x", -margin.left) .attr("dy", -30) .attr("text-anchor", "left") .text("Mobility change since Feb. 2020 (%)") .attr('transform', `translate(${0}, ${-20})`) // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -100) .style('font-weight', 400) .attr("text-anchor", "left") .text(`Average change in `) .append('tspan') .style('font-weight', 900) .text('mobility to retail shops ') .style("fill", "#E02685") .append('tspan') .style('font-weight', 400) .text("during the 2020 and 2021 winter holiday seasons (December)") .style("fill", "black") // g.append("line") // .attr("x1", -margin.left) // .attr("x2", -20) // .attr("y1", -75) // .attr("y2", -75) // .attr("stroke", "black") // color scales const colorScaleMob = d3.scaleSequential(d3.interpolateLab("black", "#E02685")) .domain([0,-60]) // .domain([d3.max(ukUpd_tot_dec_2020, d=>d['retail_and_recreation_percent_change_from_baseline']),d3.min(ukUpd_tot_dec_2020, d=>d['retail_and_recreation_percent_change_from_baseline'])]).nice() // legend const legendMob = renderLegend(svgLegendMob, colorScaleMob, heightLegend, widthLegend, barHeight, legendTicks, legendMobTickformat, "linear-gradient-mob-cat") // Render the hexes var hexes = d3.renderHexJSON(hex_la, figWidth, figHeight) // var hexesBounds = d3.renderHexJSON(hex_la, figWidthLegend, figHeightLegend) var boundarySegments = d3.getBoundarySegmentsForHexJSON(hex_la, figWidth, figHeight, "region"); // var boundarySegmentsLegend = d3.getBoundarySegmentsForHexJSON(hex_la, figWidthLegend, figHeightLegend, "region"); // hex regions legend makeRegionsLegend(svgBounds, hOffsetLegend, vOffsetLegend) // maps // Bind the hexes to g elements of the svg and position them // colorScaleMob.domain([d3.max(ukUpd_tot_dec_2020, d=>d['retail_and_recreation_percent_change_from_baseline']),d3.min(ukUpd_tot_dec_2020, d=>d['retail_and_recreation_percent_change_from_baseline'])]) var hexmap = svg .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg .append("text") .attr("class", "legendTitle") .attr("x", figOffset/2) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("2020") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot_dec_2020.filter(c=>c.area_code===d.key)[0]["retail_and_recreation_percent_change_from_baseline"])) .attr("class", "hex") // .append("svg:title") // .text(function(d, i) { return d; }); .on("mouseover", function(event, d) { // console.log(d) d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // residential // colorScaleMob.domain(d3.extent(ukUpd_tot, d=> d["transit_stations_percent_change_from_baseline"]).reverse()) // colorScaleMob.domain([d3.max(ukUpd_tot_dec_2021, d=>d['retail_and_recreation_percent_change_from_baseline']),d3.min(ukUpd_tot_dec_2021, d=>d['retail_and_recreation_percent_change_from_baseline'])]) // Bind the hexes to g elements of the svg and position them var hexmap_t = svg3 .selectAll("g") .data(hexes) .join("g") .attr("transform", function(hex) { return "translate(" + hex.x + "," + hex.y + ")"; }); svg3 .append("text") .attr("class", "legendTitle") .attr("x", figOffset/2) .attr("y", figHeight+marginBottom/2) .attr("text-anchor", "middle") .text("2021") .style("font-weight", 900) // Draw the polygons around each hex's centre hexmap_t .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "white") .attr("stroke-width", "0.5") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", d => ukUpd_tot_dec_2021.filter(c=>c.area_code===d.key)[0] === undefined? "#ccc": colorScaleMob(ukUpd_tot_dec_2021.filter(c=>c.area_code===d.key)[0]["retail_and_recreation_percent_change_from_baseline"])) .attr("class", "hex") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke-width", "1.5") // .raise() }) .on("mouseleave", function(event, d) { d3.select(this) .attr("stroke-width", "0.5") // .lower() }) // Draw boundary lines var boundaryLines = svg .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // Draw boundary lines var boundaryLines = svg3 .selectAll("g.lines") .data(boundarySegments) .enter() .append("line") .attr("x1", function(d) { return d.x1;}) .attr("y1", function(d) { return d.y1;}) .attr("x2", function(d) { return d.x2;}) .attr("y2", function(d) { return d.y2;}) .attr("stroke", "white") .attr("stroke-width", showBounds==="0"?0:boundWidth) .attr("stroke-linecap", "round") .attr("fill", "none"); // return grid.node() }60:T8f0,function textWrapper( selection, { containerRadius = 400, textRadiusScaleFactor = 0.5, fontSize = 10, textWidthFactor = 3.3 } ) { // spacing between lines will be a factor of the font size const lineHeightFactor = 1.2; let lineHeight = fontSize * lineHeightFactor, text = selection.text(), _words = words(text), _targetWidth = targetWidth(text), _lines = lines(_words, _targetWidth), _textRadius = textRadius(_lines) // split text into words function words(text) { let words = text.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/ if (!words[words.length - 1]) words.pop(); if (!words[0]) words.shift(); return words; } // measure simulated text width function measureWidth(text) { const context = document.createElement("canvas").getContext("2d"); return context.measureText(text).width; } // calculate target width function targetWidth(text) { return Math.sqrt(measureWidth(text.trim()) * lineHeight) * textWidthFactor } // split text into lines function lines(words, targetWidth) { let line; let lineWidth0 = Infinity; const lines = []; for (let i = 0, n = words.length; i < n; ++i) { let lineText1 = (line ? line.text + " " : "") + words[i]; let lineWidth1 = measureWidth(lineText1); if ((lineWidth0 + lineWidth1) / 2 < targetWidth) { line.width = lineWidth0 = lineWidth1; line.text = lineText1; } else { lineWidth0 = measureWidth(words[i]); line = {width: lineWidth0, text: words[i]}; lines.push(line); } } return lines; } // calculate simulated text radius function textRadius(lines) { let radius = 0; for (let i = 0, n = lines.length; i < n; ++i) { const dy = (Math.abs(i - n / 2 + 0.5) + 0.5) * lineHeight; const dx = lines[i].width / 2; radius = Math.max(radius, Math.sqrt(dx ** 2 + dy ** 2)); } return radius; } let wrappedText = selection.text("") .attr("transform", `scale(${containerRadius / _textRadius * textRadiusScaleFactor})`) .selectAll("tspan") .data(_lines) .enter().append("tspan") .attr("x", 0) .attr("y", (d, i) => (i - _lines.length / 2 + 0.8) * lineHeight) .text(d => d.text) return selection }61:T46a,schemes = [ // { // name: "RdBu", // colors: [ // "#e8e8e8", "#e4acac", "#c85a5a", // "#b0d5df", "#ad9ea5", "#985356", // "#64acbe", "#627f8c", "#574249" // ] // }, { name: "PuOr", colors: [ "#e8e8e8", "#e4d9ac", "#c8b35a", "#cbb8d7", "#c8ada0", "#af8e53", "#9972af", "#976b82", "#804d36" ] }, { name: "RdBu", colors: ["#f0f0f0", "#ead2d2", "#e4b5b5", "#de9696", "#d87676", "#d15252", "#d7eded", "#d7d2d2", "#d7b5b5", "#d79696", "#d77676", "#d15252", "#bdeaea", "#bdd2d2", "#bdb5b5", "#bd9696", "#bd7676", "#bd5252", "#a0e6e6", "#a0d2d2", "#a0b5b5", "#a09696", "#a07676", "#a05252", "#81e2e2", "#81d2d2", "#81b5b5", "#819696", "#817676", "#815252", "#5ddede", "#5dd2d2", "#5db5b5", "#5d9696", "#5d7676", "#5d5252"] }, { name: "BuPu", colors: [ "#e8e8e8", "#ace4e4", "#5ac8c8", "#dfb0d6", "#a5add3", "#5698b9", "#be64ac", "#8c62aa", "#3b4994" ] }, { name: "GnBu", colors: [ "#e8e8e8", "#b5c0da", "#6c83b5", "#b8d6be", "#90b2b3", "#567994", "#73ae80", "#5a9178", "#2a5a5b" ] } ]62:T478,legendIndex = () => { const k = 70/n; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${ukUpd_tot_map.title[0]}${labels[j] && ` (${labels[j]})`} ${ukUpd_tot_map.title[1]}${labels[i] && ` (${labels[i]})`} `)} ${ukUpd_tot_map.title[0]} ${ukUpd_tot_map.title[1]} `; }63:T1a9a,ukUpdPct = d3.merge( d3.rollups(ukUpd, v=>v, d => d.place_id) .map(d=> d[1] .map((c, i)=> { // // const pctInterval = 7 // const reScale = d3.scaleLinear() // .range([1, 100]) // // if ((ukUpd[i-1] !== undefined) && (ukUpd[i] !== undefined)) { // if (i>pctInterval-1) { // // retail // reScale.domain(d3.extent(d[1], d=> d.retail_and_recreation_percent_change_from_baseline)) // const retailYesterday = reScale(d[1][i-pctInterval].retail_and_recreation_percent_change_from_baseline) // const retailToday = reScale(d[1][i].retail_and_recreation_percent_change_from_baseline) // const retailPctChange = Math.round(((retailYesterday-retailToday)/retailYesterday)*100) // // grocery // reScale.domain(d3.extent(d[1], d=> d.grocery_and_pharmacy_percent_change_from_baseline)) // const groceryYesterday = reScale(d[1][i-pctInterval].grocery_and_pharmacy_percent_change_from_baseline) // const groceryToday = reScale(d[1][i].grocery_and_pharmacy_percent_change_from_baseline) // const groceryPctChange = Math.round(((groceryYesterday-groceryToday)/groceryYesterday)*100) // // parks // reScale.domain(d3.extent(d[1], d=> d.parks_percent_change_from_baseline)) // const parksYesterday = reScale(d[1][i-pctInterval].parks_percent_change_from_baseline) // const parksToday = reScale(d[1][i].parks_percent_change_from_baseline) // const parksPctChange = Math.round(((parksYesterday-parksToday)/parksYesterday)*100) // // transit // reScale.domain(d3.extent(d[1], d=> d.transit_stations_percent_change_from_baseline)) // const transitYesterday = reScale(d[1][i-pctInterval].transit_stations_percent_change_from_baseline) // const transitToday = reScale(d[1][i].transit_stations_percent_change_from_baseline) // const transitPctChange = Math.round(((transitYesterday-transitToday)/transitYesterday)*100) // // workplaces // reScale.domain(d3.extent(d[1], d=> d.workplaces_percent_change_from_baseline)) // const workplacesYesterday = reScale(d[1][i-pctInterval].workplaces_percent_change_from_baseline) // const workplacesToday = reScale(d[1][i].workplaces_percent_change_from_baseline) // const workplacesPctChange = Math.round(((workplacesYesterday-workplacesToday)/workplacesYesterday)*100) // // residential // reScale.domain(d3.extent(d[1], d=> d.residential_percent_change_from_baseline)) // const residentialYesterday = reScale(d[1][i-pctInterval].residential_percent_change_from_baseline) // const residentialToday = reScale(d[1][i].residential_percent_change_from_baseline) // const residentialPctChange = Math.round(((residentialYesterday-residentialToday)/residentialYesterday)*100) if (i>pctInterval-1) { // retail const retailYesterday = d[1][i-pctInterval].retail_and_recreation_percent_change_from_baseline const retailToday = d[1][i].retail_and_recreation_percent_change_from_baseline const retailPctChange = Math.round(((retailYesterday-retailToday)/retailYesterday)*100) // grocery const groceryYesterday = d[1][i-pctInterval].grocery_and_pharmacy_percent_change_from_baseline const groceryToday = d[1][i].grocery_and_pharmacy_percent_change_from_baseline const groceryPctChange = Math.round(((groceryYesterday-groceryToday)/groceryYesterday)*100) // parks const parksYesterday = d[1][i-pctInterval].parks_percent_change_from_baseline const parksToday = d[1][i].parks_percent_change_from_baseline const parksPctChange = Math.round(((parksYesterday-parksToday)/parksYesterday)*100) // transit const transitYesterday = d[1][i-pctInterval].transit_stations_percent_change_from_baseline const transitToday = d[1][i].transit_stations_percent_change_from_baseline const transitPctChange = Math.round(((transitYesterday-transitToday)/transitYesterday)*100) // workplaces const workplacesYesterday = d[1][i-pctInterval].workplaces_percent_change_from_baseline const workplacesToday = d[1][i].workplaces_percent_change_from_baseline const workplacesPctChange = Math.round(((workplacesYesterday-workplacesToday)/workplacesYesterday)*100) // residential const residentialYesterday = d[1][i-pctInterval].residential_percent_change_from_baseline const residentialToday = d[1][i].residential_percent_change_from_baseline const residentialPctChange = Math.round(((residentialYesterday-residentialToday)/residentialYesterday)*100) return { country_region_code: d[1][i].country_region_code, country_region: d[1][i].country_region, sub_region_1: d[1][i].sub_region_1, sub_region_2: d[1][i].sub_region_2, metro_area: d[1][i].metro_area, iso_3166_2_code: d[1][i].iso_3166_2_code, census_fips_code: d[1][i].census_fips_code, place_id: d[1][i].place_id, date: d[1][i].date, retail_and_recreation_percent_change_from_baseline: d[1][i].retail_and_recreation_percent_change_from_baseline, grocery_and_pharmacy_percent_change_from_baseline: d[1][i].grocery_and_pharmacy_percent_change_from_baseline, parks_percent_change_from_baseline: d[1][i].parks_percent_change_from_baseline, transit_stations_percent_change_from_baseline: d[1][i].transit_stations_percent_change_from_baseline, workplaces_percent_change_from_baseline: d[1][i].workplaces_percent_change_from_baseline, residential_percent_change_from_baseline: d[1][i].residential_percent_change_from_baseline, // place_id: c.place_id, // date: c.date, // retailYesterday: retailYesterday, // retailToday: retailToday, retailPctChange: retailPctChange, groceryPctChange: groceryPctChange, parksPctChange: parksPctChange, transitPctChange: transitPctChange, workplacesPctChange: workplacesPctChange, residentialPctChange: residentialPctChange // data: ukUpd[i-1] } } else { return undefined } } ) .filter(d=>d!==undefined) ) )64:Tbd9,function makeAggData(data, lkd=false) { const data_tot = d3.rollups( data, v => [d3.median(v, d => d.retail_and_recreation_percent_change_from_baseline), d3.median(v, d => d.grocery_and_pharmacy_percent_change_from_baseline), d3.median(v, d => d.parks_percent_change_from_baseline), d3.median(v, d => d.transit_stations_percent_change_from_baseline), d3.median(v, d => d.workplaces_percent_change_from_baseline), d3.median(v, d => d.residential_percent_change_from_baseline), v[0].place_id, v[0].sub_region_2===null?v[0].sub_region_2: v[0].sub_region_2.replace(' District','').replace('London Borough of ','').replace("Royal Borough of ", ""), v[0].sub_region_1, ], d => d.place_id).map(([k, v]) => ({ local_authority: k, sub_region_1: v[8], borough_abbr: v[7],//k===null?k:k.replace(' District','').replace('London Borough of ',''), place_id: v[6], area_code: loa_google.filter( c=>c.place_id===v[6])[0]===undefined?null: loa_google.filter( c=>c.place_id===v[6])[0].lad19cd, retail_and_recreation_percent_change_from_baseline: v[0], grocery_and_pharmacy_percent_change_from_baseline: v[1], parks_percent_change_from_baseline: v[2], transit_stations_percent_change_from_baseline: v[3], workplaces_percent_change_from_baseline: v[4], residential_percent_change_from_baseline: v[5], tot_mobility: d3.median([v[0], v[1], v[3], v[4], v[5]]), "Total annual income (£)": loa_google.filter( c=>c.place_id===v[6])[0]===undefined?null: incomeLOA.get(loa_google.filter( c=>c.place_id===v[6])[0].lad19cd), hex_data: (loa_google.filter( c=>c.place_id===v[6])[0]===undefined)||(lkd===false)?null: hexes_t.filter(d=>d.key===loa_google.filter( c=>c.place_id===v[6])[0].lad19cd), pop: loa_google.filter( c=>c.place_id===v[6])[0]===undefined?null: popLOA.get(loa_google.filter( c=>c.place_id===v[6])[0].lad19cd) }) ) return data_tot }65:Tc5f,function makeAggDataPct(data, lkd=false) { const data_tot = d3.rollups( data.filter(d=> (d.retailPctChange!==Infinity) && (d.retailPctChange!==-Infinity) && (d.groceryPctChange!==Infinity) && (d.groceryPctChange!==-Infinity) && (d.parksPctChange!==Infinity) && (d.parksPctChange!==-Infinity) && (d.transitPctChange!==Infinity) && (d.transitPctChange!==-Infinity) && (d.workplacesPctChange!==Infinity) && (d.workplacesPctChange!==-Infinity) && (d.residentialPctChange!==Infinity) && (d.residentialPctChange!==-Infinity)), v => [d3.median(v, d => d.retailPctChange), d3.median(v, d => d.groceryPctChange), d3.median(v, d => d.parksPctChange), d3.median(v, d => d.transitPctChange), d3.median(v, d => d.workplacesPctChange), d3.median(v, d => d.residentialPctChange), v[0].place_id, v[0].sub_region_2===null?v[0].sub_region_2: v[0].sub_region_2.replace(' District','').replace('London Borough of ','').replace("Royal Borough of ", ""), v[0].sub_region_1, ], d => d.place_id).map(([k, v]) => ({ local_authority: k, sub_region_1: v[8], borough_abbr: v[7],//k===null?k:k.replace(' District','').replace('London Borough of ',''), place_id: v[6], area_code: loa_google.filter( c=>c.place_id===v[6])[0]===undefined?null: loa_google.filter( c=>c.place_id===v[6])[0].lad19cd, retail_and_recreation_percent_change_from_baseline: v[0], grocery_and_pharmacy_percent_change_from_baseline: v[1], parks_percent_change_from_baseline: v[2], transit_stations_percent_change_from_baseline: v[3], workplaces_percent_change_from_baseline: v[4], residential_percent_change_from_baseline: v[5], tot_mobility: d3.median([v[0], v[1], v[3], v[4], v[5]]), "Total annual income (£)": loa_google.filter( c=>c.place_id===v[6])[0]===undefined?null: incomeLOA.get(loa_google.filter( c=>c.place_id===v[6])[0].lad19cd), hex_data: (loa_google.filter( c=>c.place_id===v[6])[0]===undefined)||(lkd===false)?null: hexes_t.filter(d=>d.key===loa_google.filter( c=>c.place_id===v[6])[0].lad19cd) }) ) return data_tot }66:T76a,showTooltip = function showTooltip(event, d, colorscale) { // d3.selectAll('.spikered,.spikesteelblue') // .attr("fill-opacity", 0.1) // .attr("stroke-opacity", 0.3) // d3.select('#spike'+ color + d.id) // .attr("stroke", "black") // .attr("fill-opacity", 0.2) // .attr("stroke-opacity", 0.6) // .raise() // console.log(d) tooltip .transition() .duration(0) .style("opacity", 1) tooltip .html(`${d.borough_abbr!==null?d.borough_abbr:d.sub_region_1}
Grocery and Pharmacy: ${d.grocery_and_pharmacy_percent_change_from_baseline}
Retail and Recreation: ${d.retail_and_recreation_percent_change_from_baseline}
Public Transportation: ${d.transit_stations_percent_change_from_baseline}
Workplaces: ${d.workplaces_percent_change_from_baseline}
Residential Areas: ${d.residential_percent_change_from_baseline}
${" "}`) .attr("class", "legendTitle") .style("color", "#ededed") .style("left", event.pageX + 10+ "px") .style("top", event.pageY - 28 + "px"); }67:Tef5,function makeRegionsLegend(svg, hOffset, vOffset) { const figScaleLegend = 1.1 const figWidthLegend = width const figHeightLegend = height*figScaleLegend var hexesBounds = d3.renderHexJSON(hex_la, figWidthLegend, figHeightLegend) var boundarySegmentsLegend = d3.getBoundarySegmentsForHexJSON(hex_la, figWidthLegend, figHeightLegend, "region"); // boundary legend var hexmapBounds = svg .selectAll("g") .data(hexesBounds) .join("g") .attr("transform", function(hex) { return "translate(" + (hex.x+hOffset) + "," + (hex.y-220) + ")"; }); // Draw the polygons around each hex's centre hexmapBounds .append("polygon") .attr("points", function(hex) {return hex.points;}) .attr("stroke", "lightgrey") .attr("stroke-width", "0") // .attr("fill", d => boroughIncMob.filter(c=>c.borough_abbr===d.n)[0] === undefined? "#ccc": // colorScale(boroughIncMob.filter(c=>c.borough_abbr===d.n)[0][mapMetric])) .attr("fill", "lightgrey") .attr("class", "hex") // Draw boundary lines var boundaryLines = svg .selectAll("g.lines") .data(boundarySegmentsLegend) .enter() .append("line") .attr("x1", function(d) { return d.x1+ hOffset;}) .attr("y1", function(d) { return d.y1-220;}) .attr("x2", function(d) { return d.x2+ hOffset;}) .attr("y2", function(d) { return d.y2-220;}) .attr("stroke", "black") .attr("stroke-width", 3) .attr("stroke-linecap", "round") .attr("fill", "none"); const wales = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset) // .attr("dy", -30) .attr("text-anchor", "left") .text("Wales") // .attr('transform', `translate(${0}, ${-20})`) const WM = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset+ 110) // .attr("dy", -30) .attr("text-anchor", "left") .text("WM") const EM = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset+ 170) .attr("dy", -20) .attr("text-anchor", "left") .text("EM") const London = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset+ 180) .attr("dy", 50) .attr("text-anchor", "left") .text("London") const Anglia = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset+ 200) .attr("dy", 10) .attr("text-anchor", "left") .text("Anglia") const SE = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset+ 110) .attr("dy", 60) .attr("text-anchor", "left") .text("S. East") const SW = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset-20) .attr("dy", 70) .attr("text-anchor", "left") .text("S. West") const NW = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset+ 100) .attr("dy", -50) .attr("text-anchor", "left") .text("N. West") const yorkshire = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset+ 220) .attr("dy", -70) .attr("text-anchor", "left") .text("Yorkshire") const NE = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset+ 170) .attr("dy", -120) .attr("text-anchor", "left") .text("N. East") const scotland = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset+ 140) .attr("dy", -170) .attr("text-anchor", "left") .text("Scotland") const NI = svg.append("text") .attr("class", "regionAnnot") .attr("x", hOffset-60) .attr("dy", -80) .attr("text-anchor", "left") .text("N. Ireland") }68:Tbdc,html`In order to complete this analysis, data was used from the following sources:

(1) The Health Foundation COVID-19 Policy Tracker: Timeline of national policy and health system responses to COVID-19 in England

(2) Greater London Authority Coronavirus (COVID-19) Cases: Public Health England (PHE) daily updated data on confirmed COVID-19 cases

(3) Google COVID-19 Community Mobility Reports: A record of movement trends over time by geography for different categories of places.

(4) UK Office for National Statistics: Income estimates for small areas, England and Wales: 2018 Estimates of annual household incomes for England and Wales

(5) Imperial College London: London Air Data: Hourly Air Pollution Level Data Across the Greater London Area

Notably, and fundamental to this analysis, the Google COVID-19 Community Mobility Reports data shows how visitation to different categories of place have changed in comparison to baseline days. Baseline days are calculated on a per day basis. Therefore, Monday, Tuesday, Wednesday, etc. each have their own “baseline” day. A baseline day represents a “normal” value for that day of the week. Baseline days are calculated from the median value from the 5-week period.

In this analysis, categories of mobility that were considered from the Google COVID-19 Community Mobility Reports data include: Retail & Recreation; Essential Services; Workplaces; Residential Areas; Public Transportation. When analysing mobility, this analysis considers both disaggregated mobility and aggregated mobility. Disaggregated mobility refers to daily deviation from baseline activity for each individual category of Retail & Recreation, Essential Services, Workplaces, Residential Areas, and Public Transportation for mobility. Aggregated Mobility is, instead, the calculated mean of Recreation, Essential Services, Workplaces, and Public Transportation for mobility. Note, the category “Residential Areas” was omitted from the calculation of aggregated mobility because while more people staying may contribute to higher “mobility” to residential areas, this does not actually translate in physical movement between locations and places.

For the Air Quality analysis, the openair API was used to access detailed air quality data (from the Automatic Urban and Rural Network (AURN)) for London (NO2 and PM2.5). Similar to Google’s Mobility Reports, a baseline for Air Quality (2019 air quality levels) was computed. This baseline was then used to analyse the daily percent changes in air pollutants for 2020 and 2021. Finally, a simple Air Quality Indicator, which represents the average percent change from baseline between the NO2 and PM2.5 air pollutants ((percent change in PM2.5 + percent change in NO2)/2), was designed and visualised.

For further information on the data used, please see the respected link for each source under “Data Sources”. `69:T565,html`Also, important assumptions to consider in this analysis are that the City of London has been considered to be its own “borough” for better transparency as to how COVID-19 has impacted London’s economic driver. In addition, weekend days (i.e. Saturday and Sunday) have been removed from the data for the sake of this analysis.

Additionally, “air pollutants” for this analysis refer to fine particulate matter (PM2.5) and Nitrogen Dioxide (NO2). Both PM2.5 and NO2 are common pollutants emitted during urban transportation (i.e. mobility), thus making them key pollutants of interest for this analysis.

When referring to poor and wealthy boroughs in this analysis, poor boroughs refer to boroughs where the median income of residents is within the bottom quantile for income (i.e. the bottom 25% of earners). Wealthy boroughs refer to boroughs where the median income of residents is within the top quantile for income (i.e. the top 25% of earners).

When considering the ethnic demographics across all London boroughs, predominantly BIPOC boroughs refer to the top 25% of boroughs with the highest proportion of residents that are visible minorities (Black, Asian, Mixed/Other). Contrastly, predominantly white boroughs refer to the bottom 25% of boroughs with the lowest proportion of residents that are visible minorities.

`6a:T45b,function renderLegend(svg, colorscale, heightLegend, widthLegend, barHeight, legendTicks, legendTickformat, id) { const defs = svg.append("defs"); const linearGradient = defs.append("linearGradient") .attr("id", id); linearGradient.selectAll("stop") .data(colorscale.ticks().map((t, i, n) => ({ offset: `${100*i/n.length}%`, color: colorscale(t) }))) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); svg.append('g') .attr("transform", `translate(0,${heightLegend})`) .append("rect") // .attr('transform', `translate(${margin.left}, 0)`) .attr("width", widthLegend) .attr("height", barHeight) .style("fill", "url(#"+id+")"); const axisScale = d3.scaleLinear() .domain(colorscale.domain()) .range([0, widthLegend]) const axisBottom = g => g .attr("class", `legx-axis`) .attr("transform", `translate(0,${heightLegend+barHeight})`) .call(d3.axisBottom(axisScale) .ticks(legendTicks) .tickSize(-barHeight) .tickFormat(d3.format(legendTickformat))) svg.append('g') .call(axisBottom); }6b:T4e7,function wrap(text, width) { text.each(function () { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems x = text.attr("x"), y = text.attr("y"), dy = 0, //parseFloat(text.attr("dy")), tspan = text.text(null) .append("tspan") .attr("x", x) .attr("y", y) .attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan") .attr("x", x) .attr("y", y) .attr("dy", ++lineNumber * lineHeight + dy + "em") .text(word); } } }); }6c:T73d,boroughMob = { mobilityData; const dateParse = d3.timeParse('%Y-%m-%d'); const extent = []; const dataByBorough = mobilityData.reduce((accumulator, current)=>{ const mobilityProp = 'tot_mobility'; const rMobilityProp = 'retail_and_recreation_percent_change_from_baseline'; const gMobilityProp = 'grocery_and_pharmacy_percent_change_from_baseline'; const tMobilityProp = 'transit_stations_percent_change_from_baseline'; const wMobilityProp = 'workplaces_percent_change_from_baseline'; const reMobilityProp = 'residential_percent_change_from_baseline'; const incomeSProp = 'income_status'; const incomeProp = 'income'; const ethnicProp = 'ethnic_majority' const codeProp = 'area_code'; if(!accumulator[current[codeProp]]){ accumulator[current[codeProp]] = []; } accumulator[current[codeProp]].push({ value: Number(current[mobilityProp]), rValue: Number(current[rMobilityProp]), gValue: Number(current[gMobilityProp]), tValue: Number(current[tMobilityProp]), wValue: Number(current[wMobilityProp]), reValue: Number(current[reMobilityProp]), incomeSValue: current[incomeSProp], incomeValue: Number(current[incomeProp]), ethnicValue: current[ethnicProp], date: dateParse(current['date']) }); return accumulator; }, {}); return Object.keys(dataByBorough).map(d=>({code:d, mobility:dataByBorough[d], income: Number(d3.median(dataByBorough[d].map(e=>e.incomeValue))), incomeS: dataByBorough[d].map(e=>e.incomeSValue)[0], ethnicMaj: dataByBorough[d].map(e=>e.ethnicValue)[0], median: Number(d3.median(dataByBorough[d].map(e=>e.value)))})); }6d:T766,boroughMobUK = { mobilityDataUK; const dateParse = d3.timeParse('%Y-%m-%d'); const extent = []; const dataByBorough = mobilityDataUK.reduce((accumulator, current)=>{ const mobilityProp = 'tot_mobility'; const rMobilityProp = 'retail_and_recreation_percent_change_from_baseline'; const gMobilityProp = 'grocery_and_pharmacy_percent_change_from_baseline'; const tMobilityProp = 'transit_stations_percent_change_from_baseline'; const wMobilityProp = 'workplaces_percent_change_from_baseline'; const reMobilityProp = 'residential_percent_change_from_baseline'; const incomeSProp = 'income_status'; const incomeProp = 'Total annual income (£)'; // const ethnicProp = 'ethnic_majority' const codeProp = 'borough_abbr' ; if(!accumulator[current[codeProp]]){ accumulator[current[codeProp]] = []; } accumulator[current[codeProp]].push({ value: Number(current[mobilityProp]), rValue: Number(current[rMobilityProp]), gValue: Number(current[gMobilityProp]), tValue: Number(current[tMobilityProp]), wValue: Number(current[wMobilityProp]), reValue: Number(current[reMobilityProp]), incomeSValue: current[incomeSProp], incomeValue: Number(current[incomeProp]), // ethnicValue: current[ethnicProp], date: dateParse(current['date']) }); return accumulator; }, {}); return Object.keys(dataByBorough).map(d=>({code:d, mobility:dataByBorough[d], income: Number(d3.median(dataByBorough[d].map(e=>e.incomeValue))), incomeS: dataByBorough[d].map(e=>e.incomeSValue)[0], // ethnicMaj: dataByBorough[d].map(e=>e.ethnicValue)[0], median: Number(d3.median(dataByBorough[d].map(e=>e.value)))})); }6e:T4a3,cityMob = { mobilityCities; const dateParse = d3.timeParse('%Y-%m-%d'); const extent = []; const dataByBorough = mobilityCities.reduce((accumulator, current)=>{ const mobilityProp = 'tot_mobility'; const rMobilityProp = 'retail_and_recreation_percent_change_from_baseline'; const gMobilityProp = 'grocery_and_pharmacy_percent_change_from_baseline'; const tMobilityProp = 'transit_stations_percent_change_from_baseline'; const wMobilityProp = 'workplaces_percent_change_from_baseline'; const reMobilityProp = 'residential_percent_change_from_baseline'; const codeProp = 'city'; if(!accumulator[current[codeProp]]){ accumulator[current[codeProp]] = []; } accumulator[current[codeProp]].push({ value: Number(current[mobilityProp]), rValue: Number(current[rMobilityProp]), gValue: Number(current[gMobilityProp]), tValue: Number(current[tMobilityProp]), wValue: Number(current[wMobilityProp]), reValue: Number(current[reMobilityProp]), date: dateParse(current['date']) }); return accumulator; }, {}); return Object.keys(dataByBorough).map(d=>({code:d, mobility:dataByBorough[d]})); }6f:T17e4,policies = { return [ // { // id: "Workplaces Close and Public Gatherings are Banned", // date: "2020-03-16", // y: 50, // text_anchor: "start", // speech: "We need people to start working from home where they possibly can ... So from tomorrow, we will no longer be supporting mass gatherings with emergency workers in the way that we normally do. So mass gatherings, we are now moving emphatically away from. - Boris Johnson", // url: "https://web.archive.org/web/20200319235039/https://www.gov.uk/government/speeches/pm-statement-on-coronavirus-16-march-2020", // }, { // id: "First Lockdown", // date: "2020-03-20", // y: 80, // text_anchor: "start", // speech: "The closures announced today will not impact the running of public transport, and government continues to work closely with transport operators to ensure that people who need to get to work can continue to do so. Yesterday, the government and rail industry agreed a plan that will see a gradual reduction in train services across the country to reflect lower passenger demand as people change their travel patterns to help reduce the spread of coronavirus, while keeping vital rail services running.", // url: "https://web.archive.org/web/20200320191027/https://www.gov.uk/government/news/government-announces-further-measures-on-social-distancing" // }, { // id: "Businesses and Venues are Ordered to Close", // date: "2020-03-21", // y: 100, // text_anchor: "start", // speech: "The government is therefore asking the following businesses and other venues across the United Kingdom to close as soon as they reasonably can, and not to open for trade from Saturday 21 March.", // url: "https://web.archive.org/web/20200323173521/https://www.gov.uk/government/publications/business-and-other-venues-subject-to-further-social-distancing-measures/businesses-and-other-venues-subject-to-further-social-distancing-measures" // }, { // id: "Schools Close", // date: "2020-03-23", // y: 120, // text_anchor: "start", // speech: "Schools will close from Monday, except for children of key workers and vulnerable children.", // url: "https://web.archive.org/web/20200320160258/https://www.gov.uk/government/news/schools-colleges-and-early-years-settings-to-close" // }, { id: "First Lockdown", date: "2020-03-23", y: 40,// 120 text_anchor: "start", font_color: '#E02685', // font_color: 'red', font_weight: 700, speech: "Schools will close from Monday, except for children of key workers and vulnerable children.", url: "https://web.archive.org/web/20200320160258/https://www.gov.uk/government/news/schools-colleges-and-early-years-settings-to-close" // }, { // id: "Non-Essential Shops Reopen", // date: "2020-06-04", // y: 80, // text_anchor: "start", // speech: "Measures to ease the lockdown in England include: changing the social distancing rule to state that 2m or 1m with risk mitigation (where 2m is not viable) are acceptable; restaurants, pubs and cafes in England allowed to reopen, providing they follow guidelines (hospitality indoors will be table service only); holiday accommodation will reopen; some tourist attractions and leisure facilities can reopen (eg museums, cinemas, libraries, community centres, hairdressers, outdoor gyms and children’s playgrounds) if they can do so safely; places of worship will be able to open for prayers and services, including weddings with up to 30 guests; two households of any size are able to meet indoors or outside (including to stay overnight) maintaining social distancing; outdoors, people from multiple households can meet in groups of up to six - but two households can meet regardless of size.", // url: "https://www.health.org.uk/news-and-comment/charts-and-infographics/covid-19-policy-tracker" }, // { // id: "Non-Essential Shops Reopen", // date: "2020-06-15", // y: 260, // text_anchor: "start", // speech: "", // url: "" // }, { // id: "Eat Out to Help Out", // date: "2020-08-03", // y: 220, // text_anchor: "start", // speech: "", // url: "" // }, { // id: "Rule Six", // date: "2020-09-14", // y: 150, // text_anchor: "end", // speech: "", // url: "" // }, { // id: "Tier 2 Lockdown", // date: "2020-10-17", // y: 90, // text_anchor: "end", // speech: "", // url: "" // }, { id: "Second Lockdown", date: "2020-11-05", font_color: '#E02685', // font_color: 'red', font_weight: 700, y: 40, text_anchor: "end", speech: "The devolved administrations are working together on a joint approach to the Christmas period, because all of us want to ensure families can come together wherever they live. That’s why new restrictions are in place in each part of the UK. In England, from today, we are once again asking you to stay at home... Many of you are anxious, weary and quite frankly fed up with the very mention of this virus. But I want to assure you this is not a repeat of the spring.", url: "https://web.archive.org/web/20200320160258/https://www.gov.uk/government/news/schools-colleges-and-early-years-settings-to-close" }, // { // id: "Second Lockdown Lifted", // date: "2020-12-02", // y: 60, // text_anchor: "end", // speech: "", // url: "" // }, { id: "Tier 4 Lockdown", date: "2020-12-20", font_color: '#E02685', // font_color: 'red', font_weight: 700, y: 70, text_anchor: "end" } ] }70:T8e2,policies_sm = { return [ { id: "National Lockdown #1", date: "2020-03-26", y: 40,// 120 text_anchor: "start", font_color: '#E02685', // font_color: 'red', font_weight: 700, }, // { // id: "Lockdown in Leicester", // date: "2020-07-04", // }, { id: "Rule of Six", date: "2020-09-14", },{ id: "Three Tier System", date: "2020-10-14", }, { id: "National Lockdown #2", date: "2020-11-05", font_color: '#E02685', // font_color: 'red', font_weight: 700, y: 40, text_anchor: "end", speech: "The devolved administrations are working together on a joint approach to the Christmas period, because all of us want to ensure families can come together wherever they live. That’s why new restrictions are in place in each part of the UK. In England, from today, we are once again asking you to stay at home... Many of you are anxious, weary and quite frankly fed up with the very mention of this virus. But I want to assure you this is not a repeat of the spring.", url: "https://web.archive.org/web/20200320160258/https://www.gov.uk/government/news/schools-colleges-and-early-years-settings-to-close" }, { id: "Tier 4 Restrictions", date: "2020-12-21", font_color: '#E02685', // font_color: 'red', font_weight: 700, y: 70, text_anchor: "end" }, { id: "Circuit Breaker Lockdown (Wales-only)", date: "2020-10-23", y: 80, text_anchor: "end", speech: "", url: "" }, { id: "National Lockdown #3", date: "2021-01-06", }, { id: "Glasgow Tier 4", date: "2020-11-20", y: 60, text_anchor: "end", speech: "", url: "" }, { id: "Step 1 Easing", date: "2021-03-08", } , { id: "Step 2 Easing", date: "2021-04-12", }, { id: "Step 3 Easing", date: "2021-05-17", }, { id: "Easing of Most Restrictions for UK", date: "2021-07-17", } ] }71:Tb58,styles = html``72:[{"id":"716a8b379ff23cd471e4e901a10073105f723c1fe44651aecc0b93025a046e5410008682cb1368dd847391f5c672874f254595819c4f6f57fb929d6cc9b34739","href":"https://static.observableusercontent.com/files/716a8b379ff23cd471e4e901a10073105f723c1fe44651aecc0b93025a046e5410008682cb1368dd847391f5c672874f254595819c4f6f57fb929d6cc9b34739","name":"2020_GB_Region_Mobility_Report_0803.csv","type":"text/csv","lastModified":1628016223631.121,"size":14580496},{"id":"cd48ca88ce9c5b33e6bdaad4715fbca68ae09f709066af3a099fa561677915c6b74687d8ba24f515e113f316acc9999bb63f693d4ba508a965a3fe78775e72a6","href":"https://static.observableusercontent.com/files/cd48ca88ce9c5b33e6bdaad4715fbca68ae09f709066af3a099fa561677915c6b74687d8ba24f515e113f316acc9999bb63f693d4ba508a965a3fe78775e72a6","name":"2021_GB_Region_Mobility_Report_0913.csv","type":"text/csv","lastModified":1631535568106.982,"size":11458454},{"id":"8a0357d28de7cd02421e5387be01d46264be09e17621dcb1e07ec164b03454756abb202c1f57cd2033f73f4cc992f531d10ce00ff5107658aac7db0da22b11b9","href":"https://static.observableusercontent.com/files/8a0357d28de7cd02421e5387be01d46264be09e17621dcb1e07ec164b03454756abb202c1f57cd2033f73f4cc992f531d10ce00ff5107658aac7db0da22b11b9","name":"local_authority_boundaries.json","type":"application/json","lastModified":1633094715329.623,"size":1381514},{"id":"3bf7e784a02d5342b37ca95277abb137299110947f361fc8ae108893eacd5672d99e98e2d8a76b9792eea92c7f0681a25c2b0df9429d952c0779836ad9947cf6","href":"https://static.observableusercontent.com/files/3bf7e784a02d5342b37ca95277abb137299110947f361fc8ae108893eacd5672d99e98e2d8a76b9792eea92c7f0681a25c2b0df9429d952c0779836ad9947cf6","name":"2021_GB_Region_Mobility_Report_1213.csv","type":"text/csv","lastModified":1639399247588.45,"size":15595664},{"id":"9ac7c2b5beda57f8e507470a609afaeb4f4a912332c233dc42395eb47f7d38c0fec9ee40ff9943978f009cf7f183d833d03e580c51aba8ec729539e355304e83","href":"https://static.observableusercontent.com/files/9ac7c2b5beda57f8e507470a609afaeb4f4a912332c233dc42395eb47f7d38c0fec9ee40ff9943978f009cf7f183d833d03e580c51aba8ec729539e355304e83","name":"lockdown_data@1.json","type":"application/json","lastModified":1639407651245.746,"size":9346139}] 2f:{"id":"6f72170d9334aefd","slug":"covid-19-and-mobility","title":"London in the Pandemic Era: Consequences and Implications of COVID-19 on Mobility","thumbnail":"1233a315b153104bc70bac5426e156cd14dbf635ad91d22bfbb29fad63b0f7a3","access_level":"public","create_time":"$D2020-11-24T11:30:49.054Z","update_time":"$D2022-02-18T13:34:58.860Z","view_time":null,"first_public_time":"$D2020-12-08T22:51:42.884Z","fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"405a122b348425fd","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":"starter_2024"},"version":10072,"publish_version":10072,"role":null,"authored":false,"authors":[{"type":"individual","id":"8280c368bc7eaac0","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":null}],"members":[{"type":"individual","id":"3252c0480a163254","login":"carolinecullinan","name":"Caroline Cullinan","avatar_url":"https://avatars-next.observableusercontent.com/36537301c4253b6e5b85cebe4262781beb533d83fa0dfc319d1d1463d6166cf9","tier":null,"role":"editor"},{"type":"individual","id":"8280c368bc7eaac0","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"London in the Pandemic Era: Consequences and Implications of COVID-19 on Mobility","cells":[{"id":0,"value":"html`

London in the Pandemic Era: Consequences and Implications of COVID-19 on Mobility

A visual narrative around COVID-19 and mobility in London

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2682,"value":"html`

Prepared for Enders Analysis by Caroline Cullinan & Leonardo Nicoletti
\n\nAccess the first report and the second report .`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"html`

1. An Introduction to COVID-19 and Mobility in London, UK: Setting the Scene`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2688,"value":"html`

On March 11, 2020, the World Health Organization (WHO) officially announced the COVID-19 outbreak as a global pandemic. As a result of COVID-19, cities like London, UK, have particularly suffered from staggering infection rates and high mortality rates. In the Greater London Area (GLA), the severity of this infectious disease has resulted in political repercussions which impact societal mobility behaviours. Now, as the GLA is on the brink of a second wave of COVID-19 infections, the resulting societal consequences and implications of the COVID-19 pandemic are as relevant as ever.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2694,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"html`

2. Disaggregating London: COVID-19 & Mobility by Borough`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2703,"value":"html`

With a cartogram approach, COVID-19 cases and aggregated mobility can be investigated per each London borough for March 2020 through November 2020. The figures below outline the total number of COVID-19 cases per each borough (top) and the median aggregated mobility drop from that of baseline activity (bottom).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"legend({\n color: d3.scaleSequential(colorDomain, d3.interpolateLab(\"white\", \"#9D1A5F\")),\n // color: d3.scaleQuantile(colorDomain, d3.schemeReds[9]),\n title: \"Total Number of COVID-19 Cases\",\n tickFormat: \".0s\",\n ticks : width / 64,\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2709,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"legend({\n color: d3.scaleSequential(colorDomainMob.reverse(), d3.interpolateLab(\"black\", \"#E02685\")),\n // color: d3.scaleSequential(colorDomainMob, d3.interpolateLab(\"black\", \"red\")),\n title: \"Average Mobility Drop From Baseline (%)\",\n tickFormat: \".0s\",\n ticks : width / 64,\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2712,"value":"html`

In all, a trend can be observed where boroughs that suffered the most in total number of COVID-19 infections also experienced the smallest drops in median aggregated mobility. Conversely, boroughs with smaller numbers of total COVID-19 cases experienced greater drops in median aggregated mobility. Specifically, while the London CBD saw the least amount of total COVID-19 infections (less than 800 total cases), drops in median aggregated mobility were most severe here (greater than 70%).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2587,"value":"html`

3. Disaggregating Mobility in London: Identifying Major Shifts in Urban Lifestyles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2718,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2590,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2722,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"html`

4. The Economic Impact of Reduced Mobility: London CBD As A Case Study`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2727,"value":"html`

An economic hub to the GLA, the London CBD has suffered from extreme reductions in overall mobility. As observed in the figure below, while all boroughs have experienced reductions in mobility relative to Work Habits, Retail and Recreation, Public Transportation, and Essential Services, the London CBD has suffered the most. This has devastating consequences on the economy of the GLA, which is largely dependent on the functioning of the London CBD.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2577,"value":"html`

Overall Mobility Patterns By Borough`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2582,"value":"html`

Mobility Patterns By Borough by Category`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2853,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2094,"value":"html`

5. How Does London Compare?
\n

5.1. International Comparision`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2730,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2097,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3012,"value":"html`

5.2. Local Comparision\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3157,"value":"html`

In a more “local” context, the change in overall aggregated mobility compared to the baseline activity for London can be compared against that of other UK cities. The figure below presents the percent change in overall mobility compared to the baseline activity in March 2020 through December 2020 for London, England; Birmingham, England; Glasgow, Scotland; and Cardiff, Wales. Interestingly, all of these cities experienced strikingly similar patterns in the percent change in mobility patterns, regardless of different COVID-19 restrictions that may have been implemented in the respective different parts of the UK.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2998,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3428,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3440,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3864,"value":"html`

6. Air Quality Analysis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4527,"value":"html`

Notably, COVID-19 and the resulting percent change in overall mobility has also impacted air quality. The figure below outlines the percent change in overall mobility when compared to the baseline, the percent in overall air pollutants when compared to the baseline, and key policy implementations from March 2020 through February 2021.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4035,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4531,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4532,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3861,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3975,"value":"legend({\n color: d3.scaleSequential(colorDomainAQ, d3.interpolateLab(\"#F52D4F\",\"#0072bb\")),\n // color: d3.scaleSequential(colorDomainMob, d3.interpolateLab(\"black\", \"red\")),\n title: \"Median Change in Air Pollution From 2019 Baseline (%)\",\n tickFormat: \".0s\",\n ticks : width / 50,\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4537,"value":"html`

The percent change in overall air pollution by borough can also be visualised with a multi-line chart. In the figure below the percent change in air pollution compared to the baseline is plotted from March 2020 to February 2021 for each borough where each plotted line represents a borough. As indicated by red in the figure, the borough of Hillingdon experienced the lowest median drop in air pollutants while the borough of Richmond upon Thames experienced the highest median drop in air pollutants.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3898,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4051,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3489,"value":"html`

7. Demographic Analysis: Mobility Reductions by Income and Ethnicity
\n

7.1 Mobility vs. Income in London, UK\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4540,"value":"html`

Reductions in mobility can also be observed in relation to income. As illustrated in the figures below, while all boroughs have reduced their mobility to below that of baseline activity, wealthier boroughs have been able to reduce their mobility more than poorer boroughs. In the following figures, the bold yellow line indicates the median reduction of all of the (poor) boroughs where the median income is within the bottom quantile for income (i.e. the bottom 25% of earners). The bold green line indicates the median reduction of the (wealthy) boroughs where the median income is within the top quantile for income (i.e. the top 25% of earners).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3450,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4543,"value":"html`

In the figure above, when considering the percent change in aggregated overall mobility compared to baseline, the wealthiest boroughs were able to reduce their overall mobility on average to about 52% below baseline activity. Contrastly, poorer boroughs were only able to reduce their overall mobility on average to about 38% below baseline activity.

\n \nAs illustrated in the figure below, while all boroughs have experienced reduction in mobility relative to Work Habits, Retail and Recreation, Public Transportation, and Essential Services, wealthier boroughs continue to outperform poorer neighborhoods in mobility reductions for all categories of mobility.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3461,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4546,"value":"html`

Most strikingly, strong correlations between income and Work Habits exist. Residents of wealthier boroughs are able to reduce their mobility to the workplace more than residents of poorer boroughs. The wealthier the borough, the more likely that residents will not commute to work but will instead work from home. The poorer the borough, the more likely that residents will commute to work instead of working from home. In the figure below, use the dropdown menu on the top left to trigger the scatter plot and switch between \"People Going to Work\" and \"People Staying Home\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3788,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4268,"value":"html`

7.2 Mobility vs. Ethnicity in London, UK`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4549,"value":"html`

Additionally, reductions in mobility can also be observed in relation to ethnicity. As demonstrated in the figures below, while all boroughs have reduced their mobility to below that of baseline activity, predominantly white boroughs have been able to reduce their mobility more than predominantly BIPOC (Black, Indigenous, People of Colour) boroughs. In the following figures the bold dark blue line indicates the median percent change in mobility for the 25% boroughs with the highest proportion of BIPOC residents. Contrastly, the light blue line indicates the median percent change in mobility for the 25% boroughs with the lowest proportion of BIPOC residents and highest proportion of white residents.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3842,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4552,"value":"html`

In the figure above, when considering the percent change in aggregated overall mobility compared to baseline, the boroughs that are predominantly white were able to reduce their overall mobility on average to about 43% below baseline activity. Contrastly, boroughs that are predominantly BIPOC were only able to reduce their overall mobility on average to about 39% below baseline activity.

\n \nAs illustrated in the figure below, while all boroughs have experienced reduction in mobility relative to Work Habits, Retail and Recreation, Public Transportation, and Essential Services, whiter boroughs experienced greater reductions in mobility for all categories of mobility when compared to boroughs with a higher percentage of BIPOC residents.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4255,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4555,"value":"html`

Interestingly, though not as strong as those observed with income, correlations between ethnicity and Work Habits also exist. Residents of predominantly white boroughs are able to reduce their mobility to the workplace more than residents of predominantly BIPOC boroughs. The whiter the borough, the more likely that residents will not commute to work but will instead work from home. Contrastly, in boroughs that have a higher percentage of residents that are BIPOC, residents are more likely to commute to work instead of work from home. In the figure below, use the dropdown menu on the top left to trigger the scatter plot and switch between \"People Going to Work\" and \"People Staying Home\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4366,"value":"viewof metricE = select({\n title: \"Mobility Categories\",\n description: \"Select a Mobility Category\",\n options: [\n // {label:\"Total Mobility\", value: \"tot_mobility\"},\n {label:\"People Going to Work\", value: \"workplaces_percent_change_from_baseline\"},\n {label: \"People Staying Home\", value: \"residential_percent_change_from_baseline\"}\n ],\n value: \"residential_percent_change_from_baseline\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4387,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4369,"value":"legend({\n color: d3.scaleSequential(colorDomainW, d3.interpolateLab(\"#4d194d\", \"#009699\")),\n // color: d3.scaleSequential(colorDomainMob, d3.interpolateLab(\"black\", \"red\")),\n title: \"Proportion of White Residents\",\n tickFormat: \".0%\",\n ticks : width / 64,\n width: 950\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4834,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4887,"value":"viewof mapMetric = select({\n title: \"Map View\",\n description: \"Select a Variable to Visualize\",\n options: [\n // {label:\"Total Mobility\", value: \"tot_mobility\"},\n {label:\"Income\", value: \"Total annual income (£)\"},\n {label: \"Mobility\", value: \"tot_mobility\"}\n ],\n value: \"residential_percent_change_from_baseline\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8017,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5691,"value":"html`

8. UK-Wide Analysis: Income and Mobility

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8491,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8089,"value":"html`

Reductions in mobility can also be observed at a disaggregated level relative to Work Habits, Retail and Recreation, Public Transportation, and Essential Services across all of the UK spatially. As illustrated in the figures below, decreases in the percent change in mobility relative to baseline activity can be observed across all mobility types for all parts of the UK. At the UK-wide level, mobility relevant to Public Transportation experienced the greatest reductions in activity. Unsurprisingly at this same UK-wide level, mobility for Essential Services experienced the smallest reductions in activity. Intersetingly, across all types of mobility, the most drastic reductions in mobility patterns were observed in London.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8577,"value":"viewof showBounds = select({\n title: \"Show regional boundaries?\",\n description: \"Choose whether to show U.K. regional boundaries on hexagonal maps\",\n options: [\n // {label:\"Total Mobility\", value: \"tot_mobility\"},\n {label:\"Yes\", value: 3},\n {label: \"No\", value: 0}\n ],\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8065,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8092,"value":"html`

In aggregrating mobility change, the change in overall mobility relevant to baseline activity can also be observed in comparison to household income at the UK-wide level spatially. As outlined in the figure below, across the entire UK, wealthier local authority areas have been able to reduce their overall mobility more than poorer local authority areas. This pattern can be observed most strinkingly in the GLA.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5358,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8335,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8094,"value":"html`

As further illustrated in the figure below and considering a temporal scale, the wealthiest UK local authority areas were able to reduce their overall mobility more on average than poorer UK local authority areas for the entirety of the COVID-19 pandemic.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5594,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8098,"value":"html`

As further accentuated below, there exists a strong divide in working habits between wealthier and poorer UK residents. Residents of poorer local authority areas have decreased their travel to workplaces at smaller rates than residents from wealthier local authority areas. As such, those who reside in wealthier local authority areas have been able to increase their work-from-home habits at greater rates than those who reside in poorer local authority areas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5606,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8100,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8083,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5826,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8110,"value":"html`

8.1 Auxiliary Figures

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8232,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8318,"value":"viewof metric = select({\n title: \"Mobility Categories\",\n description: \"Select a Mobility Category\",\n options: [\n // {label:\"Total Mobility\", value: \"tot_mobility\"},\n {label:\"People Going to Work\", value: \"workplaces_percent_change_from_baseline\"},\n {label: \"People Staying Home\", value: \"residential_percent_change_from_baseline\"}\n ],\n value: \"workplaces_percent_change_from_baseline\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8635,"value":"$58","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8786,"value":"html`

color scheme`;\n form.i.selectedIndex = 0;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5858,"value":"$61","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5855,"value":"$62","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5853,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5851,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5848,"value":"xBivar = d3.scaleQuantile(Array.from(ukUpd_tot_map.values(), d => d[0]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5845,"value":"yBivar = d3.scaleQuantile(Array.from(ukUpd_tot_map.values(), d => d[1]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5843,"value":"colorBivar = {\n return value => {\n if (!value) return \"lightgrey\";\n let [a, b] = value;\n return colors[yBivar(b) + xBivar(a) * n];\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10062,"value":"colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5841,"value":"// formatBivar = (value) => {\n// if (!value) return \"N/A\";\n// let [a, b] = value;\n// return `${a}% ${ukUpd_tot_map.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}\n// ${b}% ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5829,"value":"ukUpd_tot_map = Object.assign(new Map(ukUpd_tot.map(d=>[d.area_code, [d[\"workplaces_percent_change_from_baseline\"], d[\"Total annual income (£)\"]]])), {title: [\"Travel to Workplaces\", \"Household Income\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8688,"value":"ukUpd_tot","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5837,"value":"md`### UK-WIDE analysis (need to clean up)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6133,"value":"d3.rollups(ukUpd, v=>d3.median(v, d => d.workplaces_percent_change_from_baseline), d => d.place_id)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5059,"value":"ukUpd_2020 = d3.csvParse(await FileAttachment(\"2020_GB_Region_Mobility_Report_0803.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6411,"value":"ukUpd_2021 = d3.csvParse(await FileAttachment(\"2021_GB_Region_Mobility_Report_1213.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6416,"value":"ukUpd = d3.merge([ukUpd_2020, ukUpd_2021])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7163,"value":"// ukUpd.filter(d=>(d.place_id === \"ChIJqZHHQhE7WgIReiWIMkOg-MQ\")).map((d,i)=>ukUpd[i-1])[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7212,"value":"// ukUpd.filter(d=>(d.place_id === \"ChIJqZHHQhE7WgIReiWIMkOg-MQ\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7269,"value":"viewof pctInterval = select({\n title: \"Time Interval for % change\",\n // description: \"Select a Variable to Visualize\",\n options: [\n // {label:\"Total Mobility\", value: \"tot_mobility\"},\n {label:\"1 day\", value: 1},\n {label: \"1 week\", value: 7},\n {label: \"1 month\", value: 30},\n ],\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7223,"value":"{\n const data = ukUpdPct.filter(d=>(d!==undefined) && (d.retailPctChange!==Infinity) && (d.retailPctChange!==-Infinity)&&(d.place_id === place))\n const plot = Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.line(data, {x: \"date\", y: \"retailPctChange\"})\n ]\n})\n // return plot\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7351,"value":"place = \"ChIJoynJR59ldkgRwGnsoi2uDgQ\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7353,"value":"// d3.rollup(ukUpdPct, v=> d3.mean(v, d=> d.retailPctChange), d => d.place_id)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7157,"value":"t = ukUpd.filter(d=>(d.place_id === \"ChIJqZHHQhE7WgIReiWIMkOg-MQ\"))//&&(d!==undefined))\n .map((d, i)=> {\n\n // const pctInterval = 7\n // if ((ukUpd[i-1] !== undefined) && (ukUpd[i] !== undefined)) {\n if (i>pctInterval-1) {\n\n \n const retailYesterday = ukUpd[i-pctInterval].retail_and_recreation_percent_change_from_baseline\n const retailToday = ukUpd[i].retail_and_recreation_percent_change_from_baseline\n const retailPctDayChange = Math.round(((retailYesterday-retailToday)/retailYesterday)*100)\n return {\n date: d.date,\n retailYesterday: retailYesterday,\n retailToday: retailToday,\n retailPctDayChange: retailPctDayChange\n // data: ukUpd[i-1]\n }\n } else {\n return undefined\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7375,"value":"// (ukUpdPct.filter(d=>d.retail_and_recreation_percent_change_from_baseline===0).length + ukUpdPct.filter(d=>d.grocery_and_pharmacy_percent_change_from_baseline===0).length + ukUpdPct.filter(d=>d.transit_stations_percent_change_from_baseline===0).length + ukUpdPct.filter(d=>d.workplaces_percent_change_from_baseline===0).length + ukUpdPct.filter(d=>d.residential_percent_change_from_baseline===0).length)/ukUpdPct.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7279,"value":"$63","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7419,"value":"// d3.median(ukUpdPct.filter(d=>(d.place_id === place)&& (d.retailPctChange!==Infinity) && (d.retailPctChange!==-Infinity)), d => d.retailPctChange)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10059,"value":"createJsonDownloadButton(ukUpd_tot, 'ukUpd_tot.json', 'Download UK agg data')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6798,"value":"ukUpd_tot = makeAggData(ukUpd)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9284,"value":"ukUpd_tot_dec_2021 = makeAggData(ukUpd.filter(d=>d.date>new Date(\"2021-12-01\")))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9286,"value":"ukUpd_tot_dec_2020 = makeAggData(ukUpd.filter(d=>(d.date>new Date(\"2020-12-01\"))&&(d.date {\n const start = new Date(d.date)\n const end = new Date(start.getFullYear(), start.getMonth(), start.getDate()+7);\n // end.setDate(start.getFullYear(), start.getMonth(), start.getDate()+7)\n const endDate = new Date(end.toISOString().split('T')[0])\n \n // const date = end.toISOString().split('T')[0]\n return {\n lockdown:d.id,\n start: start,\n end: endDate\n }\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6816,"value":"ukUpd_lockdowns = selectLockdownData===\"Raw\"?\n\n lockdowns.map(c=> {\n // const ts_slice = ukUpdPct.filter(d=>(d.date>=c.start)&&(d.date<=c.end))\n const date = c.start\n const ts_slice = ukUpd.filter(d=>(d.date>=c.start)&&(d.date<=c.end))\n \n const lockdown = c.lockdown\n const lkd = true\n const dataPct = makeAggData(ts_slice, lkd)\n // const dataPct = makeAggDataPct(ts_slice, lkd)\n const colorDomain = [d3.max(dataPct, d=>d['workplaces_percent_change_from_baseline']),d3.min(dataPct, d=>d['workplaces_percent_change_from_baseline'])]\n \n const data = dataPct.map(obj=> ({...obj, colorDomain: colorDomain}))\n return {lockdown, date, data}\n }\n )\n :\n lockdownHexFromFile\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8721,"value":"createJsonDownloadButton(ukUpd_lockdowns, 'lockdown_data.json', 'Download UK Lockdown Hex Data')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8753,"value":"lockdownHexFromFile = {\n const data = await FileAttachment(\"lockdown_data@1.json\").json({typed:true});\n const formatted = data.map(obj=>({...obj, date: new Date(obj.date)}));\n return formatted\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7563,"value":"// ukUpd_lockdowns.map(d=> d.data.map(c=>\n// [d3.max(d.data,d=>d['workplaces_percent_change_from_baseline']),\n// d3.min(d.data,d=>d['workplaces_percent_change_from_baseline'])]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6931,"value":"hexes_t = d3.renderHexJSON(hex_la, colScale.bandwidth(), rowScale.bandwidth())//BIND THIS TO UKUPD_LOCKDOWNS","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6870,"value":"numberOfCols = 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6873,"value":"numberOfRows = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6875,"value":"colScale = d3.scaleBand()\n .domain(d3.range(numberOfCols))\n .range([0, smDimensions.visWidth])\n .padding(0.05)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6878,"value":"rowScale = d3.scaleBand()\n .domain(d3.range(numberOfRows))\n .range([0, smDimensions.visHeight])\n .padding(0.05)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7755,"value":"$66","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7757,"value":"hideTooltip = function hideTooltip(event, d) {\n\n // d3.select('#spike'+ color + d.id)\n // .attr(\"stroke\", color)\n // .attr(\"class\", \"spike\"+color)\n\n // d3.selectAll('.spikered')\n // .attr(\"fill-opacity\", 0.2)\n // .attr(\"stroke-opacity\", 0.6)\n\n // d3.selectAll('.spikesteelblue')\n // .attr(\"fill-opacity\", 0.3)\n // .attr(\"stroke-opacity\", 1)\n // .raise()\n \n tooltip\n .transition()\n .duration(500)\n .style(\"opacity\", 0);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7759,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n // .style(\"font-size\", \"10pt\")\n // .style(\"font-family\", \"Lato\")\n .style(\"position\", \"absolute\")\n .style(\"text-align\", \"left\")\n .style(\"width\", \"auto\")\n .style(\"height\", \"auto\")\n .style(\"padding\", \"5px\")\n .style(\"background\", \"black\")\n .attr(\"stroke\", \"white\")\n .style(\"pointer-events\", \"none\")\n .style(\"opacity\", 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7816,"value":"formatYearMonth = d3.timeFormat(\"%b %Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9265,"value":"$67","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4957,"value":"// d3.json(\"https://pastelsky.github.io/covid-19-mobility-tracker/output/BR/mobility.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4965,"value":"// t = d3.csv(\"https://raw.githubusercontent.com/ActiveConclusion/COVID19_mobility/master/google_reports/mobility_report_europe.xlsx\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4999,"value":"// wb = xlsx.read(new Uint8Array(d3.csv(\"https://raw.githubusercontent.com/ActiveConclusion/COVID19_mobility/master/google_reports/mobility_report_europe.xlsx\")), {type: 'array'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5004,"value":"// ws = wb.Sheets.Sheet1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5006,"value":"// as_json = xlsx.utils.sheet_to_json(ws)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4974,"value":"// t.filter(d=>(d.country === \"United Kingdom\")&&(d.region === \"Cumbria\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5023,"value":"// loadExcel(\"https://raw.githubusercontent.com/ActiveConclusion/COVID19_mobility/master/google_reports/mobility_report_europe.xlsx\", {\n// type: \"array\"\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5033,"value":"// fetch(\"https://google-mobility-data.p.rapidapi.com/api/data?name=France\", {\n// \t\"method\": \"GET\",\n// \t\"headers\": {\n// \t\t\"x-rapidapi-key\": \"bd5010b7eemsh00ab5684fa6a7efp15b791jsnd00e2d098829\",\n// \t\t\"x-rapidapi-host\": \"google-mobility-data.p.rapidapi.com\"\n// \t}\n// })//.then(res => res.text())\n// .then(response => {\n// \tconsole.log(response);\n// })\n// // .catch(err => {\n// // \tconsole.error(err);\n// // });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4953,"value":"md`#### To do\n- Add boundary regions (https://github.com/olihawkins/d3-hexjson/tree/master/examples)\n- Add hover UX\n- Add tooltip with small mobility graph\n- make small multiple graph of Income, COVID, Mobility Drop\n- multiple views: map interact with line chart\n- ADD AREA CODE ON INCOME data (get uk income separately)\n- where Northern Ireland, Wales, Scotland??`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2524,"value":"md`#### Data Sources\n- https://data.london.gov.uk/dataset/coronavirus--covid-19--cases\n- https://www.google.com/covid19/mobility/\n- https://www.health.org.uk/news-and-comment/charts-and-infographics/covid-19-policy-tracker\n- https://www.ons.gov.uk/employmentandlabourmarket/peopleinwork/earningsandworkinghours/datasets/smallareaincomeestimatesformiddlelayersuperoutputareasenglandandwales\n- https://www.londonair.org.uk/LondonAir/Default.aspx`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2772,"value":"html`\n_________________________________________________________________________________________________________________________`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3160,"value":"md`### Concepts & Methodology\n#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3174,"value":"$68","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3188,"value":"md`#### Assumptions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3190,"value":"$69","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3194,"value":"md`#### Analysis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3199,"value":"html`In order to analyse this data within the bounds of the proposed assumptions, the Python and R programming languages were used. With Python and R, data sources were loaded, merged, cleaned, and filtered according to COVID-19 cases, mobility categories, income, and ethnicity for cities of interest. Average mobility at the city and borough level was calculated. Average air quality at the city and borough level was also calculated. Exploratory data analysis was then performed. In exploring the data, it was possible to observe key important trends and select the most effective visualisation techniques. Data was then visualised with the Javascript, HTML, and CSS programming languages in an Observable notebook. For the Cartograms we used the London Squared D3.js layout developed by

After the flood. All code used for the analysis part of this project can be found on Github.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4811,"value":"md`### hex mapping`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5165,"value":"loa_google.filter(c=>c.lad19nm===\"City of London\")[0]//.lad19cd","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4855,"value":"loa_google = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/75225f0d73379a2e655adba5c7ab2e73/raw/a9fc2eafef3ce111898f527933ee6a60de7c0e8c/loa_to_google.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4859,"value":"boroughIncMob","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4914,"value":"hexes_[0].n.slice(0,3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4825,"value":"hexes_ = d3.renderHexJSON(hex_la, width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5280,"value":"boundarySegments_ = d3.getBoundarySegmentsForHexJSON(hex_la, width, height, \"region\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4814,"value":"hex_la = d3.json(\"https://raw.githubusercontent.com/odileeds/hexmaps/gh-pages/maps/uk-local-authority-districts-2021.hexjson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"md`#### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5523,"value":"$6a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5021,"value":"loadExcel = async (uri, option = { type: \"array\" }) => {\n const wb = await loadExcelWorkbook(uri, option);\n const ws = wb.Sheets[wb.SheetNames[0]];\n const json = xlsx.utils.sheet_to_json(ws);\n return json;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5019,"value":"loadExcelWorkbook = async (uri, option = { type: \"array\" }) => {\n const buffer = await d3.buffer(uri);\n const array = new Uint8Array(buffer);\n const wb = xlsx.read(array, option);\n return wb;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5999,"value":"function wrap2(text, wrapWidth, yAxisAdjustment = 0) {\n text.each(function() {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.1, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")) - yAxisAdjustment,\n tspan = text.text(null).append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", `${dy}em`);\n while (word = words.pop()) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (tspan.node().getComputedTextLength() > wrapWidth) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text.append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\").text(word);\n }\n }\n });\n return 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3216,"value":"$6b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1718,"value":"area = d3.area()\n .x(d => xScaleWide(new Date(d.date)))\n .y1(d => yScaleCovid(+d.new_cases))\n .y0(d => yScaleCovid(0))\n .curve(d3.curveBasis)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2609,"value":"lineGeneratorWwide = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScaleWide(d.date))\n .y((d)=>yScale(d.wValue))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"lineGeneratorW = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScale(d.date))\n .y((d)=>yScale(d.wValue))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2612,"value":"lineGeneratorTwide = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScaleWide(d.date))\n .y((d)=>yScale(d.tValue))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"lineGeneratorT = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScale(d.date))\n .y((d)=>yScale(d.tValue))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2614,"value":"lineGeneratorGwide = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScaleWide(d.date))\n .y((d)=>yScale(d.gValue))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"lineGeneratorG = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScale(d.date))\n .y((d)=>yScale(d.gValue))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2616,"value":"lineGeneratorReWide = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScaleWide(d.date))\n .y((d)=>yScale(d.reValue))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"lineGeneratorRe = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScale(d.date))\n .y((d)=>yScale(d.reValue))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2623,"value":"lineGeneratorRwide = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScaleWide(d.date))\n .y((d)=>yScale(d.rValue))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1225,"value":"lineGeneratorR = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScale(d.date))\n .y((d)=>yScale(d.rValue))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"lineGeneratorCovid = d3.line()\n .defined(function(d) { return !isNaN(d.new_cases); })\n .x((d)=>xScaleWide(new Date(d.date)))\n .y((d)=>yScaleCovid(+d.new_cases))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(0.8))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3902,"value":"lineGeneratorAQ = d3.line()\n .defined(function(d) { return ((d.AQIdrop!==0)); })\n .x((d)=>xScaleAQ(d.date))\n .y((d)=>yScaleAQ(d.AQIdrop))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"lineGenerator = d3.line()\n .defined(function(d) { return ((d.value!==0)); })\n .x((d)=>xScale(d.date))\n .y((d)=>yScale(d.value))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2150,"value":"lineGeneratorCities = d3.line()\n .defined(function(d) { return ((d.tot_mobility!==0)); })\n .x((d)=>xScaleWide(d.date))\n .y((d)=>yScale(+d.value))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4066,"value":"lineGeneratorAggAQ = d3.line()\n .defined(function(d) { return ((d.AQindex_pc_change_from_baseline!==0)); })\n .x((d)=>xScaleWideAQ(new Date(d.ReadingDateTime)))\n .y((d)=>yScaleAQGLA(+d.AQindex_pc_change_from_baseline))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"lineGeneratorAggMob = d3.line()\n .defined(function(d) { return ((d.tot_mobility!==0)); })\n .x((d)=>xScaleWide(new Date(d.date)))\n .y((d)=>yScale(+d.tot_mobility))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1551,"value":"md`#### Axes and Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3838,"value":"ethnicColors = {\n const ethnicNames = boroughMob.map(d => d.ethnicMaj)\n return d3.scaleOrdinal( \n ethnicNames,\n // d3.schemeCategory10\n [\"#009699\", \"#4d194d\"]\n // 1f8c3c\n )\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2301,"value":"incomeColors = {\n const incomeNames = boroughMob.map(d => d.incomeS)\n return d3.scaleOrdinal( \n incomeNames,\n // d3.schemeCategory10\n [\"#385704\", \"#f4c20c\"]\n // 1f8c3c\n )\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2131,"value":"cityColors = {\n const cityNames = cityMob.map(d => d.code)\n return d3.scaleOrdinal( \n cityNames,\n [\"#70C8F2\", \"#E5B541\", \"#096E76\", \"#695B78\", \"#0B72B8\", \"#1B2140\", \"#3AB3B6\", \"#CBCACF\", \"#9D1A5F\"]\n // d3.schemeCategory10 \n )\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4467,"value":"yAxisScatterELD = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleTotMobELD).tickFormat(function(d, i) {\n return d + \"%\"}))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Average Mobility Drop Since Feb 2020\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3809,"value":"yAxisScatterLD = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleTotMobLD).tickFormat(function(d, i) {\n return d + \"%\"}))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Average Decrease in People Going to Workplaces Since Feb 2020\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3674,"value":"yAxisScatter = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleTotMob))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Average Change in People Going to Workplaces Since Feb. 2020\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4397,"value":"xAxisScatterELD = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScaleEthnicityLD))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Proportion of White Residents\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3805,"value":"xAxisScatterLD = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScaleIncomeLD))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Average Income\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3671,"value":"xAxisScatter = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScaleIncome))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Average Income\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4465,"value":"yScaleTotMobELD = d3.scaleLinear()\n // .domain(d3.extent(boroughIncMob, d => +d[metric])).nice()\n .domain(metricE===\"tot_mobility\"? [-70, -40]: \n metricE===\"residential_percent_change_from_baseline\"? [14, 28]: \n d3.extent(boroughEMob, d => +d[metricE])).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3803,"value":"yScaleTotMobLD = d3.scaleLinear()\n // .domain(d3.extent(boroughIncMob, d => +d[metric])).nice()\n .domain(metric===\"tot_mobility\"? [-70, -40]: \n metric===\"residential_percent_change_from_baseline\"? [14, 28]: \n d3.extent(boroughIncMob.filter(c=>c.city===\"Greater London\"), d => +d[metric])).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3660,"value":"yScaleTotMob = d3.scaleLinear()\n // .domain(d3.extent(boroughIncMob, d => +d[metric])).nice()\n .domain(metric===\"tot_mobility\"? [-60,-10]: \n metric===\"residential_percent_change_from_baseline\"? [8, 30]: \n d3.extent(boroughIncMob, d => +d[metric])).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4395,"value":"xScaleEthnicityLD = d3.scaleLinear()\n .domain([0.25, d3.max(boroughEMob, d => +d[\"White\"])]).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3801,"value":"xScaleIncomeLD = d3.scaleLinear()\n .domain(d3.extent(boroughIncMob.filter(c=>c.city===\"Greater London\"), d => +d[\"Total annual income (£)\"])).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3652,"value":"xScaleIncome = d3.scaleLinear()\n .domain(d3.extent(boroughIncMob, d => +d[\"Total annual income (£)\"])).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"xScaleBins = d3.scaleLinear()\n .domain([bins[0].x0, bins[bins.length - 1].x1])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"yScaleBins = d3.scaleLinear()\n .domain([0, d3.max(bins, d => d.length)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"yAxisCovid = g =>\ng\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(\n d3\n .axisLeft(yScaleCovid)\n .ticks(9)\n .tickSize(5)\n .tickSizeOuter(0)\n )\n .call(g => g.select(\".domain\").remove())\n .attr('class', 'AxisWide')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4139,"value":"yAxisAQGLA = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleAQGLA)\n .tickFormat(function(d, i) {\n if(i == baselineTickAQGLA) {\n return 'Baseline';\n } else {\n return d + \"%\"}\n return d;\n }))\n .call(g => g.selectAll(\".tick\")\n .select(\"text\")\n .attr(\"font-weight\", function(d,i) {return (i == baselineTickAQGLA) ? 600 : 100}))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", 700)\n .attr(\"font-size\", 8) \n // .text(\"% Change in Mobility Compared to Baseline\")\n )\n .attr('id', 'yAxis')\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4069,"value":"yAxisAQ = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleAQ)\n .tickFormat(function(d, i) {\n if(i == baselineTickAQ) {\n return 'Baseline';\n } else {\n return d + \"%\"}\n return d;\n }))\n .call(g => g.selectAll(\".tick\")\n .select(\"text\")\n .attr(\"font-weight\", function(d,i) {return (i == baselineTickAQ) ? 600 : 100}))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", 700)\n .attr(\"font-size\", 8) \n // .text(\"% Change in Mobility Compared to Baseline\")\n )\n .attr('id', 'yAxis')\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale)\n .tickFormat(function(d, i) {\n if(i == baselineTick) {\n return 'Baseline';\n } else {\n return d + \"%\"}\n return d;\n }))\n .call(g => g.selectAll(\".tick\")\n .select(\"text\")\n .attr(\"font-weight\", function(d,i) {return (i == baselineTick) ? 600 : 100}))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", 700)\n .attr(\"font-size\", 8) \n // .text(\"% Change in Mobility Compared to Baseline\")\n )\n .attr('id', 'yAxis')\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1710,"value":"xAxisWide = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(xScaleWide)\n .ticks(9)\n .tickSize(5)\n .tickSizeOuter(0)\n )\n .attr('class', 'AxisWide')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(xScale)\n .ticks(9)\n .tickSize(5)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"yScaleCovid = d3\n .scaleLinear()\n .domain(covidExtent)\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4137,"value":"yScaleAQGLA = d3\n .scaleLinear()\n .domain(AQIextentGLA)\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3909,"value":"yScaleAQ = d3\n .scaleLinear()\n .domain(AQIextent)\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"yScale = d3\n .scaleLinear()\n .domain(mobilityExtent)\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4090,"value":"xScaleWideAQ = d3\n .scaleUtc()\n .domain(dateExtent)\n .range([margin.left, widthWide - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"xScaleWide = d3\n .scaleUtc()\n .domain(dateExtent)\n .range([margin.left, widthWide - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"xScale = d3\n .scaleUtc()\n .domain(dateExtent)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3906,"value":"xScaleAQ = d3\n .scaleUtc()\n .domain(dateExtent)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"md`#### Extents and Domains`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"dateExtent = d3.extent(mobilityCities, d=>new Date(d.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3883,"value":"AQdateExtent = [new Date(\"2020-02-10\"), d3.max(AQdataBoroughs, d=>new Date(d.ReadingDateTime))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4105,"value":"AQdateExtentAgg = [new Date(\"2020-01-01\"), new Date(\"2021-02-07\")] //d3.extent(AQdataBoroughs, d=>new Date(d.ReadingDateTime))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4111,"value":"AQIextentGLA = [-58.76655569991438, 15]//d3.extent(AQdataGLA, d=>d.AQindex_pc_change_from_baseline)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3870,"value":"AQIextent = boroughAQ.reduce((extent, current, i, a)=>{\n const currentExtent = d3.extent(current.AQ, d=>d.AQIdrop);\n if(i==0){ extent = currentExtent }\n return [ \n Math.min(currentExtent[0], extent[0]), \n Math.max(currentExtent[1]+20, extent[1])\n ];\n},[]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"mobilityExtent = boroughMob.reduce((extent, current, i, a)=>{\n const currentExtent = d3.extent(current.mobility, d=>d.value);\n if(i==0){ extent = currentExtent }\n return [ \n Math.min(currentExtent[0], extent[0]), \n Math.max(currentExtent[1]+20, extent[1])\n ];\n},[]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1414,"value":"covidExtent = d3.extent(covidData, d=>+d.new_cases)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4371,"value":"colorDomainW = [0.25, d3.max(mobilityData, d=>Number(d['White']))];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3734,"value":"colorDomainInc = d3.extent(boroughIncMob, d=>Number(d['Total annual income (£)']));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3878,"value":"colorDomainAQ = [0, -25.25024548681918]//d3.extent(boroughAQ, d=>Number(d['median']));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"colorDomainMob = d3.extent(boroughMob, d=>Number(d['median']));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"colorDomain = d3.extent(covidBoroughs, d=>Number(d['total_cases']));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"md`#### Data + Preprocessing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"bins = d3.bin()\n .domain(xScale.domain())\n .value(d => new Date(d.date))\n .thresholds(xScale.ticks(d3.timeDay))(covidData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3858,"value":"boroughAQ = {\n AQdataBoroughs;\n const dateParse = d3.timeParse('%Y-%m-%d');\n const extent = [];\n const dataByBorough = AQdataBoroughs.reduce((accumulator, current)=>{\n const PMdrop = 'PM25_pc_change_from_baseline';\n const NOdrop = 'NO2_pc_change_from_baseline';\n const AQdrop = 'AQindex_pc_change_from_baseline';\n const codeProp = 'GSS_CODE';\n\n if(!accumulator[current[codeProp]]){\n accumulator[current[codeProp]] = [];\n }\n accumulator[current[codeProp]].push({\n PM25drop: Number(current[PMdrop]),\n NO2drop: Number(current[NOdrop]),\n AQIdrop: Number(current[AQdrop]),\n date: dateParse(current['ReadingDateTime'])\n });\n return accumulator;\n }, {});\n return Object.keys(dataByBorough).map(d=>({code:d, AQ:dataByBorough[d], \n median: Number(d3.median(dataByBorough[d].map(e=>e.AQIdrop)))}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"$6c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3484,"value":"$6d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2112,"value":"$6e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4583,"value":"md`##### Raw Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9491,"value":"latestCovidUpdate = d3.extent(d3.merge([ukCovidApiLoaLower, ukCovidApiLoaUpper]), d=>d.date)[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9459,"value":"ukCovidApiLoa2020 = d3.rollup(d3.merge([ukCovidApiLoaLower, ukCovidApiLoaUpper]).filter(\n d=>(d.date> new Date(\"2020-12-01\"))&&\n (d.date< new Date(\"2020-12-13\"))), \n v => d3.sum(v, d => +d[\"newCasesByPublishDate\"]), d => d[\"areaCode\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9449,"value":"ukCovidApiLoa2021 = d3.rollup(d3.merge([ukCovidApiLoaLower, ukCovidApiLoaUpper]).filter(d=>d.date> new Date(\"2021-12-01\")), v => d3.sum(v, d => +d[\"newCasesByPublishDate\"]), d => d[\"areaCode\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9447,"value":"ukCovidApiLoaLower = d3.csv(\"https://api.coronavirus.data.gov.uk/v2/data?areaType=ltla&metric=newCasesByPublishDate&format=csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9444,"value":"ukCovidApiLoaUpper = d3.csv(\"https://api.coronavirus.data.gov.uk/v2/data?areaType=utla&metric=newCasesByPublishDate&format=csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9123,"value":"londonCovidApi = d3.csv(\"https://api.coronavirus.data.gov.uk/v2/data?areaType=region&areaCode=E12000007&metric=newCasesBySpecimenDate&format=csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8889,"value":"ukCovidApi = d3.csv(\"https://api.coronavirus.data.gov.uk/v2/data?areaType=overview&metric=newCasesBySpecimenDate&format=csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5754,"value":"incomeLOA = d3.rollup(incomeLOA_raw, v => d3.mean(v, d => +d[\"Total annual income (£)\"].trim().replace(\",\",\"\")), d => d[\"Local authority code\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8329,"value":"popLOA = d3.rollup(popLOA_raw, v => d3.mean(v, d => +d[\"All ages\"]), d => d[\"Code\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8326,"value":"popLOA_raw = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/80acb6ca345efd71a49f1e9a7e3855ad/raw/6d40d0f36f3d98eae534dca6cf100eb228317686/ukpopestimatesmid2020on2021geography.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5751,"value":"incomeLOA_raw = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/fb38b11e3ee566f5fc2dd4a8ee4a7fc4/raw/a37b54dc60d5a8f3297a9c83d6a5baa172193dc2/incomeestimatesforsmallareas.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3279,"value":"nationalPolicies = [{\n id: \"First National Lockdown\",\n date: \"2020-03-23\", \n y: 40,\n text_anchor: \"start\",\n speech: \"\",\n url: \"\"\n }, {\n id: \"Circuit Breaker Lockdown (Wales-only)\",\n date: \"2020-10-23\", \n y: 80,\n text_anchor: \"end\",\n speech: \"\",\n url: \"\"\n }, {\n id: \"Second National Lockdown (England-only)\",\n date: \"2020-11-05\", \n y: 40,\n text_anchor: \"end\",\n speech: \"\",\n url: \"\"\n }, {\n id: \"Glasgow Tier 4\",\n date: \"2020-11-20\", \n y: 60,\n text_anchor: \"end\",\n speech: \"\",\n url: \"\"\n }]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8692,"value":"recent2021Policies = [{\n id: \"First National Lockdown\",\n date: \"2020-03-23\", \n y: 40,\n text_anchor: \"start\",\n speech: \"\",\n url: \"\"\n }, {\n id: \"Circuit Breaker Lockdown (Wales-only)\",\n date: \"2020-10-23\", \n y: 80,\n text_anchor: \"end\",\n speech: \"\",\n url: \"\"\n }, {\n id: \"Second National Lockdown (England-only)\",\n date: \"2020-11-05\", \n y: 40,\n text_anchor: \"end\",\n speech: \"\",\n url: \"\"\n }, {\n id: \"Glasgow Tier 4\",\n date: \"2020-11-20\", \n y: 60,\n text_anchor: \"end\",\n speech: \"\",\n url: \"\"\n }]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1871,"value":"$6f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6996,"value":"policies_tot = d3.merge([nationalPolicies, policies])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7152,"value":"$70","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"covidBoroughs = d3.csv('https://gist.githubusercontent.com/lnicoletti/3c31d0a0b9dac5506ca17f2a03f7fda4/raw/46ca93e0ba3b56fbdd7b8605eff553dc7ac5f038/london_covid_tot_0222.csv')\n\n// https://gist.githubusercontent.com/lnicoletti/3c31d0a0b9dac5506ca17f2a03f7fda4/raw/46ca93e0ba3b56fbdd7b8605eff553dc7ac5f038/london_covid_tot_0222.csv\n\n// https://gist.githubusercontent.com/lnicoletti/a85be0474bc536faa9a899183e8afc1c/raw/7ed6553560ff3f11c81159ab2abeeff38ce5cad1/london_covid_tot.csv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4392,"value":"boroughEMob = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/aab0206acee57bf8e3569da88694eb8a/raw/7829d0d8d8e1f656a4415d22b0aca8a57a8ca455/uk_mobility_boroughs_vs_ethnicity_0222.csv\")\n\n// https://gist.githubusercontent.com/lnicoletti/aab0206acee57bf8e3569da88694eb8a/raw/7829d0d8d8e1f656a4415d22b0aca8a57a8ca455/uk_mobility_boroughs_vs_ethnicity_0222.csv\n\n// https://gist.githubusercontent.com/lnicoletti/838d77f2f6ee09fde646aaf1d51dff54/raw/fc21c5f0e0564030bf0ffe62db78f16eafd22ea1/uk_mobility_boroughs_vs_ethnicity_0206.csv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3647,"value":"boroughIncMob = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/d64584223e7dd2f1cb692e7e7916b7b8/raw/474b29a9364c171fe8844ce9f6369e5a1b428d7a/uk_mobility_boroughs_vs_income_0222.csv\")\n\n// https://gist.githubusercontent.com/lnicoletti/d64584223e7dd2f1cb692e7e7916b7b8/raw/474b29a9364c171fe8844ce9f6369e5a1b428d7a/uk_mobility_boroughs_vs_income_0222.csv\n\n// https://gist.githubusercontent.com/lnicoletti/5a75ccc8a280fa4f27b89c527a31819d/raw/049024e3d6975b41188a582e2f85e429dbac4529/uk_mobility_boroughs_vs_income_0206.csv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2970,"value":"covidData = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/eb3b0baae3055f2123aa662c7f587fb6/raw/e307786321ab971c6821983f3086af65ad560f3c/london_covid_time_0222.csv\")\n// https://gist.githubusercontent.com/lnicoletti/eb3b0baae3055f2123aa662c7f587fb6/raw/e307786321ab971c6821983f3086af65ad560f3c/london_covid_time_0222.csv\n\n// https://gist.githubusercontent.com/lnicoletti/ba017024023a9a6aa175103ec6083dd9/raw/dcedaa8fad629108bfa025f7f24aa7a25f409fed/london_covid_time_0206.csv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2976,"value":"mobilityCities = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/0912e160d0f5a3b8641569df8d44ed00/raw/d7dcddb955056c9fe8ce17a5130e639d9503777c/cities_mob_0222.csv\")\n// https://gist.githubusercontent.com/lnicoletti/0912e160d0f5a3b8641569df8d44ed00/raw/d7dcddb955056c9fe8ce17a5130e639d9503777c/cities_mob_0222.csv\n\n// https://gist.githubusercontent.com/lnicoletti/f86f9a22d10223ec92f4c8a99482b75a/raw/32c7ca74fd3af83a1aed8964c886f6568896d851/cities_mob_0206.csv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2366,"value":"mobilityData = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/7f72c5d8cdedfa752a4ed6dfc31073fc/raw/b14450c3e3ed844230397968487283019768ae18/london_mobility_boroughs_demographics_agg_0222.csv\")\n// https://gist.githubusercontent.com/lnicoletti/7f72c5d8cdedfa752a4ed6dfc31073fc/raw/b14450c3e3ed844230397968487283019768ae18/london_mobility_boroughs_demographics_agg_0222.csv\n\n// https://gist.githubusercontent.com/lnicoletti/7a4e79a0442116613d30b18de6fdd96d/raw/1666e3bd79e429890f270fa7be00e3cfa3a15220/london_mobility_boroughs_demographics_agg_0206.csv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4172,"value":"AQdataBoroughs = AQdataBoroughsRaw.filter(d=>new Date(d.ReadingDateTime)>new Date(\"2020-02-10\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3853,"value":"AQdataBoroughsRaw = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/000b12829510369159ca7ed76e4f44cd/raw/c157f119a455c7c435e43f5395d2339dfb2d132c/AQ_boroughs.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3850,"value":"AQdataGLA = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/c57bbb6a40ebb1e00ac34d1ea4504c4a/raw/1840020c2faeadd8ab657e18c8eb9d80013efd0e/AQ_gla.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3474,"value":"mobilityDataUK = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/01d481244751de64f9a45eea4a6223d5/raw/6dc0e44045c3c5f40120f925654a5b33b310e442/uk_mobility_boroughs_demographics_agg_0222.csv\")\n\n// https://gist.githubusercontent.com/lnicoletti/01d481244751de64f9a45eea4a6223d5/raw/6dc0e44045c3c5f40120f925654a5b33b310e442/uk_mobility_boroughs_demographics_agg_0222.csv\n\n// https://gist.githubusercontent.com/lnicoletti/0316fa8d74fcadc6e187e3fffbc7980b/raw/4f0049c4611216e773f89adf96eda25de9c7d496/uk_mobility_boroughs_demographics_agg_0206.csv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"md`#### Constants, Modules, Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4144,"value":"baselineTickAQGLA = 6;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4073,"value":"baselineTickAQ = 6;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"baselineTick = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"margin = ({ top: 20, right: 20, bottom: 20, left: 57.5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"width = 480","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1687,"value":"widthWide = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`import modules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require('d3', \"d3-hexjson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5309,"value":"import {Plot} from \"@observablehq/plot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3699,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8715,"value":"function createJsonDownloadButton(data, filename = 'data.json', buttonTitle = 'Download JSON') {\n const blob = new Blob([JSON.stringify(data, null, 2)], {type: \"text/json\"});\n return DOM.download(blob, filename, buttonTitle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"atf = require('https://bundle.run/@aftertheflood/londonsquared@0.3.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1776,"value":"$71","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4996,"value":"xlsx = require('xlsx@0.16.9/dist/xlsx.full.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W72","stdlib":"1","titling":"auto"}} 30:"$2f:body"