The avatar for @chris-creditdesign
Chris Ryan
Senior Art Editor at Nature News in London.
Published
Edited
May 31, 2021
4 stars
11
Insert cell
Insert cell
Insert cell
gb = FileAttachment("gb-only-data.csv").csv({ typed: true })
Insert cell
columns = gb.columns.slice(1)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
projectionWorldSubRegion1 = d3.geoNaturalEarth1()
Insert cell
pathWorldSubRegion1 = d3.geoPath(projectionWorldSubRegion1)
Insert cell
Insert cell
Insert cell
Insert cell
usaData = FileAttachment("data-usa-parks.json").json()
Insert cell
projectionUsa = d3.geoAlbersUsa()
Insert cell
pathUsa = d3.geoPath(projectionUsa)
Insert cell
viewof currentDayUsa = Inputs.range([0, 462], {
value: 1,
step: 1,
label: "Current Day Number:"
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataLondonAll = FileAttachment("london-all.json").json()
Insert cell
Insert cell
datesLondon[461]
Insert cell
lockdownDatesLondon = FileAttachment("lockdown-dates-2@1.csv").csv()
Insert cell
lockdownDatesLondonUnix = lockdownDatesLondon.map(d => {
let start = new Date(d.start);
let end = new Date(d.end);
d.startUnix = start.valueOf();
d.endUnix = end.valueOf();

return d;
})
Insert cell
lockdownDatesArray = lockdownDatesLondonUnix.reduce(
(accumulator, currentValue) => {
accumulator.push(currentValue.endUnix);
return accumulator;
},
[]
)
Insert cell
lockdownMeasuresArray = lockdownDatesLondonUnix.reduce(
(accumulator, currentValue) => {
accumulator.push(currentValue.lockdown);
return accumulator;
},
[]
)
Insert cell
lockDownMeasureScale = d3
.scaleThreshold()
.domain(lockdownDatesArray)
.range(lockdownMeasuresArray)
Insert cell
spikeScaleLondon = d3
.scaleLinear()
.domain([-100, 100])
.range([-100, 100])
Insert cell
Insert cell
Insert cell
mapLondon2 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, heightGB]);

const g = svg.append("g");

g.append("path")
.attr("d", pathLondon(land))
.attr("fill", "#ddd");

g.append("path")
.datum(london)
.attr("d", pathLondon)
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("stroke-width", 1);

svg
.append("g")
.attr("fill-opacity", 0.3)
.selectAll("path")
.data(dataLondonAll)
.join("path")
.attr("transform", d => `translate(${projectionLondon([d.lng, d.lat])})`)
.attr("fill", d => colorGB(d[locationLondon2][currentDayLondon2]))
.attr("stroke", d => colorGB(d[locationLondon2][currentDayLondon2]))
.attr("d", d =>
spikeGB(spikeScaleGB(d[locationLondon2][currentDayLondon2]))
)
.append("title")
.text(d => d["sub_region_2"]);

svg
.append("text")
.attr("x", 20)
.attr("y", 40)
.text(datesLondon[currentDayLondon2]);

svg
.append("text")
.attr("x", 20)
.attr("y", 80)
.text(lockDownMeasureScale(new Date(datesLondon[currentDayLondon2])));

return svg.node();
}
Insert cell
Insert cell
import { swatches as Swatches } from "@d3/color-legend"
Insert cell
topojson = require("topojson-client@3")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more