Fork of Chloropleth

100%

Fork of Chloropleth

✓ Published0🌍 Public

Last edited May 5, 2024

Created on May 2, 2024

This example renders a simplified choropleth of the United States using a static grayscale fill for each state. It loads TopoJSON data from the `us-10m.v1.json` file and converts it to GeoJSON features with `topojson.feature`. The map is drawn as SVG paths using a `d3.geoAlbersUsa` projection and a `d3.geoPath` generator, with each state assigned a light gray class. No interactivity or zoom behavior is implemented, despite the README noting an unsuccessful attempt at state zooming.

AI-generated description

unsuccesfull dataviz of state zooming

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Map

This example shows a choropleth map of U.S. states, with each state filled by a categorical color from `schemeCategory10`. The code loads county-level TopoJSON data from the `us-atlas` CDN and renders the boundaries using `d3.geoPath` with an `geoAlbersUsa` projection. State features are extracted via `topojson.feature`, and each path’s fill is assigned by a `scaleOrdinal` based on the state name, with a tooltip title appended. The visualization demonstrates a straightforward integration of D3’s geospatial and scale APIs.

Rreddysushma994@gmail.com

86% match

Loading thumbnail…

Fork of US states map

This example displays a choropleth map of US states, with each state filled by a categorical color assigned through `d3.scaleOrdinal` and `schemeCategory10`. It renders the map using `d3.geoPath` with a `geoAlbersUsa` projection, drawing state boundaries from TopoJSON county data loaded via `d3.json`. Hovering over a state turns it green through CSS, and each state includes an SVG `<title>` element showing its name.

SShawn-Lian

85% match

Loading thumbnail…

Fork of Map

This example displays a choropleth-style map of the United States, with each state filled in a light blue shade and outlined by dark gray borders, over a pale background. Hovering over a state reveals its name via an SVG `<title>` tooltip. The visualization uses a `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON data from the us-atlas package, drawing both individual state polygons and the national outline. State names are derived from the TopoJSON geometries’ `properties.name` field.

Sson.sultan@yahoo.com

85% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example displays a choropleth map of U.S. states, using darker blue fills to indicate higher population values from a hardcoded dataset for fourteen states, with unlisted states shown in light gray. It loads TopoJSON from the us-atlas package, converts it to GeoJSON with `feature`, and renders paths via `d3.geoPath` and the `d3.geoAlbersUsa` projection. A linear color scale maps population extents to a blue range, and hover tooltips appear through SVG `title` elements. The map uses D3 v7 and TopoJSON-client, with an SVG rendering approach.

Ssaisanthoshravula@my.unt.edu

85% match

Loading thumbnail…

Fork of USA Country Map

This example displays a choropleth-style map of the 50 US states, rendered as an SVG where each state boundary is drawn using D3’s `geoPath` and a custom `geoAlbersUsaTerritories` projection. The map initially fills each state with a teal color, and hovering over a state highlights it in magenta. Data is loaded asynchronously from the US Atlas TopoJSON file (`states-10m.json`) using React hooks (`useState`, `useEffect`) and processed with TopoJSON’s `feature` and `mesh` functions to generate land and interior borders. The visualization is built with React 16 and D3 v5, with styling defined in an external CSS file.

Ttejaswikalluri05

84% match

Loading thumbnail…

Fork of Fork of US states map : with colorScale. One color for each country

This example displays a choropleth-style map of African states, rendered as green SVG paths with white strokes on a dark background. It loads GeoJSON data from a GitHub gist, converts it into geographic features using `topojson.feature`, and projects the shapes with `d3.geoAlbersUsa` and `d3.geoPath`. Each state path includes a `<title>` element showing the region’s name from the data’s properties. The implementation relies on D3 v5 for selection, data loading, and path generation, while the map’s styling is defined in an external stylesheet.

Bbhargavarathod

84% match

Loading thumbnail…

Fork of USA Map with TOPO JSON Data

This example renders a stylized choropleth-free map of the United States using React and D3 v5. It displays state boundaries and landmasses as SVG paths, with aqua oceans, green land, and cream-colored interior borders, overlaid with graticules. The code loads TopoJSON data from the US Atlas (states-10m.json) via `d3.json`, converts it using `topojson.feature` and `topojson.mesh`, and projects it with `d3.geoAlbers` and `d3.geoPath`.

MManideepChakilam

84% match

Loading thumbnail…

Fork of USA Country Map

This choropleth displays the United States with individual states rendered as orange filled polygons, separated by black boundary lines. The map uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to draw state features and interior mesh from a TopoJSON file loaded with `d3.json` and processed via `topojson.feature` and `topojson.mesh`. React manages the SVG output, with state loaded asynchronously through a custom hook.

TTulluripallavi

84% match