Muni Ridership 2019-2020/Pandemic

100%

Muni Ridership 2019-2020/Pandemic

✓ Published0🌍 Public

Last edited Sep 2, 2021

Created on May 6, 2021

Forked from Golden Gate Transit Bus Ridership 2019-2021

This interactive line chart visualizes San Francisco Muni’s average daily boardings from 2019 through 2021, highlighting the drastic ridership drop caused by the COVID-19 pandemic. The SVG rendering uses React and D3 v6, with `scaleTime` for the date axis, `scaleLinear` for ridership, and a natural curve via `line` and `curveNatural`. Data comes from a remote CSV loaded with `csv`. Axes are custom React components, while a tooltip is planned but not yet implemented.

AI-generated description

An quick look at MUNI's average daily boardings from 2019-2020 in an effort to observe the drastic reduction in ridership due to COVID19: MUNI Ridership.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Muni Average Daily Boardings B&W Scatterplot

This scatterplot visualizes the drastic reduction in Muni’s average daily boardings from 2019 to 2020, highlighting the impact of COVID-19 on ridership. Black circles, each with a tooltip showing the boarding count, are plotted over time on an SVG canvas. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.axisLeft and d3.axisBottom to render them. The chart fills the browser window, with data sourced from the SFMTA’s Muni ridership reports.

Hharika-1929

86% match

Loading thumbnail…

Muni Average Daily Boardings B&W Scatterplot

A black-and-white scatterplot shows Muni’s average daily boardings from 2019 to 2020, revealing a drastic drop in ridership beginning in early 2020 due to COVID-19. Each circle encodes a date on a d3.scaleTime x-axis and boardings on a d3.scaleLinear y-axis, with tooltips showing the raw boarding value. The visualization is built with D3 v6, renders as SVG circles, and loads data from a CSV URL via d3.csv. Axes are generated using d3.axisLeft and d3.axisBottom.

AAndre J Denais

83% match

Loading thumbnail…

Golden Gate Transit Bus Ridership 2019-2021

This line chart tracks Golden Gate Transit bus ridership from 2019 to 2021, revealing a sharp decline coinciding with the COVID-19 pandemic. The visualization uses D3 v6 scales for time and linear axes, with a smooth natural curve path drawn in SVG via React components. The data is fetched as CSV from a GitHub gist, with x-axis labels formatted as months and y-axis showing monthly ride counts.

AAndre J Denais

81% match

Loading thumbnail…

Golden Gate Transit Bus Ridership 2019-2021 Tooltip

This line chart visualizes Golden Gate Transit bus ridership from 2019 to 2021, revealing the dramatic drop in monthly rides during the COVID-19 pandemic. The chart uses D3 v6 scales and natural curve interpolation to draw the ridership trend, with a React-based tooltip that highlights the date and rank of the data point nearest the mouse position. The hover behavior is implemented via an inverted time scale to find the closest data point, and the tooltip displays a formatted date and value. The underlying data is loaded from a CSV source hosted on GitHub.

AAndre J Denais

81% match

Loading thumbnail…

Golden Gate Transit Ridership B&W Scatterplot

This scatterplot visualizes Golden Gate Transit’s total monthly ridership from 2019 to 2020, highlighting the sharp decline caused by COVID-19. Each black circle represents a month, positioned by date and ridership count using d3.scaleTime and d3.scaleLinear, with axes rendered via d3.axisLeft and d3.axisBottom. The SVG is created with d3.select and sized to the full window. Data comes from a CSV file loaded asynchronously with d3.csv, and hover tooltips display exact ridership values via SVG title elements. The minimal black-and-white design emphasizes the trend without distraction.

AAndre J Denais

79% match

Loading thumbnail…

GGT and MUNI Animated D3 Scatter Plot

This animated D3 scatter plot displays ridership data for Golden Gate Transit (GGT) and Marin Transit (MUNI), cycling through three column-based views—Operator, Date, and Ridership—every 3.5 seconds. The visualization uses D3 v7's `scaleLinear` for axes and `transition` for smooth 1-second animations, with circles entering at radius 0, updating positions with staggered delays, and axes transitioning simultaneously. Data is loaded via `d3.csv` from a raw Gist URL, rendered as SVG with custom Share Tech font styling, and the animation loop is driven by `setInterval`.

AAndre J Denais

74% match

Loading thumbnail…

Fork of Fork of A week in San Francisco - Line chart

This line chart visualizes COVID-19 deaths in San Francisco over time, with the area under the curve filled in maroon. Built with D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` with `curveBasis` for the filled path, and renders as an SVG. Interactive mouseover events trigger a bisector search to display the death count near the cursor. Data is loaded from a CSV file and parsed as dates and numbers.

SShishiraRudrabhatla

73% match

Loading thumbnail…

Dataviz 2020_Ep27 - 21. Line Chart

This line chart displays weekly temperature data for San Francisco, loaded from a CSV file using D3’s `csv` utility. Time is plotted on the x-axis with `scaleTime`, temperature on the y-axis with `scaleLinear`, and both axes are rendered as custom React components. The line path and circular data points are drawn using `d3.line` and `curveNatural` within an SVG, with hover tooltips provided by the SVG `title` element.

MMinwoo Pak

70% match