Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
DDonald Bagwell
Last edited Feb 14, 2024
Created on Feb 14, 2024

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.

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
95% 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
95% 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
95% 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
92% 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
91% 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
90% 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
89% match
Loading thumbnail…

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

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.

NNita
88% match