Skip to main content
SimilarExport ZIP
100%

Golden Gate Transit Bus Ridership 2019-2021 Tooltip

✓ Published0🌍 Public
AAndre J Denais
Last edited Sep 3, 2021
Created on Sep 3, 2021

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.

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

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
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
77% 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
71% 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
67% match
Loading thumbnail…

Route

This visualization displays the number of rides for different bike types, filtered by member type and season through two dropdown menus. The horizontal bar chart, rendered with SVG in a React component, uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Data comes from a CSV file loaded via `d3.csv`, and the interactive dropdowns update the chart by filtering the dataset. The bars include a native SVG `<title>` tooltip on hover to show exact ride counts.

SSamir Nandardhane
66% match