Line Simplification

100%

Line Simplification

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 7, 2013

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

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

79% match

Loading thumbnail…

Dynamic Simplification III

This example demonstrates dynamic simplification of a filled polygon representing US land masses, where the level of detail adapts during zooming. The effect is subtle because the polygon fill hides most topological changes. Animated transitions repeatedly zoom between a close-up of the Chesapeake Bay and a full view of the country. The visualization uses d3.geo.path with a custom d3.geo.transform to filter points based on an area threshold, rendered on a Canvas via the context API, with d3.behavior.zoom and TopoJSON data.

Mmbostock

78% match

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

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

76% match

Loading thumbnail…

Dynamic Simplification IV zoom to bounding box

This map of U.S. states dynamically simplifies geometry during zooming so that visible detail stays near one square pixel, using D3 v4 and topojson-simplify. Clicking any state highlights it and triggers a smooth zoom to its bounding box via `d3.zoom` and `d3.geoPath`. A hidden canvas with `getImageData` identifies the selected feature by color, while borders and fills render on a visible Canvas with animation.

CCyberZafa

72% match

Loading thumbnail…

Snowflake Simplification

An interactive stress test of TopoJSON simplification on two quadratic Koch snowflake polygons. The visualization shows how the jagged outlines degrade as a mouse-driven slider raises the simplification area threshold. It uses D3 v3 with `d3.geo.path`, `d3.geo.transform`, and `d3.scale.sqrt` to filter points, with the snowflake geometry generated procedurally via an L-system and pre-simplified with the TopoJSON library.

Mmbostock

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

70% match