Published
Edited
Dec 31, 2020
1 star
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg
.append("g")
.attr("class", "grid")
.attr("transform", `translate(${margin.left},0)`)
.call(
d3
.axisLeft(y)
.tickSize(-width + margin.right + margin.left)
.tickFormat("")
);
var props = [
'retailRecreation',
'groceryPharmacy',
'parks',
'transitStations',
'workplaces',
'residential'
];
var labels = [
'Retail & recreation',
'Grocery & pharmacy',
'Parks',
'Transit stations',
'Workplaces',
'Residential'
];
const path = svg
.append("g")
.selectAll("path")
.data(props)
.join("path")
.attr("fill", "none")
.attr("stroke", (d, i) => color(i))
.attr("stroke-width", 1.5)
.attr("d", d => line(d)(data));
const legendRects = svg
.append("g")
.selectAll("rect")
.data(props)
.join("g")
.attr(
"transform",
(d, i) =>
`translate(${width - margin.right + 20}, ${i * 20 + margin.top})`
);
legendRects
.append('rect')
.attr("width", 15)
.attr("height", 15)
.attr("fill", (d, i) => color(i));
legendRects
.append('text')
.attr('x', 17)
.attr('y', 10)
.attr('font-size', '12')
.text((d, i) => labels[i]);
return svg.node();
}
data = mobilityData.filter(d => d.date > cutoffDate)
cutoffDate = {
var now = new Date();
now.setDate(now.getDate() - 90);
return now;
}
color = d3.scaleOrdinal(d3.schemeTableau10)
style = html`
<style>
.grid line {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
</style>
`
x = d3
.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain([-100, 100])
.nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickFormat(d => d + "%"))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 15)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("Visits and length of stay change compared to the baseline period (Jan 3 – Feb 6, 2020)"));
line = function(prop) {
return d3.line()
.curve(d3.curveMonotoneX)
.x(d => x(d.date))
.y(d => y(d[prop]));
}
mobilityData = {
const parseDate = d3.utcParse("%m/%d/%Y");
var retval = d3.csv(
url,
({
date,
retail_and_recreation_percent_change_from_baseline,
grocery_and_pharmacy_percent_change_from_baseline,
parks_percent_change_from_baseline,
transit_stations_percent_change_from_baseline,
workplaces_percent_change_from_baseline,
residential_percent_change_from_baseline
}) => ({
date: parseDate(date),
retailRecreation: +retail_and_recreation_percent_change_from_baseline,
groceryPharmacy: +grocery_and_pharmacy_percent_change_from_baseline,
parks: +parks_percent_change_from_baseline,
transitStations: +transit_stations_percent_change_from_baseline,
workplaces: +workplaces_percent_change_from_baseline,
residential: +residential_percent_change_from_baseline
})
);
// let subset = retval.filter(d => d.date > new Date(2020, 9, 1));
//return retval.filter(d => d.date > new Date(2020, 9, 1));
// return Object.values(retval).filter(d => d.date > new Date(2020, 9, 1));
return retval;
}
url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vShjxMaoMDZbCmyCBGUwyET9eYMeD89vToYtTrJGHRl-Jw-njzo3uO2UN1hexcf3p8vjbTqmQjQ5LRk/pub?gid=1597089656&single=true&output=csv'
height = 600
margin = ({top: 30, right: 200, bottom: 30, left: 40})
d3 = require("d3@5", "d3-array@2")
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.
