Marey’s Trains

100%

Marey’s Trains

✓ Published0🌍 Public

Last edited Mar 5, 2019

Created on May 8, 2013

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.

AI-generated description

A recreation of E.J. Marey’s graphical train schedule. Stations are separated vertically in proportion to geography; thus, the slope of the line reflects the speed of the train: the steeper the line, the faster the train. This display also reveals when and where limited service trains (in orange) are passed by baby bullets (in red). This type of plot is sometimes called a “stringline chart”.

See also the earlier Protovis version by Vadim Ogievetsky, and another variation where color encodes speed.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Marey’s Trains II

This visualization adapts E.J. Marey’s classic train schedule to show southbound Caltrain service from San Francisco to Gilroy. Each train’s path is drawn as a segmented line where slope represents speed, while color redundantly encodes the same information through a purple-to-orange scale. The code filters trains by type and uses D3’s time scale, linear scale, and SVG axis API to render the station grid and diagonal trajectories, with station stops marked as circles. Data is loaded from a tab-separated schedule file using `d3.tsv`.

Mmbostock

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

70% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes Munich transit delays per line, with each circle representing a trip. The x-axis encodes timestamp, the y-axis encodes line, and circle size encodes delay value, revealing temporal patterns in service reliability. It is built with the Vega-Lite API, which generates charts from JavaScript objects, and uses D3’s `csv` loader to fetch data from a GitHub-hosted CSV file. The visualization is rendered as an interactive SVG with tooltips, styled via a custom configuration.

JJoshua-96

67% match

Loading thumbnail…

Gist 93888ff1e2e309348986d5e9496196c7

This example visualizes the locations of Dutch train stations, distinguishing intercity stations from regular ones through color-coded points. The map is built using D3.js, combining `d3.forceSimulation` with a custom force that projects coordinates onto a map layout, while station markers are rendered as circles. The visualization uses `d3.geoPath` to draw the geographic context, and the underlying data comes from a CSV file listing station names, coordinates, and intercity status. The rendering approach relies on Canvas, with the simulation handling the placement of labels and points to avoid overlap.

JJulesBlm

67% match

Loading thumbnail…

Segmented Lines

Four time series are drawn as thick segmented lines, each segment colored green, gray, or red based on its slope via a linear color scale from 0 to π. Circles mark every data point, while the y-axis is scaled to the maximum of all series, loaded from a local JSON file. The code uses d3.svg.line with segment arrays generated by a helper function, and applies stroke styling through d3.scale.linear and Math.atan2 on segment endpoints.

Mmbostock

66% match

Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged

65% match

Loading thumbnail…

Svelte + D3: Line (II)

The chart displays daily Atlantic sea surface temperatures from 1982 to 2024, with each year drawn as its own line. Recent years are highlighted—2024 in blue and 2023 in pink—while older years appear as faint white strokes, emphasizing the temperature trajectory over time. Built with Svelte, it uses D3's `csv` and `autoType` to load data, `scaleLinear`, `extent`, and `line` with `curveCatmullRom` for the paths, and `groups` to structure lines by year. The SVG renders against a dark gradient background, with an overlay legend identifying the color coding.

MMatthias Stahl

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