Golden Gate Transit Bus Ridership 2019-2021

100%

Golden Gate Transit Bus Ridership 2019-2021

✓ Published3🌍 Public

Last edited Sep 3, 2021

Created on Sep 17, 2020

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.

AI-generated description

An quick look at GGT ridership from 2019-2021 in an effort to observe the drastic reduction in ridership due to the COVID19 pandemic: GGT Ridership.

MIT Licensed

Similar vizzes

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

94% 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

90% match

Loading thumbnail…

Muni Ridership 2019-2020/Pandemic

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.

AAndre J Denais

81% 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

75% match

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

74% 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

73% match

Loading thumbnail…

Line Chart

This line chart visualizes air traffic passenger statistics for San Francisco Airport from 2005 to 2019, comparing annual passenger numbers for multiple airlines. The chart displays each airline as a separate colored line, with year on the x-axis and passenger counts on the y-axis. It uses React and D3 v4 to render an SVG-based chart with animated transitions between states. The data is embedded directly in the page, and the visualization uses D3’s scale functions and axis components to map the temporal and numerical dimensions.

AApollox01

66% match

Loading thumbnail…

Interactive Visulization

This interactive visualization shows the number of bike rides, broken down by rideable type, filtered by user type (casual or member), quarter, and year. The chart updates dynamically, rendering a horizontal bar chart for each selected combination. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map the categorical and quantitative axes, and renders the bars as SVG `<rect>` elements within a `<g>` transform. A `<title>` element provides tooltips on each bar, while the data is loaded from a CSV file.

SSamir Nandardhane

64% match