Skip to main content
SimilarExport ZIP
100%

Muni Average Daily Boardings B&W Scatterplot

✓ Published1🌍 Public
AAndre J Denais
Last edited May 6, 2021
Created on May 6, 2021

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.

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
92% 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
83% 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
80% 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…

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
73% 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
71% 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
66% match
Loading thumbnail…

CS360 FINAL PROJECT Bar Chart Darren Dunn

This bar chart displays the average monthly passenger counts for airlines operating out of San Francisco in 2021, sorted vertically by airline name. The visualization uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, rendering horizontal bars as SVG rectangles. Data is loaded asynchronously via d3.tsv from a remote GitHub gist, with axis labels and tick marks generated using d3.axisBottom and d3.axisLeft. Bar color is a uniform dark teal, and the chart includes rotated x-axis labels for readability.

Ddarrenisdunn
66% match