Railway map easy

100%

Railway map easy

✓ Published1🌍 Public

Last edited Oct 5, 2021

Created on Oct 4, 2021

This interactive map displays North American railway networks, distinguishing major freight rail operators by color. The visualization uses the Leaflet library with Stamen watercolor background tiles, while railway line data is pulled from ArcGIS FeatureServer layers via esri-leaflet and esri-leaflet-vector. Individual rail companies, including BNSF, KCS, CN, CPR, NS, UP, and CSXT, are rendered as separately styled colored polylines, with blue for BNSF and green for KCS, demonstrating real-time loading of geospatial feature services.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Railroad Map

This example displays an interactive map centered on New England, with a custom style that emphasizes railroad lines. The map uses MapLibre GL (via the `mapboxgl.Map` API) and loads a custom OpenMapTiles style from MapTiler, which modifies the default rendering to highlight railways. The view is initialized at a specific longitude, latitude, and zoom level, and a `moveend` event logs the current center and zoom to the console.

CCurran Kelleher

66% match

Loading thumbnail…

Fork of Railroad Map

This fork of a railroad map highlights major rail lines using a custom MapTiler style overlaid on MapLibre GL. The map centers on a region in Iowa at zoom level 8.5, with the `major-rail` class applying the distinctive styling to railroad features. It uses the `mapboxgl.Map` API with a style URL from MapTiler’s style server, and logs the map center and zoom on each `moveend` event. The example is built on the MapLibre GL JavaScript library and OpenMapTiles vector tiles.

Ssahild11

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

58% match

Loading thumbnail…

RailAmsterdam

RailAmsterdam is a custom geographic visualization of Amsterdam’s neighborhoods rendered as SVG, using D3 v4 to draw a TopoJSON topology. The example encodes neighborhood boundaries via projected vector paths, with mouse interaction highlighting individual districts.

JJulesBlm

58% match

Loading thumbnail…

Dorling Cartogram

A Dorling cartogram of French regional rail traffic displays monthly ridership data from 2013 to 2017. Each region is represented by a circle positioned near its geographic origin, with circle size and fill color encoding passenger counts. Interactive sliders let viewers select a year and month. The visualization uses `d3.forceSimulation` for non-overlapping circle placement and a `d3.geoConicConformal` projection for initial locality. It merges CSV travel statistics for regions with GeoJSON outlines via `d3.csv` and `d3.json`.

AAminaSGitHub

56% match

Loading thumbnail…

Untitled

This interactive line chart displays monthly passenger and freight traffic to and from India, aggregated by airline. Two buttons toggle between the passenger and freight datasets, while a dropdown menu selects which airline’s routes to display. Incoming traffic appears as a blue line, outgoing traffic as red, with transitions animating the path updates over 1000 milliseconds. The visualization is built with D3 v4, using `d3.line` for path generation, `d3.scaleLinear` for axes, and `transition.attrTween` internally via D3’s transition API. The data comes from a CSV file hosted on GitHub, rendered as SVG.

Jjs164

56% match

Loading thumbnail…

USA Map

This interactive map of the United States uses a linear color scale to visualize state-level data values, with states shaded from light blue to dark blue based on their associated values. The visualization loads CSV data containing state IDs and their corresponding quantitative values, then merges this with US state boundaries from a GeoJSON source. Built with D3 v6 and React, the map renders as an SVG using the `d3.geoPath` generator to draw state outlines, while the `topojson.feature` API extracts state features from the geographic data. States without matching CSV entries appear in gray.

Ssaikrishnabussa

56% match

Loading thumbnail…

SNCF_dataviz_corentin

This visualization compares two French railway stations by displaying their available on-site amenities, access modes, and traveler trip purposes side-by-side as small colored rectangles. The code uses D3 v4 (`d3.csv`, selections, and attribute manipulation) to load a dataset of SNCF station statistics, then renders SVG rectangles to encode each categorical variable for both selected stations. Station identifiers are defined in the script, and the tooltip and text elements display station names derived from the underlying CSV data.

CCtuauden

55% match