U.S. Congressional Districts

100%

U.S. Congressional Districts

✓ Published0🌍 Public

Last edited Mar 2, 2021

Created on Mar 2, 2021

This map shows U.S. congressional districts for a selected state, displayed as semi-transparent pink polygons over a Mapbox basemap. The visualization uses Mapbox GL JS to render a GeoJSON source fetched from an AWS API Gateway endpoint, which returns district boundaries for the requested state (defaulting to Indiana). After loading, the map automatically flies to the first polygon’s coordinates, zooming in for detail. The code relies on Mapbox’s `addSource` and `addLayer` methods, plus the `flyTo` animation, with no additional charting libraries.

AI-generated description

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

73% match

Loading thumbnail…

Neighboring Congressional Districts

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.

Mmbostock

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

70% match

Loading thumbnail…

states.geojson

This example visualizes the boundaries of all U.S. states from a GeoJSON file. The data is rendered as a static map using D3's geographic projections and path generators (e.g., d3.geoPath), with each state's polygon colored distinctly to show its shape and relative location. The visualization relies on the coordinate geometry in states.geojson to draw the contiguous United States, Alaska, and Hawaii, enabling quick comparison of state boundaries and spatial layout.

WWill Carter

69% match

Loading thumbnail…

US Federal Judicial Districts

This visualization maps US federal judicial districts, with each district filled by color and labeled with its judicial district code. The map includes county boundaries and uses an SVG renderer with D3’s geographic path generator. Clicking a district logs the number of Democratic and Republican presidential appointees serving as active judges in that district, with the underlying data prepared from a TopoJSON pipeline that merges county-level geometries into districts.

CCaged

69% match

Loading thumbnail…

Country Map

This interactive map visualizes the fifty United States using a pink fill for each state and black borders, with a hover effect that changes the fill color to purple. Built with React and D3 v5, it renders geographic data as SVG paths using `d3.geoPath()` with the `geoAlbersUsaTerritories` projection. The code loads US state boundaries from a TopoJSON file via `us-atlas@3.0.0`, applying `feature()` and `mesh()` from TopoJSON to extract land polygons and interior borders.

TTejucmandava

66% match

Loading thumbnail…

Map of India

This visualization displays the districts of India as colored polygons, with state boundaries outlined in black. District polygons are colored according to their state, using a categorical color scheme, and each includes a hover tooltip showing the district and state name. The map supports zooming and panning via d3.zoom. The code uses d3.json to load TopoJSON data, d3.geoMercator with clipExtent, and d3.geoPath to render the features.

RRahulChaitu999

66% match

Loading thumbnail…

Gist 6b515fcc2b7c6479d9c31059140eb611

This example displays a full-screen interactive map of the contiguous United States, centered on the country’s geographic midpoint using Mapbox GL JS. The map uses a custom Mapbox style and includes a navigation control for zoom and rotation. The viewport is constrained to the bounding box spanning from the Southwest to the Northeast corners of the lower 48 states. The code sets an initial zoom level and center coordinates derived from that bounding box, but does not load or visualize any external data layers.

WWill Carter

66% match