Fork of country map

100%

Fork of country map

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

This fork of a country map visualizes average annual sunshine hours per U.S. state using a choropleth map. Hovering over a state reveals its exact yearly hours via a tooltip, with colors ranging from yellow to red based on a sequential scale. The visualization uses D3 v7’s `d3.geoPath` and `d3.geoAlbersUsa` projection to render TopoJSON state boundaries from the us-atlas dataset, while `d3.scaleSequential` and `d3.interpolateYlOrRd` handle color encoding. A linear gradient legend displays the hour range.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Country map

This choropleth map colors US states by average annual sunshine hours, using a yellow-green sequential scale. The data is stored in a JavaScript Map for approximately 20 states, with missing states rendered pale green. Built with D3 v7 and topojson-client, it uses `d3.geoAlbersUsa()` for projection, `d3.geoPath()` for rendering state boundaries, and a custom tooltip on mouse events. The legend is drawn inside the SVG, and state data comes from the us-atlas states-10m GeoJSON.

Ppriyankachary1701@gmail.com

92% match

Loading thumbnail…

Fork of Section 1(a)-Making Maps Using TOPOJSON

This choropleth map visualizes average annual temperatures for U.S. states, using a red-to-blue sequential color scale to encode hotter and colder climates. Built with D3.js v7, the visualization renders SVG paths from TopoJSON data loaded via the `topojson-client` library, projecting states with `d3.geoAlbersUsa()` and `d3.geoPath()`. Hovering over a state triggers a tooltip that displays the state name and temperature value, with the map including a color legend. The underlying temperature data is stored in a JavaScript dictionary.

Mmadalahyndavi123@gmail.com

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

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

82% match

Loading thumbnail…

Fork of Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This choropleth map displays the average 2024 temperature by U.S. state, with cooler states in blue and hotter states in red, according to an illustrative data set embedded in the code. It renders state boundaries as SVG paths using `d3.geoPath` and a `d3.geoAlbersUsa` projection, loading geographic data from the `us-atlas` TopoJSON via `topojson-client`. A hover tooltip and a sequential color scale (`d3.scaleSequential`) complete the interaction and visual encoding.

Mmadalahyndavi123@gmail.com

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

82% match

Loading thumbnail…

Fork of usa map

This map of the United States renders each state as an SVG path, colored by a categorical color scale based on the state name. The visualization uses the D3.js library's `geoPath` and `geoAlbersUsa` projection to convert TopoJSON state boundaries into map geometry. A hover effect turns the state black via CSS. The state boundaries are sourced from a remote JSON file containing US states data.

GGeorge Vaz

82% match

Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika

82% match