The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Jul 29, 2022
Importers
9 stars
mtaDailyRidership = FileAttachment("MTA_Daily_Ridership_Data__Beginning_2020.csv").csv({typed: true})
database = DuckDBClient.of({ mtaDailyRidership })
database
Type Table, then Shift-Enter. Ctrl-space for more options.
database
function movingIQR(values, N) {
const means = new Array(values.length).fill(NaN);
let i = 0;
for (let n = values.length; i < n; ++i) {
// Filter values for just those that compute the moving average
// This includes filter those below the N threshold, which happens at the beginning and end of the dataset.
if(i >= N - 1) {
const meanObject = {};
// Then we run the mean of values that fall within the range
meanObject.avg = d3.mean(values.filter((e, f) => f > (i - N) && f <= i))
meanObject.min = d3.min(values.filter((e, f) => f > (i - N) && f <= i))
meanObject.max = d3.max(values.filter((e, f) => f > (i - N) && f <= i))
meanObject.first = d3.quantile(values.filter((e, f) => f > (i - N) && f <= i), .25)
meanObject.third = d3.quantile(values.filter((e, f) => f > (i - N) && f <= i), .75)
means[i] = meanObject
}
}
return means;
}
function movingAverage(values, N) {
let i = 0;
let sum = 0;
const means = new Float64Array(values.length).fill(NaN);
for (let n = Math.min(N - 1, values.length); i < n; ++i) {
sum += values[i];
}
for (let n = values.length; i < n; ++i) {
sum += values[i];
means[i] = sum / N;
sum -= values[i - N + 1];
}
return means;
}
subwayRidershipValues = mtaRidershipDB.map(d => +d["Subways: Total Estimated Ridership"])
movingAverages = movingAverage(subwayRidershipValues, 20)
movingIQRs = movingIQR(subwayRidershipValues, 20)
enhancedMTA = mtaDailyRidership.map((d,i) => {
return {
...d,
movingAvg: movingAverages[i],
movingIQR: movingIQRs[i]
}
})
Plot.plot({
width,
marks: [
Plot.ruleY([0]),
Plot.lineY(seasonallyAdjustedMTA, {x: "Date", y: "metric", stroke: '#ccc', strokeWidth: .75}),
Plot.lineY(seasonallyAdjustedMTA, {x: "Date", y: "seasonality", stroke: '#4B74D5'})
],
marginLeft: 60
})
nycHurricanes = [
{name: 'Tropical Storm Fay', date: '07/10/2020'},
{name: 'Tropical Storm Isaias', date: '08/04/2020'},
{name: 'Hurricane Laura', date: '08/31/2020'},
{name: 'Hurricane Delta', date: '10/12/2020'},
{name: 'Hurricane Zeta', date: '10/28/2020'},
{name: 'Hurricane Eta', date: '11/13/2020'},
{name: 'Hurricane Elsa', date: '07/09/2021'},
{name: 'Tropical Storm Fred', date: '08/18/2021'},
{name: 'Hurricane Henri', date: '08/22/2021'},
{name: 'Hurricane Ida', date: '09/01/2021'},
{name: 'Hurricane Larry', date: '09/06/2021'},
{name: 'Tropical Storm Wanda', date: '10/26/2021'},
]
USholidays = [
{name: 'Thanksgiving', date: '11/25/2021'},
{name: 'Halloween', date: '10/31/2021'},
{name: 'Christmas', date: '12/25/2020'},
{name: 'Christmas Eve', date: '12/24/2020'},
{name: 'Christmas', date: '12/25/2021'},
{name: 'Christmas Eve', date: '12/24/2021'},
{name: 'Labor Day', date: '09/06/2021'},
{name: 'Labor Day', date: '09/07/2020'},
{name: 'New Years Eve', date: '12/31/2020'},
{name: 'New Years Day', date: '01/01/2021'},
{name: 'New Years Eve', date: '12/31/2021'},
{name: 'New Years Day', date: '01/01/2022'},
{name: 'Memorial Day', date: '05/25/2020'},
{name: 'Memorial Day', date: '05/31/2021'},
{name: 'Memorial Day', date: '05/30/2022'},
{name: 'July 4th', date: '07/04/2020'},
{name: 'July 4th', date: '07/04/2021'},
{name: 'July 4th', date: '07/04/2022'},
]
Plot.plot({
width,
marks: [
Plot.ruleY([0]),
Plot.dotX(nycHurricanes, {
x: d => parseDate(d.date),
y: 0,
r: 5,
fill: "#E8C655",
stroke: "white"
}),
Plot.dotX(USholidays, {
x: d => parseDate(d.date),
y: 0,
r: 5,
fill: "#BC2E2E",
stroke: "white"
}),
Plot.lineY(seasonallyAdjustedMTA, {x: 'Date', y: "metric", stroke: '#ccc', strokeWidth: .75}),
Plot.lineY(seasonallyAdjustedMTA, {x: 'Date', y: "seasonality", stroke: '#4B74D5'})
],
marginLeft: 60
})
ldnGoogleActivity = FileAttachment("google_activity_by_London_Borough.csv").csv({typed: true})
// These are the most populous boroughs according to the 2019 pop est. on Wikipedia: https://en.wikipedia.org/wiki/List_of_London_boroughs
populousLondon = ldnGoogleActivity.filter(d => d.area_name === "Barnet" || d.area_name === "Croydon" || d.area_name === "Newham" || d.area_name === "Ealing" || d.area_name === "Enfield")
// London data is d first, then m, y
parseLdnDate = d3.utcParse('%d/%m/%Y')
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.
