Subway Wait Assessment

100%

Subway Wait Assessment

✓ Published0🌍 Public

Last edited Oct 10, 2018

Created on Oct 10, 2018

This interactive visualization charts the percentage of late subway trains over time for each New York City subway line. Users can click on individual lines in a legend to toggle their time-series on and off, with each line rendered in its corresponding transit color. Data points animate in sequentially, and hovering over a point reveals the exact late percentage via a tooltip. The chart uses D3.js with an SVG rendering and includes a color-coded key for identifying lines. The visualization is based on historical subway performance data and is implemented with an MIT license.

AI-generated description

Built with blockbuilder.org

Working through the book Getting Started with D3

forked from <a href='http://bl.ocks.org/jfost00/'>jfost00</a>'s block: <a href='http://bl.ocks.org/jfost00/7fb90a103f08924c195b'>Subway Wait Assessment</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Line Graph

This line graph displays the unsheltered homeless population in New York City from 2009 to 2012, broken down by borough and surface versus subway locations. The visualization is built with D3 v5, using `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` with `d3.curveBasis` to render the smooth paths. Data originates from a CSV file, and SVG is used for all rendering, with tooltips omitted.

JJHamron

66% match

Loading thumbnail…

Interactive and attempting to be more DRY with the code

This interactive visualization tracks a SmarTrip fare card’s balance over time, plotting each transaction from a Metro rail CSV as an animated SVG line chart. The code organizes shared logic (axes, scales, and rendering) into reusable functions, avoiding repetition. Data points—entries, exits, and sales—are distinguished by color and shape, with tooltips showing route segments and fare changes. The animation plays through the chronological sequence, highlighting the card’s declining balance as the commuter taps in and out between Tenleytown-AU and L'Enfant Plaza.

AAlexDaGr8

65% match

Loading thumbnail…

Untitled

This interactive multi-line chart displays daily temperature trends for New York, San Francisco, and Austin, with each city represented by a colored curve on a shared time axis. Hovering over a line highlights it in its original color while graying out the others, and clicking a line toggles its visibility. Built with D3 v6, the visualization uses SVG rendering with animated transitions, d3.axisBottom and d3.axisLeft for axes, and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scaling. Data is loaded via d3.tsv from a remote source.

Hhollyjpotter

65% match

Loading thumbnail…

Line Chart Visualization

A multi-line chart displays daily temperature readings for New York, San Francisco, and Austin from October 2011 through April 2012, with each city represented by a colored line. Built with D3 v7, the visualization supports interactive filtering: hovering over a city name highlights its line while dimming others, and clicking toggles a line's visibility. Users can also brush or zoom along the time axis. The SVG-based rendering uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.zoom, with data loaded from a TSV file.

GGoogs

65% match

Loading thumbnail…

Data Viz Course

This scatterplot displays the relationship between the number of trains that ran and the number of delayed trains across various TGV routes, colored by rail axis (e.g., Atlantique, Sud-Est). It uses a D3.js v4 SVG rendering with a Vue framework, featuring animated circles and a tooltip that reveals the monthly regularity percentage on hover, sourced from a semicolon-delimited CSV file.

CCernewein

65% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays hourly collision counts across New York City boroughs, with each borough represented by a distinct colored line. The visualization uses D3 v5 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `curveBasis` for smooth paths. A custom color legend function places ordinal color scales alongside the chart, while data from Counts.csv is nested by borough using `d3.nest`.

MMch9006

64% match

Loading thumbnail…

nyc subways

Shows three intersecting New York City subway lines—the 1, 2, and 3 routes—as MultiLineString geometries from a GeoJSON FeatureCollection, with each route’s track path rendered as a separate visual segment. The example uses d3.geoPath to convert geographic coordinates into screen-space projections over a map base, with route_id values distinguishing line colors. Data is loaded directly from the subways.geojson source file, which encodes each route as a multilinestring of consecutive station-to-station coordinate pairs.

JJn1532

64% match

Loading thumbnail…

Marey’s Trains

This visualization recreates Marey’s classic train schedule as a stringline chart, showing train trajectories as sloped lines across a station-by-distance vertical axis and a time-based horizontal axis. The slope of each line encodes train speed, with orange limited-service trains and red baby bullets overlaid on black regular trains. The code uses D3 v3 with `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis`, rendering in SVG. It loads station positions and stop times from a TSV file, filtering train types and clipping paths to show the full schedule.

Mmbostock

64% match