Arc Deduplication

U.S. State Mesh

This example visualizes the starting point of every arc in a TopoJSON file of U.S. state boundaries, rendered as a black dot on a mesh of state outlines. It loads the topology from `us.json` and uses `d3.geo.path()` with a `null` projection to draw the mesh. The code then plots each arc's start coordinate as a small circle, applying a custom `transform` function to map the TopoJSON coordinates using the file's `transform.scale` and `transform.translate` values. The visualization highlights how polygon boundaries are decomposed into shared arcs, revealing the topology's underlying structure.

78% match

TopoJSON Layers

This example animates the four layers of a U.S. TopoJSON map—a glowing land silhouette, a solid land fill, county boundaries, and state boundaries—by fading each SVG layer in and out in sequence. Using d3.geo.path with the Albers USA projection, the code fetches US GeoJSON data via d3.json and converts it with topojson.feature and topojson.mesh to render the paths. Each layer is styled with distinct SVG filters and strokes, and the cyclic animation is driven by chained transitions on the opacity property.

Merging Counties

This example demonstrates merging county boundaries into state boundaries using the TopoJSON 1.6 merge functionality. It visualizes the United States by first displaying a static land mass, then animating the sequential drawing of each state’s borders derived from its constituent counties. The animation uses SVG paths with stroke-dasharray transitions, progressively revealing each state’s outline before fading it out. The code employs `d3.geo.path`, `d3.geo.albersUsa`, `topojson.merge`, and `topojson.mesh` to compute and render the geographic features.

Junction Finding

This example visualizes the topology of the contiguous United States by drawing the mesh of internal boundaries and marking junction points where three or more arcs meet. It uses the TopoJSON library to compute the mesh from the `us.json` topology file, with `d3.geo.path` rendering the SVG paths. Circles are placed at junctions by counting arc endpoints, and the transformation scales coordinates to map space using the topology's transform metadata.

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`.

Ring Cutting

Clicking the play button hides the control and animates the cutting of every US state polygon into its constituent rings. The animation shows red boundary segments being separated from the remaining blue paths, with cuts processed one by one and fading out over time. The visualization uses TopoJSON state data, D3’s geo path for rendering, and SVG transitions to animate the cuts.

73% match

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei

73% match

Merging States II

A variation on merging polygons, this example displays a map of the United States where a selected set of states is highlighted in orange. The visualization uses a careful rendering technique rather than topological manipulation to draw the highlighted states, layering a boundary path over the state fill. It employs D3 v3's `d3.geo` and `d3.json` to load US state geometries, along with the TopoJSON library to compute state boundaries and meshes. The rendering is dynamic, with the selected states' boundaries outlined in black to clearly distinguish the merged region.