Junction Finding

100%

Junction Finding

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Sep 2, 2013

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.

AI-generated description

Step 2 of 4 of topology construction. From How To Infer Topology.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

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.

Mmbostock

81% match

Loading thumbnail…

U.S. States TopoJSON

This example shows a map of the United States rendered as SVG paths, where individual states turn red when hovered. The map uses the TopoJSON `us-atlas` file, loaded via `d3.json`, and the code relies on the `topojson` library to convert the TopoJSON topology into geographic features. The rendering is done with `d3.geoPath` to project the geometry, and state borders are drawn as a separate path using a mesh that highlights each boundary. No interaction beyond the hover effect is implemented.

Mmbostock

77% match

Loading thumbnail…

U.S. Counties TopoJSON Mesh

This example renders a minimalist map of U.S. counties using a TopoJSON mesh from the U.S. Census Bureau’s shapefile, served via the `us-10m.v1.json` file. The SVG visualization displays county boundaries as thin black lines with rounded joins, and overlays small circles at each arc’s starting point, revealing the topological structure of the data. The code uses `d3.geoPath` to project the mesh and `topojson.mesh` to extract boundaries, while `topojson.transform` positions the circles. Rendering is entirely SVG-based with D3 v4, and the map uses no fill, focusing purely on geometric outlines.

Mmbostock

76% match

Loading thumbnail…

U.S. TopoJSON

This example displays a layered map of the United States using county, state, and national boundaries. The map is rendered as SVG, with counties stroked in thin gray, states in thin black, and the nation in a thicker black outline. It loads TopoJSON data from the us-atlas package and uses the topojson-client library to compute and draw the geographic meshes and features. The visualization is built with d3.v4, using d3.json for data fetching and d3.geoPath for path generation.

Mmbostock

76% match

Loading thumbnail…

County Topology

This graph shows the topology of U.S. counties as a network, where each node sits at a county centroid and links connect neighboring counties that share borders. The visualization uses simplified geometry from a TopoJSON file, rendering the nation and county boundaries as SVG paths via `d3.geoPath`. Node positions come from path centroids, while neighbor relationships derive from `topojson.neighbors` on the county geometries. Edges are drawn as straight lines between connected centroids, overlaid on the map to reveal adjacency patterns across the country.

Mmbostock

76% match

Loading thumbnail…

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.

Mmbostock

75% match

Loading thumbnail…

U.S. TopoJSON

This visualization displays U.S. state and county boundaries extracted from a TopoJSON file served from d3js.org. A blurred, semi-transparent silhouette of the nation appears behind a solid white version, creating a subtle depth effect. The code uses d3.geoPath to render the features, while topojson.feature and topojson.mesh convert the TopoJSON data into GeoJSON paths for drawing.

Mmbostock

75% match

Loading thumbnail…

U.S. Counties TopoJSON Mesh

This example displays a mesh of U.S. county boundaries derived from a TopoJSON shapefile, rendered as a black outline with small circles marking each polygon’s coordinate origin. It uses d3.json to load the TopoJSON data, then topojson.mesh and topojson.transform to build the mesh and map coordinates. The outline is drawn with d3.geoPath, while circles are positioned using the transform function, showing the raw geometry structure rather than a filled choropleth. The data comes from the U.S. Census Bureau via the us-10m.v1.json file, and the visualization renders entirely in SVG.

FFrissAnalytics

75% match