Fork of Fork of Map

100%

Fork of Fork of Map

✓ Published0🌍 Public

Last edited Apr 2, 2024

Created on Apr 2, 2024

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

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

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

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

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

89% match

Loading thumbnail…

usa map

This example displays a choropleth-style map of US states, with each state filled by a categorical color from `d3.scaleOrdinal` and `schemeCategory10`. It uses `d3.geoPath` with a `geoAlbersUsa` projection to render the SVG paths, and the state boundaries are loaded from a TopoJSON file via `us-atlas`. Hovering a state changes its fill to yellow, while a red stroke outlines all boundaries. The code processes the TopoJSON with `topojson.feature` and appends a `<title>` element for each state name.

SSai Hemanth Babu Sunkari

87% match

Loading thumbnail…

Fork of usa map

This example displays a map of US counties, colored with a categorical color scale and outlined in red. It renders an SVG using a TopoJSON file from the `us-atlas` package, projecting the features with a `geoAlbersUsa` projection. The code employs d3's `geoPath` to generate the map paths and `scaleOrdinal` for coloring each county by name. Hovering turns a county yellow, and the data source is a remote JSON file loaded via d3's `json` loader.

Rreddysushma994@gmail.com

87% match

Loading thumbnail…

Fork of map

This visualization displays a map of the United States, with each county filled using a categorical color scale based on its name. It renders these counties as SVG paths generated by `d3.geoPath` with the `geoAlbersUsa` projection, sourcing geographic data from a US Atlas TopoJSON file. The counties are outlined in red with low opacity, and they highlight yellow on hover. The visualization uses D3 v5 and the `topojson` library’s `feature` function to extract the geometries from the `counties-10m.json` dataset.

Rreddysushma994@gmail.com

87% match