Skip to main content
SimilarExport ZIP
100%

US States Colored By Region

✓ Published1🌍 Public
Jjons288
Last edited Nov 7, 2018
Created on Oct 17, 2018

This map of US states categorizes each region with a distinct color: the Northeast in blue, the Midwest in teal, the South in green, and the West in light blue. It uses D3 v5 with TopoJSON to load and render the states, applying `d3.geoPath` to draw each selected region. The code filters state geometries by region sets and merges them separately to color the paths via CSS classes. Data comes from the US 10m TopoJSON file hosted on d3js.org.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fixed projection for US States

This example displays the contiguous United States color-coded by Census region: the Northeast, Midwest, South, and West. Each regional group of states is drawn as a separate path element, with the colors defined in CSS. The visualization uses the D3 library’s `geoPath` to render geographic data and the TopoJSON `feature` and `merge` functions to combine the US states dataset with its geometries. The map is rendered as an SVG, and the data is loaded from the `us-10m.v1.json` file.

Jjons288
86% match
Loading thumbnail…

Fixed projection for US States

This example displays a choropleth map of the United States, with states grouped into four color-coded regions: Northeast, Midwest, South, and West. It uses `d3.json` to load US TopoJSON data from `us-10m.v1.json`, then `topojson.feature` and `topojson.merge` to extract and combine state geometries by region. The paths are rendered as SVG elements using `d3.geoPath`, with regions filtered by state FIPS codes.

Jjons288
84% match
Loading thumbnail…

Fixed projection for US States

This example displays US states grouped into four census regions—Northeast, Midwest, South, and West—each filled with a distinct color. It uses d3.json to load the TopoJSON file, topojson.merge to combine state geometries by region, and d3.geoPath to render the resulting shapes as SVG paths. State groupings are defined using d3.set of FIPS codes, and CSS classes control the fill colors.

Jjons288
83% match
Loading thumbnail…

Fixed projection for US States

This example divides US states into four color-coded census regions—Northeast, Midwest, South, and West—drawn as fixed geographic projections. It uses D3 v5 with `d3.json`, `d3.geoPath`, and the `topojson` library to merge state geometries from the us-10m.v1 TopoJSON dataset. Each region is rendered as a separate SVG path with distinct fill colors defined in CSS.

Jjons288
83% match
Loading thumbnail…

Fixed projection for US States

This map visualization uses a fixed projection to display the four major U.S. census regions—Northeast, Midwest, South, and West—as distinct colored areas. It renders US state boundaries from the `us-10m` TopoJSON dataset, merging state geometries by regional ID using the `topojson` `merge` function. The D3 `select` and `geoPath` APIs generate SVG paths for each region, with styles defined in a stylesheet assigning each region a unique fill color.

Jjons288
81% 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
81% 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
81% match
Loading thumbnail…

Fixed projection for US States

This example visualizes US states colored by region, using sales data from an avocado dataset filtered to a single date. The map renders geographic boundaries and circles representing data points through an SVG. It processes TopoJSON and CSV data with `d3.json` and `d3.csv`, merges them via `topojson.feature`, and applies static regional color fills for the Northeast, Midwest, South, and West. The `d3.geoPath` API generates the state outlines, while CSS classes define each region’s fill color.

Jjons288
80% match