Streams

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Feb 11, 2013

A map of the United States displays the National Atlas’s 1:1,000,000 scale streams dataset, rendered from TopoJSON converted to GeoJSON. The visualization uses d3.geoPath and d3.geoStitch to project and draw fine-grained river networks, which are simplified via TopoJSON’s quantization and delta encoding to keep the file manageable. The page also includes a static PNG preview of the resulting map.

AI-generated description

The 1:1,000,000 scale streams dataset from the National Atlas is available in TopoJSON. This dataset inspired me to write a pure JavaScript shapefile parser because the GeoJSON file is 941M, which is too big to load into memory due to a 1G restriction on buffer sizes in V8! The resulting TopoJSON file is only 34M, mostly thanks to the fixed-precision delta encoding of coordinates.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

U.S. TopoJSON

This example displays a layered map of the United States using county, state, and national boundaries. The map is rendered as SVG, with counties stroked in thin gray, states in thin black, and the nation in a thicker black outline. It loads TopoJSON data from the us-atlas package and uses the topojson-client library to compute and draw the geographic meshes and features. The visualization is built with d3.v4, using d3.json for data fetching and d3.geoPath for path generation.

Mmbostock

75% match

Loading thumbnail…

Gist ea51c362645dc8fb9bdbba440558b37a

Atlas of the United States, using a TopoJSON shapefile rendered with `d3.geoPath` and a custom Albers projection. The map is overlaid with a graticule generated by `d3.geoGraticule`, and states are colored by a choropleth scale. The visualization is drawn on an SVG canvas, and the code uses `d3.json` to load the TopoJSON data and `topojson.feature` to convert it into GeoJSON. A tooltip appears on hover, displaying the state name and value.

CCliffordAnderson

74% match

Loading thumbnail…

U.S. States TopoJSON small multiples

This example shows a small multiple of the United States, displaying 81 separate SVG maps, each with the nation’s landmass, county boundaries, and state borders drawn in a dark theme. The visualization uses TopoJSON to parse a US Census Bureau shapefile, with `d3.geo.albersUsa` projecting the geographic data onto a 96-by-50-pixel canvas. Each map is rendered by iterating over the topojson features and meshes, applying the same projection and path-generation logic to create a grid of repeated state outlines.

PPhilippe Rivière

74% match

Loading thumbnail…

U.S. States TopoJSON

This example shows a map of the United States rendered as SVG paths, where individual states turn red when hovered. The map uses the TopoJSON `us-atlas` file, loaded via `d3.json`, and the code relies on the `topojson` library to convert the TopoJSON topology into geographic features. The rendering is done with `d3.geoPath` to project the geometry, and state borders are drawn as a separate path using a mesh that highlights each boundary. No interaction beyond the hover effect is implemented.

Mmbostock

72% match

Loading thumbnail…

test

This example presents a static map of the United States using a TopoJSON file containing geographic boundaries. The visualization relies on D3’s `d3.geoPath` to render state shapes from the topology data onto a canvas. The code processes the arcs and coordinates, likely employing D3’s projection and path generators to convert the geometric data into visible outlines. The map appears as a monochrome silhouette, emphasizing the spatial arrangement of states without additional styling or data overlay. The approach focuses purely on geographic structure, using the raw JSON source to draw the nation’s boundaries.

NNPashaP

71% match

Loading thumbnail…

USA Country Map with Topojson data

This example displays a choropleth-style map of the United States, with each state rendered as a separate SVG path using a topojson dataset. It shows state boundaries and names via tooltips. The code uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to generate the paths, while `topojson.feature` converts the TopoJSON topology into GeoJSON features. The map is drawn with SVG elements, and the data is loaded asynchronously from a GitHub gist using D3’s `json` method.

NNaveenrajaYalagandula

71% match

Loading thumbnail…

U.S. TopoJSON

This visualization displays U.S. state and county boundaries extracted from a TopoJSON file served from d3js.org. A blurred, semi-transparent silhouette of the nation appears behind a solid white version, creating a subtle depth effect. The code uses d3.geoPath to render the features, while topojson.feature and topojson.mesh convert the TopoJSON data into GeoJSON paths for drawing.

Mmbostock

71% match

Loading thumbnail…

Gist 11520211

This example visualizes the geographic boundaries of US states and counties using a TopoJSON file that encodes land, county, and state outlines. Built with D3, it renders the map from the `us.json` TopoJSON data, which contains geometry collections for counties and states. The visualization likely uses D3's projection and path generators to draw the geographic shapes, displaying the boundaries with distinct styling for counties and states. The minimal code structure suggests a basic interactive or static map, with the data provided in a structured TopoJSON format.

CCaged

71% match