Streaming Shapefile

100%

Streaming Shapefile

✓ Published0🌍 Public

Last edited Mar 9, 2019

Created on Sep 7, 2016

This example streams a 12.9MB shapefile of US county boundaries directly from a remote URL, rendering each feature to a Canvas as it downloads. The map uses an Albers USA projection with a 0.5-pixel stroke, and parsing is handled incrementally by the shapefile library’s `open` and `read` promise chain. The `d3.geoPath` generator draws the geometry, and the browser’s streaming fetch support enables the full map to appear before the download completes.

AI-generated description

This is a 12.9MB shapefile! If your browser supports streaming fetch, it will start being displayed even before it has finished downloading. Streaming in-browser parsing is new in shapefile 0.5.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3.geoPath + node-canvas

This example demonstrates how to render geographic data to a Canvas element using d3.geoPath with node-canvas, producing a stroked mesh of United States county boundaries. The rasterize script loads US Atlas TopoJSON data, converts it to GeoJSON with topojson-client, and passes it through d3.geoPath’s context method to draw paths into a 960×600 canvas. It then writes the resulting bitmap to a PNG file, showing server-side vector-to-raster conversion without a browser.

Mmbostock

73% match

Loading thumbnail…

d3.geoPath + Canvas

This example displays a map of the United States drawn entirely on a Canvas element. It shows how D3’s `d3.geoPath` can render geographic data into a native Canvas context rather than an SVG, with the map’s geometry provided by the `us-atlas` dataset. The code uses `d3.json` to load the TopoJSON file and `topojson.mesh` to convert it into renderable shapes. The resulting path is stroked onto the canvas via the `context` set on `d3.geoPath`, demonstrating a performant alternative to SVG for large spatial datasets.

Mmbostock

72% match

Loading thumbnail…

Gist 5967514

This example displays a map of U.S. counties using a TopoJSON shapefile from the U.S. Census Bureau, rendered as gray-filled paths with white borders that turn red on hover. It shows the geographic boundaries of counties and responds to clicks, though the click behavior only logs to the console. The visualization uses D3 v3’s `d3.geo.path()` to project and draw the SVG paths, and TopoJSON’s `topojson.feature` to extract GeoJSON features from the topology. The map is static, with no zoom or pan, and the hover effect is the only interactive styling.

CCaged

71% match

Loading thumbnail…

Country Map

This example renders a choropleth-style map of United States counties on an SVG canvas. Each county polygon is drawn as a purple path with white strokes, and hovered counties turn red, with the county name appearing as a tooltip. The visualization uses D3 v5’s `geoAlbersUsa` projection with `geoPath` to generate the shapes, and TopoJSON’s `feature` method to parse county boundaries from the us-atlas dataset. County names come from the TopoJSON properties, while the map loads via a remote JSON URL.

AAashish Pandey

71% match

Loading thumbnail…

Gist a76504adb7799e4c28c6d1558bd35ce3

This example displays a map of the United States using an Albers USA projection, rendering state boundaries as SVG paths. It loads geographic data from a local `us-states.json` file containing a FeatureCollection of state polygons. The code uses d3.json to fetch the data and d3.geo.path with a d3.geo.albersUsa projection to convert GeoJSON coordinates into screen paths. The visualization presents a simple, static outline map without additional data encoding or interaction.

AAurelink

70% match

Loading thumbnail…

d3.geoPath + Canvas

This example renders the U.S. state boundaries from the `us-atlas` TopoJSON file onto an HTML5 Canvas element. It uses `d3.geoPath` with a Canvas context to draw the map, demonstrating that this projection API works outside of SVG. The code fetches the geographic data from `10m.json`, converts it with `topojson.mesh`, and strokes the resulting paths with a single `beginPath` and `stroke` call. The approach eliminates SVG overhead by relying on Canvas rendering.

FFrissAnalytics

70% match

Loading thumbnail…

Gist 08d3bc545278d6a3b2d22df875392612

This example visualizes U.S. state boundaries using D3 v4’s geoAlbersUsa projection and d3.geoPath to render geographic features from a local us-states.json file. The SVG canvas, sized 700x580, is appended to the body, and each state’s polygon is drawn as a path element with a default fill and stroke. The map is centered using a translate of [width/2, height/2], and the simple code demonstrates how to load and project GeoJSON data for display. No interactions or styling are applied, keeping the focus on the map layout.

JJoymangulJensen

70% match

Loading thumbnail…

Blocky Counties

This example visualizes the lat-lon bounding box for each county in the United States, rendering blocky, rectangular outlines instead of the actual county shapes. The map uses the Albers USA projection and displays all county bounding boxes as steel-blue, stroked paths on an SVG canvas. The code loads US county data from a JSON file, then applies `d3.geo.bounds` to compute each county’s geographic extent, which is drawn via a single `d3.geo.path` object. It relies on the `d3.geo` module and `topojson.feature` to filter and structure the geographic features.

Mmbostock

70% match