Pipeline test

100%

✓ Published0🌍 Public

Last edited Oct 23, 2015

Created on Oct 23, 2015

This example displays pipeline routes over a geographic area, distinguishing high-pressure (green) and transmission (gold) lines. The D3 map uses a Mercator projection fitted to the high-pressure pipeline data, which sets the map’s scale and center. SVG paths render the GeoJSON line features, with the transmission layer added after the high-pressure layer. The background is plain white, with no street grid visible, and the pipelines appear as thin, colored lines. Hover effects are commented out, so the visualization is static. The map is sized at 800×600 pixels.

AI-generated description

Similar vizzes

Loading thumbnail…

Pipeline test

This map of Los Angeles shows high-pressure natural gas pipelines as orange lines overlaid on a light street map. Built with D3.js, Leaflet, and TopoJSON, it loads GeoJSON pipeline data and projects it onto an interactive Stamen toner-lite basemap. The SVG overlay redraws and repositions itself on map pan and zoom using a custom geographic projection that converts latitude and longitude coordinates into leaflet layer points.

Aajzeigert

85% match

Loading thumbnail…

Pipeline test

This interactive map displays natural gas pipeline infrastructure in the Los Angeles area, distinguishing high-pressure pipelines in red from transmission pipelines in yellow. Built with Leaflet, the visualization overlays two GeoJSON datasets on a Stamen toner-lite base map, with pipelines loaded via asynchronous AJAX requests. The map is centered at coordinates [34.05, -118.25] at zoom level 10, with pipeline colors encoded by line type—red for high-pressure lines and yellow for transmission lines—over a grayscale street map for contrast.

Aajzeigert

82% match

Loading thumbnail…

D3 test

This example visualizes a historical route from a GeoJSON file, displaying daily segments as dashed black polylines over a light blue graticule-filled map. The code uses D3 v5 with an SVG rendering approach and a Mercator projection configured via `d3.geoMercator()`. It loads coastline and route data with `d3.json()`, then binds the features to SVG paths using `d3.geoPath()`. The graticule is generated with `d3.geoGraticule()`. The visualization clearly shows the path’s progression across the mapped region, with each day’s travel distinguished by styling properties like stroke dasharray.

MMarin Govorcin

73% match

Loading thumbnail…

Crude Oil Pipelines in US

This visualization displays a map of crude oil pipelines across the United States, with each pipeline colored according to its operating company. The map shows state boundaries, city labels, and pipeline routes, with a panel that displays the pipeline name and operator on mouseover. The code uses D3.js v4 with `d3.geoPath`, `d3.geoAlbersUsa`, and `topojson` to render the map, reading geographic data from a TopoJSON file containing both pipeline and state/city features. Pipeline colors are mapped to operator names, and hovering highlights the selected pipeline while dimming others. The data originates from the U.S. Energy Information Administration’s pipeline shapefiles and Atlas-Make for states and cities.

SSaminu

72% match

Loading thumbnail…

Basic D3 map (Mercator) d3v4

This visualization displays a basic world map using the Mercator projection, rendered as a single SVG path. The code loads GeoJSON data from an external URL and projects it with `d3.geoMercator()` and `d3.geoPath()`, scaling the projection to fit a 960 by 500 pixel viewport. The map fills the entire screen, with the SVG element sized to the full window. Built with D3 v4, it demonstrates the minimal setup required to draw geographic features from GeoJSON data using the library’s standard geo-path API.

AAlan McConchie

70% match

Loading thumbnail…

test

This example displays a choropleth-style map of the United States, rendering each state as a separate SVG path. The visualization shows the geographic boundaries of all states by loading GeoJSON data from a remote gist. Using D3 v3, the code applies `d3.geo.path()` to convert GeoJSON features into SVG path data, then appends each path to an SVG container with a red border. The map is static, with no interactivity or color encoding, serving as a basic demonstration of D3's geographic projection capabilities.

FFrieseWoudloper

70% match

Loading thumbnail…

Untitled

A world map rendered in gray displays curved green lines connecting pairs of cities, with each line drawn as a GeoJSON LineString between two latitude-longitude coordinates loaded from a CSV file. The example uses d3.geoMercator for projection, d3.geoPath to generate SVG paths for both the world shape and connection lines, and d3.queue to load the world GeoJSON and connection data concurrently. Country boundaries appear with white strokes and zero width, while the connections use a teal stroke.

Jjs164

70% match

Loading thumbnail…

Vector Tiles

This example displays a static vector-tile map of San Francisco’s roads, with major highways, minor roads, and rail lines rendered as stylized SVG strokes. Using D3 v3, it loads Mapzen’s OpenStreetMap “roads” tiles via `d3.json`, sorts features by `sort_key`, and draws each path with `d3.geo.path` and a Mercator projection. A custom `d3.geo.tile` helper computes the visible tile range and scale, while CSS classes like `.highway` and `.rail` assign distinct colors and widths.

Mmbostock

70% match