Skip to main content
SimilarExport ZIP
100%

Fork of US states map

✓ Published0🌍 Public
SShawn-Lian
Last edited May 5, 2022
Created on May 5, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

A choropleth map of US states renders each state as a muted gray SVG path with thin dark borders, using an Albers USA projection. The visualization currently shows uncolored states, though the code defines a color scale with `d3.scaleOrdinal` and `schemeCategory10` for per-state coloring. Hovering any state turns it green via CSS. The map is built with `d3.geoPath`, TopoJSON state features, and the `geo-albers-usa-territories` projection, loading geographic data from the `us-atlas` package.

SSnapika
92% match
Loading thumbnail…

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

This choropleth map displays US states, each filled with a distinct color from a categorical palette. The visualization uses the D3.js library, specifically `d3.geoPath` with `geoAlbersUsa` projection, to render the map from a TopoJSON file loaded from the us-atlas package. The color scale assigns colors based on the state's name, and hovering over a state turns it green via CSS. The map also includes tooltips that reveal the state name using the `.append('title')` method.

DDonald Bagwell
91% match
Loading thumbnail…

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

This example displays a map of US states, with each state filled by a unique color from a categorical scale and its name in a tooltip on hover. It uses a TopoJSON file from the us-atlas package, projected with `geoAlbersUsa()`, and rendered via `d3.geoPath` into SVG paths. The view also uses `d3.scaleOrdinal` with `schemeCategory10` for the color mapping.

JJyothicherukuri
91% 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
90% match
Loading thumbnail…

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

This visualization displays a choropleth map of US states, where each state is filled with a distinct color from a categorical palette. The map uses the d3.geoAlbersUsa projection to render the geographic boundaries as SVG paths. Data is loaded from the us-atlas counties-10m.json file, with state names mapped to colors via d3.scaleOrdinal. States turn blue on hover, using CSS styling within the d3.select, d3.geoPath, and d3.json workflow.

Nnagamaheswar
89% match
Loading thumbnail…

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

This choropleth map of U.S. counties assigns a distinct categorical color to each state using `d3.scaleOrdinal` with `d3.schemeCategory10`. The map projects geographic data with `d3.geoPath` and a `d3.geoAlbersUsa` projection, rendering counties as SVG paths with red strokes and a blue hover effect. It loads TopoJSON county boundaries from the `us-atlas` package and includes a tooltip with each county’s state name via appended `title` elements. The visualization uses `d3.v5` and the `topojson` library for feature extraction.

VVenkata Rajashekar Reddy Chinthala
89% match
Loading thumbnail…

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

This example displays a choropleth map of US states, with each state assigned a distinct color from the d3.scaleOrdinal and schemeCategory10 palette. Hovering over a state turns it green, providing interactive feedback. The map is rendered as SVG paths using d3.geoPath with a geoAlbersUsa projection, processing TopoJSON county data from the us-atlas dataset. State names are included as tooltips via appended title elements.

Aanduskong
88% match
Loading thumbnail…

Fork of Fork of ICE8 USA Map

This example displays a choropleth map of U.S. states, each filled with a distinct categorical color and labeled with its name at the geographic centroid. The visualization uses d3.geoAlbersUsa for projection and d3.geoPath to render state boundaries from TopoJSON data loaded from us-atlas. A d3.scaleOrdinal with schemeCategory10 supplies the fill colors, and hover interactions turn states red via CSS. State names are appended as SVG text elements positioned by d3.geoPath.centroid.

Ssivamani
88% match