Golden Gate Transit Ridership B&W Scatterplot

100%

Golden Gate Transit Ridership B&W Scatterplot

✓ Published2🌍 Public

Last edited May 6, 2021

Created on May 6, 2021

Forked from D3 Scatterplot Black and White Template

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.

AI-generated description

An quick look at Golden Gate Transit's total monthly ridership from 2019-2020 in an effort to observe the drastic reduction in ridership due to COVID19: 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

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

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

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

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

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

79% match

Loading thumbnail…

D3 Scatterplot

This interactive D3 scatterplot visualizes cumulative Uber fare amounts per day from 2009 to 2015, using data from a Kaggle dataset. The SVG chart plots each date on the x-axis and total daily fares on the y-axis, with green circles marking individual points. The visualization uses `d3.csv` to load the raw data, `d3.scaleBand` for the time-based x-axis, and `d3.scaleLinear` for the fare amounts. Custom tick marks highlight the first date of each year, while gridlines and labeled axes improve readability.

DDominic Fernandez

68% match

Loading thumbnail…

CS 360 Final Project |ALPHA RELEASE| Scatter Plot

This scatter plot shows the average passenger count at SFO across six months of 2005, with the x-axis representing months 7 through 12 and the y-axis showing passenger counts up to 30,000. The visualization loads data from a tab-separated file using d3.tsv and renders circles with d3.scaleLinear axes and SVG elements. The chart uses D3 v4 to append a titled SVG with labeled axes, plotting each month as a blue dot filled via the style attribute.

Ddarrenisdunn

67% match