Skip to main content
SimilarExport ZIP
100%

CSCE-5320: ICE-8 US Country map

✓ Published2🌍 Public
NNaveenParitala
Last edited Apr 5, 2022
Created on Apr 5, 2022

This example displays a choropleth map of the United States, showing state boundaries with a white fill and black strokes. Upon hovering over a state, its fill color changes to goldenrod via a CSS `:hover` rule. The map is rendered as an SVG using D3 v5 and the topojson library, specifically employing `d3.geoPath` with the `geoAlbersUsa` projection. Data originates from the `us-atlas` counties-10m JSON, with state features extracted via topojson's `feature` function.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CSCE-5320: ICE-8 US Country map

This example shows a map of US states rendered as SVG paths, with states filled white and outlined in black. Hovering over a state turns it goldenrod, revealing its name in a tooltip. The code uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw the map, with TopoJSON’s `feature` method to parse state boundaries from the us-atlas counties-10m.json dataset. The map is loaded asynchronously via `json`, and interactions are handled through D3 event listeners on the path elements.

NNaveenParitala
92% match
Loading thumbnail…

Country Map- ICE 8

This example displays a choropleth-style map of the United States, coloring each state with a uniform dark teal fill and a light stroke. Hovering over a state changes its fill to a pale cream, providing a simple interactive highlight. The visualization uses D3 v5’s `geoPath` and `geoAlbersUsa` projection, combined with TopoJSON’s `feature` method to parse state boundaries from a remote JSON file. The SVG rendering is styled via a linked CSS stylesheet, with hover effects applied through the `.states:hover` class.

YYbg99
89% 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
87% match
Loading thumbnail…

Data Visualization ICE8 - Country Map

This example displays a choropleth-style map of the United States using red-filled states with blue outlines and green hover states. Built with D3 v5 and TopoJSON, it loads US Atlas state boundaries and projects them using `geoAlbersUsa`. The `geoPath` generator renders each state as an SVG `<path>`, with a `<title>` element revealing the state name on hover. The map uses the `geo-albers-usa-territories` library for accurate territory placement.

Ppravalika.thogaru10@gmail.com
87% match
Loading thumbnail…

ICE-8:US Map

This example displays a choropleth-style map of the United States with light green states outlined in orange on a light blue background. It uses d3.geoPath with a d3.geoAlbersUsa projection to render the map, and topojson.feature to extract state boundaries from the US Atlas states-10m.json dataset. The visualization is drawn as an SVG with a fixed width and height, with each state path filled and stroked directly.

RRebecca Moore
86% match
Loading thumbnail…

ICE8 USA Map

This example displays a choropleth-style map of the United States, with each state filled in green and outlined in a semi-transparent orange. It shows the geographic boundaries of all 50 states, highlighting them in red on hover. The visualization uses the D3 v5 library with `d3.geoPath` and `geoAlbersUsa` projection, rendering the map as SVG paths from TopoJSON data loaded from the us-atlas repository. The `states-10m.json` file provides the geographic features, and the `geo-albers-usa-territories` plugin enables territory inclusion.

AAmanullah007
86% match
Loading thumbnail…

ICE8 USA Map

This visualization displays a choropleth map of the United States, with state boundaries drawn as SVG paths. The code uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to render geographic features from TopoJSON data loaded from the us-atlas repository. Each state shape is colored with a default fill, and hovering changes the fill color via CSS. State names appear as tooltips using SVG `title` elements, sourced from the TopoJSON feature properties.

BBVNPK001
86% match
Loading thumbnail…

ICE-8-US-Map

This interactive choropleth displays U.S. states as brown SVG paths, colored green on hover, using a geoAlbersUsa projection and d3.geoPath to render geographic features from a TopoJSON dataset loaded from us-atlas via d3.json. The code builds the map with D3 v5 and topojson’s feature method, and adds a title attribute for each state.

AAli Shah Solanki
86% match