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

100%

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

✓ Published11🌍 Public

Last edited Dec 4, 2020

Created on Dec 4, 2020

This example displays a map of US states, each rendered as a path with a distinct color from a categorical scale. It shows how each state can be uniquely identified and visually separated using a color-coding scheme. The visualization uses D3.js version 5, specifically the `d3.geoPath` and `geoAlbersUsa` projection to draw the map, along with `scaleOrdinal` and `schemeCategory10` for coloring. It loads US state boundaries from the us-atlas 10m TopoJSON dataset and creates SVG paths with hover effects defined in CSS.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

84% match

Loading thumbnail…

country_map_usa_ice-8

This example displays a choropleth map of the United States, with each state filled with a distinct color from a categorical scale and a hover effect that turns the state white. It uses D3 v7’s `geoAlbersUsa` projection and `geoPath` to render the map from TopoJSON data loaded from the us-atlas CDN. State boundaries are drawn with black strokes, and tooltips showing state names appear via appended `title` elements. The color mapping and hover behavior are implemented with `scaleOrdinal` and CSS `:hover` rules.

Hhossaphul

84% match