Skip to main content
SimilarExport ZIP
100%

Simplify GeoJSON using d3-plugins/simplify (thanks @jasondavies for preserving topology!)

✓ Published0🌍 Public
RRandomEtc
Last edited Oct 26, 2012
Created on Oct 26, 2012

This example demonstrates how to simplify complex GeoJSON geometry while preserving topological relationships, using the `d3.simplify` API from the d3-plugins/simplify package. It shows a command-line conversion workflow that reads a GeoJSON input file, applies a simplification algorithm with zero area tolerance and topology-aware processing, and writes the simplified output to a new file. The implementation uses Node.js file I/O with `fs`, JSON parsing, and a custom projection function that passes coordinates through unchanged, making it a practical tool for reducing map data size without breaking shared boundaries.

AI-generated description

Similar vizzes

Loading thumbnail…

Simplifying and cleaning Shapefiles.

This example demonstrates how to simplify and clean geographic data by rounding coordinates within a TopoJSON file. It uses D3’s `d3.round` function to reduce each point’s precision to two decimal places, then outputs the cleaned result as a JSON string. The code maps over the nested structure of polygons, line strings, and points, applying the rounding operation at each coordinate level. The visualization gallery shows the transformed data as plain text, highlighting the coordinate simplification process. The source is a GeoJSON-derived TopoJSON file, processed entirely in the browser with D3 v3.

Mmbostock
76% match
Loading thumbnail…

Line Simplification

This example demonstrates line simplification, a technique that reduces the complexity of geographic shapes by removing points based on their calculated area. Using a United States land mass dataset loaded via TopoJSON, it animates the transition between high and low simplification thresholds, cycling the minimum area from 0.1 to 100 square pixels and back. The visualization uses d3.simplify, a custom algorithm that employs a min-heap to prioritize point removal by triangle area, and renders the results with d3.geo.path and SVG. A text label displays the current threshold and the percentage of points retained.

Mmbostock
75% match
Loading thumbnail…

Dynamic Simplification IV

This map of U.S. states shows dynamically simplified geometry that adjusts its level of detail based on zoom, keeping the smallest visible feature roughly one pixel in size. The example uses TopoJSON data with `topojson.presimplify` and a custom `d3.geoTransform` filter based on a minimum area threshold, applied through `d3.geoPath` with Canvas rendering. Zooming is handled by `d3.zoom`, which updates the simplification threshold and redraws filled land polygons and state borders on the canvas.

Mmbostock
73% match
Loading thumbnail…

Dynamic Simplification

This example shows a map of the United States that continuously simplifies its boundaries, alternating between depicting all counties and reducing them to a coarse outline. The animation cycles through progressive shapes while preserving topology. The code uses `topojson.presimplify` to precompute point importance, a custom `d3.geo.transform` geometry stream to filter points based on a dynamic area threshold, and `d3.geo.path` to render the result onto a Canvas via its 2D context, driven by `transition.tween` and `d3.interpolate`.

Mmbostock
71% match
Loading thumbnail…

Dynamic Simplification PoC

This interactive visualization demonstrates dynamic line simplification on a world map, where the level of detail adjusts as the user zooms in and out. It renders an orthographic projection of world country boundaries using the D3 `geoOrthographic` and `geoPath` APIs onto a Canvas, with data from the visionscarto-world-atlas. The code leverages `topojson-simplify` to recompute simplified geometries based on the current zoom scale, showing a proof-of-concept for performance-adaptive map rendering.

CCurran Kelleher
70% match
Loading thumbnail…

Dynamic Simplification II

This example combines map zooming with dynamic simplification. As the map zooms in and out, the simplification area threshold adjusts based on the current scale, keeping the map visually clear and rendering quickly. Points outside the viewport are simplified much more heavily than those inside, approximating viewport clipping. The code uses `d3.geo.transform` to filter points, `d3.behavior.zoom` for interaction, and `d3.geo.path` with a Canvas context to draw the TopoJSON data (us-states.json), animating between zoom levels with `transition`.

Mmbostock
70% match
Loading thumbnail…

Simplified Map

This example renders a simplified world map using SVG paths generated by d3.geoPath with an equirectangular projection. It loads TopoJSON data from a gist, converts it to GeoJSON with the topojson.feature API, and draws each country as a filled path with white borders. The visualization demonstrates a minimal React integration, where a useEffect hook fetches the data and D3 selects the existing SVG element to bind and render the geographical features.

EErica Rabinovich
70% match
Loading thumbnail…

GeoJSON Transforms

This example demonstrates how GeoJSON geometry types can be transformed into simplified or filtered representations by applying custom point, line, and polygon handlers. It builds on the D3 geo module’s type dispatch system, explicitly defining default handlers for Feature, FeatureCollection, and GeometryCollection objects alongside primitive geometries. The code uses d3_geo_type and d3_noop to create a reusable translator, showing how to override or extend processing for each GeoJSON type. The rendering approach is not shown, focusing solely on the data-transformation pipeline.

Mmbostock
69% match