Public
Edited
Sep 20, 2022
1 star
dataURL = 'https://data.ny.gov/api/views/vxuj-8kew/rows.csv?accessType=DOWNLOAD&sorting=true'
rawMtaData = d3.csv('https://data.ny.gov/api/views/vxuj-8kew/rows.csv?accessType=DOWNLOAD&sorting=true', d3.autoType)
columns = [
["Subways: Total Estimated Ridership", "Subways: % of Comparable Pre-Pandemic Day"],
["Buses: Total Estimated Ridership", "Buses: % of Comparable Pre-Pandemic Day"],
["LIRR: Total Estimated Ridership","LIRR: % of 2019 Monthly Weekday/Saturday/Sunday Average"],
["Metro-North: Total Estimated Ridership","Metro-North: % of 2019 Monthly Weekday/Saturday/Sunday Average"],
["Access-A-Ride: Total Scheduled Trips","Access-A-Ride: % of Comprable Pre-Pandemic Day"],
["Bridges and Tunnels: Total Traffic","Bridges and Tunnels: % of Comparable Pre-Pandemic Day"],
]
parseDate = d3.timeParse('%m/%d/%Y')
yearFormat = d3.timeFormat('%Y')
dayOfWeekFormat = d3.timeFormat('%A')
mtaData = rawMtaData.flatMap(d => {
const date = parseDate(d.Date);
return columns.map(c => {
return {
'type': c[0].split(":")[0],
'date': date,
'year': yearFormat(date),
'dayOfWeek': dayOfWeekFormat(date),
'value': d[c[0]],
'percent': d[c[1]]
}
})
})
movingN
new Set(mtaData.map(d => d.type))
d3.group(mtaData, d => d.type)
viewof selectMTAData = Inputs.select(d3.group(mtaData, d => d.type), {label: "Select one"})
viewof selectMTAData2 = Inputs.select(Array.from(new Set(mtaData.map(d => d.type))).concat('All'), {label: "Select one"})
Plot.plot({
marginLeft: 100,
width: width,
marks: [
Plot.ruleY([0]),
Plot.lineY(selectMTAData, Plot.windowY({
reduce: 'p75',
k: movingN,
x: "date",
y: "value",
stroke: "type",
// mixBlendMode: "multiply"
}))
],
color: {
legend: true
}
})
Plot.plot({
marginLeft: 100,
height: 600,
width: width,
facet: {
data: mtaData,
y: 'type',
marginRight: 150,
},
marks: [
Plot.ruleY([0]),
Plot.lineY(mtaData, Plot.normalizeY({
basis: 'max',
x: "date",
y: "value",
stroke: "type",
title: d => `${d.date} - ${d.value}`
})),
],
color: {
legend: true,
scheme: 'dark2'
}
})
Plot.plot({
marginLeft: 100,
// height: 600,
width: width,
marks: [
Plot.ruleY([0]),
Plot.areaY(mtaData, Plot.windowY(Plot.normalizeY({
basis: 'max',
k: movingN,
x: "date",
y: "value",
fill: "type",
title: d => `${d.date} - ${d.value}`
}))),
],
color: {
legend: true,
scheme: 'dark2'
}
})
Plot.plot({
marginLeft: 100,
height: 600,
width: width,
facet: {
data: mtaData,
y: 'type',
marginRight: 150,
},
marks: [
Plot.ruleY([0]),
Plot.linearRegressionY(mtaData, {
x: "date",
y: "value",
stroke: "#000"
}),
Plot.lineY(mtaData, {
x: "date",
y: "value",
stroke: "type",
title: d => `${d.date} - ${d.value}`
}),
],
color: {
legend: true,
scheme: 'dark2'
}
})
Plot = tooltipPlugin(await require("@observablehq/plot"))
// This is a tooltip plugin that allows us to build more bespoke pop-overs.
import {tooltipPlugin} from "@mkfreeman/plot-tooltip"
import { db } from "@observablehq/google-merchandise-sales-data"
db
Type Table, then Shift-Enter. Ctrl-space for more options.
db
purchases
Plot.plot({
marks: [
Plot.dot(purchases, {x: "date", y: "price_in_usd"})
]
})
Plot.plot({
marks: [
Plot.rectY(
purchases,
Plot.binX({ y: "count" }, { x: "date", thresholds: d3.utcWeek, fill: "category" })
),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.rectY(
purchases,
Plot.binX({ y: "sum" }, { x: "date", y: "price_in_usd", thresholds: d3.utcWeek, fill: "category" })
),
Plot.ruleY([0])
],
color: { legend: true }
})
Plot.plot({
facet: {
data: purchases,
y: "category",
},
marks: [
Plot.rectY(
purchases,
Plot.binX({ y: "sum" }, { x: "date", y: "price_in_usd", thresholds: d3.utcWeek, fill: "category" })
),
Plot.ruleY([0])
],
color: { legend: true }
})
Plot.plot({
marks: [
Plot.rectY(
purchases,
Plot.binX(
{ y: "sum" },
{
x: "date",
y: "price_in_usd",
thresholds: d3.utcWeek,
fill: "category",
offset: "expand"
}
)
),
Plot.ruleY([0])
],
color: { legend: true }
})
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.
