Snowflake Simplification

100%

Snowflake Simplification

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Oct 9, 2013

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.

AI-generated description

An update of Jason Davies’ Quadratic Koch Island Simplification stress test.

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

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

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

68% match

Loading thumbnail…

Merging Counties III

This stress test visualizes a random subset of US counties, merged and colored via TopoJSON’s `topojson.merge` API. It shows a constantly cycling animation where new merged polygon groups fade in, highlight with distinct category colors, and fade out. The example uses D3.v3, `d3.select`, `d3.json`, and an AlbersUSA projection to render SVG paths. The underlying data source is a raw JSON file of US geometries from a gist.

Mmbostock

66% match

Loading thumbnail…

Laskowski Tri-Optimal

This example displays a world map using the Laskowski tri-optimal projection, which minimizes both area and shape distortion. The visualization shows landmasses as dark shapes and country boundaries as thin white lines, all overlaid with a graticule and enclosed by a sphere outline. The code uses `d3.geo.laskowski` for the projection, `d3.geo.path` for rendering, and loads world data via TopoJSON from a remote file. The rendering is done in SVG with distinct CSS classes for land, boundaries, and graticule.

Mmbostock

66% match