Neighboring Congressional Districts

100%

Neighboring Congressional Districts

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Feb 4, 2014

This example visualizes neighboring congressional districts from the 113th congress, highlighting the hovered district in red and its adjacent districts in orange. It uses topojson.neighbors to detect shared edges between district geometries. The map is rendered with d3.geo.path and an Albers USA projection, displaying district and state borders as white meshes. Hovering triggers a mouseover event that classifies neighboring districts via d3.selectAll, while the underlying geographic data comes from two TopoJSON files.

AI-generated description

This example uses topojson.neighbors to compute neighboring congressional districts (from the 113th congress) from geographic boundaries by detecting shared edges (arcs). The red district is the hovered district, and the orange district is the neighboring districts.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

113th U.S. Congressional Districts

This example displays the 113th U.S. Congressional districts as an interactive choropleth map, with each district shading orange on hover over a gray base. It uses a custom Albers USA projection via `d3.geo.albersUsa()` and renders SVG paths with `d3.geo.path`. District and state boundaries are drawn as white strokes using `topojson.mesh`, while district features come from `topojson.feature` on data fetched from GitHub-hosted JSON files. The visualization clips all paths to the landmass using a clip path derived from a US TopoJSON mesh.

Mmbostock

85% match

Loading thumbnail…

Congressional District Topology

This example visualizes the adjacency graph of U.S. congressional districts from the 113th Congress, drawing a node-link diagram atop a faded map of the country. District centroids serve as nodes, with edges connecting neighboring districts; districts off the map are excluded, and only links between earlier and later features are drawn. Built with d3.v3, the map uses d3.geo.albersUsa projection and d3.geo.path for rendering, while topological relationships are computed via topojson.neighbors and topojson.feature. The final graph is drawn as an SVG path, merging neighbor pairs with d3.merge.

Mmbostock

85% match

Loading thumbnail…

County Topology

This graph displays the topology of U.S. counties, with each node positioned at its county centroid and links connecting neighboring counties that share a border. The visualization uses TopoJSON’s `topojson.neighbors` to identify adjacent counties and `d3.geoPath` to compute centroids from simplified geometry. A background map and white county mesh provide geographic context, while black lines trace the adjacency network. The code loads data from the us-10m.v1.json file and renders entirely in SVG using D3 v4.

FFrissAnalytics

73% match

Loading thumbnail…

Canadian Province TopoJSON

This example displays a mesh of Canadian federal electoral districts from a 2011 TopoJSON file, highlighting each district boundary with a thin black stroke. Red dots mark the first coordinate of every arc in the topology, revealing the underlying data structure. The map uses a conic conformal projection and is rendered as SVG via `d3.geo.path`. The code employs `topojson.mesh` to extract boundaries and appends circles using each arc’s transformed starting point, based on the TopoJSON transform.

BBrideau

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

72% match

Loading thumbnail…

U.S. Counties TopoJSON

This map displays the boundaries of every county in the United States using data from a TopoJSON file fetched from `https://d3js.org/us-10m.v1.json`. It renders the county shapes as filled SVG paths, with a white mesh overlay showing county borders via `topojson.mesh`. Hovering over any county turns it red. The visualization is built with D3 v4, using `d3.geoPath` to project the geometry and `topojson.feature` to extract the features, relying on the `us-atlas` TopoJSON data source.

Mmbostock

72% match

Loading thumbnail…

Gist 5967514

This example displays a map of U.S. counties using a TopoJSON shapefile from the U.S. Census Bureau, rendered as gray-filled paths with white borders that turn red on hover. It shows the geographic boundaries of counties and responds to clicks, though the click behavior only logs to the console. The visualization uses D3 v3’s `d3.geo.path()` to project and draw the SVG paths, and TopoJSON’s `topojson.feature` to extract GeoJSON features from the topology. The map is static, with no zoom or pan, and the hover effect is the only interactive styling.

CCaged

71% match

Loading thumbnail…

From US Atlas, drawing MD Counties

This example displays a choropleth map of Maryland counties from the US Atlas TopoJSON data, with hover highlighting that turns each county red and logs its FIPS ID to the console. It uses d3.geoPath to render SVG paths of county boundaries, while a threshold color scale applies a sequential OrRd scheme. The county borders are drawn as a separate white mesh for contrast. The code loads the topojson feature collection and removes non-Maryland tracts, though the data lacks population values, so the color encoding remains visually uniform.

MMTClass

71% match