Plot.plot({
title: "MTA estimated average ridership between boroughs",
subtitle: ["Jan-Aug 2024"],
width: 200,
height: 200,
color: {
scheme: "Reds"
},
x: {
label: "",
tickFormat: (d) => d[0] + d[d.length - 1],
tickSize: 0,
tickPadding: 0
},
y: {
label: "",
tickFormat: (d) => d[0] + d[d.length - 1],
tickSize: 0,
tickPadding: 0
},
marks: [
Plot.cell(
data,
{
x: "source",
y: "target",
fill: "value"
}
)
]
})
Plot.plot({
title: "MTA estimated average ridership between boroughs",
subtitle: ["2024"],
// width: 200,
// height: 200,
color: {
scheme: "Reds"
},
x: {
label: "",
tickFormat: (d) => d[0] + d[d.length - 1],
tickSize: 0,
tickPadding: 0
},
y: {
label: "",
tickFormat: (d) => d[0] + d[d.length - 1],
tickSize: 0,
tickPadding: 0
},
fx: { label: "", tickFormat: Plot.formatMonth() },
marks: [
Plot.cell(monthlyFlow, {
x: "source",
y: "target",
fill: "value",
fx: "month"
})
]
})
Plot.plot({
title: "MTA estimated average ridership between boroughs",
subtitle: ["2024"],
// width: 200,
// height: 200,
color: {
scheme: "Reds"
},
x: {
label: "",
tickFormat: (d) => d[0] + d[d.length - 1],
tickSize: 0,
tickPadding: 0
},
y: {
label: "",
tickFormat: (d) => d[0] + d[d.length - 1],
tickSize: 0,
tickPadding: 0
},
fy: { label: "", tickFormat: Plot.formatMonth() },
marks: [
Plot.cell(monthDailyFlow, {
x: "source",
y: "target",
fill: "value",
fx: "day_of_week",
fy: "month"
})
]
})
Plot.plot({
title: "MTA estimated average ridership between boroughs",
subtitle: "Mondays in August 2024, excludes inter-borough trips",
width: width,
// height: 200,
color: {
scheme: "Reds"
},
x: {
label: "",
tickFormat: (d) => d[0] + d[d.length - 1],
tickSize: 0,
tickPadding: 0
},
y: {
label: "",
tickFormat: (d) => d[0] + d[d.length - 1],
tickSize: 0,
tickPadding: 0
},
fx: { label: "" },
marks: [
Plot.cell(
boroughFlows.filter(
(d) =>
(d.month == 8) &
(d.day_of_week == "Monday") &
(d.hour_of_day >= 5) &
(d.hour_of_day <= 20) &
(d.origin_boro_name != d.destination_boro_name)
),
{
x: "origin_boro_name",
y: "destination_boro_name",
fill: "estimated_average_ridership",
fx: "hour_of_day",
tip: true
}
)
]
})
boroughFlows
boroughFlows
boroughFlows
boroughFlows
Type Table, then Shift-Enter. Ctrl-space for more options.
boroughFlows = FileAttachment("mta_ridership_borough_flows_2024.csv").csv({typed: true})
Data from https://data.ny.gov/Transportation/MTA-Subway-Origin-Destination-Ridership-Estimate-2/jsu2-fbtj/about_data
chart = {
const width = 540;
const height = width;
const innerRadius = Math.min(width, height) * 0.5 - 20;
const outerRadius = innerRadius + 6;
// Compute a dense matrix from the weighted links in data.
const names = Array.from(d3.union(data.flatMap(d => [d.source, d.target])));
const index = new Map(names.map((name, i) => [name, i]));
const matrix = Array.from(index, () => new Array(names.length).fill(0));
for (const {source, target, value} of data) matrix[index.get(source)][index.get(target)] += value;
const chord = d3.chordDirected()
.padAngle(12 / innerRadius)
.sortSubgroups(d3.descending)
.sortChords(d3.descending);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
const ribbon = d3.ribbonArrow()
.radius(innerRadius - 0.5)
.padAngle(1 / innerRadius);
const colors = d3.schemeCategory10;
const formatValue = x => `${x.toFixed(0)}`;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "width: 100%; height: auto; font: 10px sans-serif;");
const chords = chord(matrix);
const textId = DOM.uid("text");
svg.append("path")
.attr("id", textId.id)
.attr("fill", "none")
.attr("d", d3.arc()({outerRadius, startAngle: 0, endAngle: 2 * Math.PI}));
svg.append("g")
.attr("fill-opacity", 0.75)
.selectAll()
.data(chords)
.join("path")
.attr("d", ribbon)
.attr("fill", d => colors[d.target.index])
.style("mix-blend-mode", "multiply")
.append("title")
.text(d => `${formatValue(d.source.value)} from ${names[d.source.index]} to ${names[d.target.index]}`);
const g = svg.append("g")
.selectAll()
.data(chords.groups)
.join("g");
g.append("path")
.attr("d", arc)
.attr("fill", d => colors[d.index])
.attr("stroke", "#fff");
g.append("text")
.attr("dy", -3)
.append("textPath")
.attr("xlink:href", textId.href)
.attr("startOffset", d => d.startAngle * outerRadius)
.text(d => names[d.index]);
g.append("title")
.text(d => `${names[d.index]}
${formatValue(d3.sum(matrix[d.index]))} leaving
${formatValue(d3.sum(matrix, row => row[d.index]))} arriving`);
return svg.node();
}
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.
