Skip to main content
SimilarExport ZIP
100%

Let's make a map of US-counties with D3.js:"hover and county name "

✓ Published4🌍 Public
NNita
Last edited Dec 1, 2020
Created on Dec 1, 2020

This example displays an interactive map of U.S. counties rendered as SVG paths, with each county’s name appearing as a tooltip on hover. The map uses the `geoAlbersUsa` projection and `geoPath` from D3 v5, while TopoJSON’s `feature` method extracts county geometries from the us-atlas counties-10m.json dataset. Hovering highlights the county in green via a CSS `:hover` rule. The visualization depends on D3’s `select` and `json` utilities to fetch and bind the geographic data.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map of US-counties with D3.js:"hover and county name "

This example displays a choropleth-style map of all US counties rendered as SVG paths, with county names revealed on hover via a native `<title>` element. The visualization uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw county boundaries from TopoJSON data loaded from the us-atlas package. County shapes are styled with black strokes and a green fill on mouseover, showing the geographic distribution of administrative divisions. The code filters the TopoJSON for county features and binds them to path elements, relying on the browser’s built-in tooltip behavior for the name display.

NNita
96% match
Loading thumbnail…

Let's make a map US-counties with D3.js!

This example renders a choropleth-style map of all US counties as light green SVG paths with subtle black borders. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` generator to convert TopoJSON county boundaries from the `us-atlas` dataset into scalable vector graphics. The code loads the TopoJSON via `d3.json`, extracts features with `topojson.feature`, and binds them to SVG path elements, while styling is handled with CSS class selectors.

NNita
91% match
Loading thumbnail…

Country Map

This example renders a choropleth-style map of United States counties on an SVG canvas. Each county polygon is drawn as a purple path with white strokes, and hovered counties turn red, with the county name appearing as a tooltip. The visualization uses D3 v5’s `geoAlbersUsa` projection with `geoPath` to generate the shapes, and TopoJSON’s `feature` method to parse county boundaries from the us-atlas dataset. County names come from the TopoJSON properties, while the map loads via a remote JSON URL.

AAashish Pandey
86% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a choropleth map of U.S. counties using D3.js and TopoJSON. It renders a geographic projection with the `d3.geoAlbersUsa()` projection and `d3.geoPath()`, drawing landmasses as light green paths over a blue sphere. The map fetches county boundary data from the freeCodeCamp CDN, processes it with TopoJSON’s `feature()` function, and appends each country as an SVG path. The visualization uses an SVG canvas and is accompanied by a video tutorial, showcasing a straightforward workflow for building interactive maps.

KKonstantin Krumin
86% match
Loading thumbnail…

Let's make a US map with D3.js!

This example demonstrates how to create a map of the United States using D3.js, rendering each state as a green SVG path with black strokes. The code loads county-level TopoJSON data from the us-atlas package, extracts state boundaries with topojson.feature, and projects them using the d3.geoAlbersUsa() projection. State paths are generated with d3.geoPath and appended to an SVG element, with styles defined in an accompanying CSS file. The example uses D3 v5 and relies on the geo-albers-usa-territories plugin for the projection.

NNita
86% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple interactive map of the United States, with each state rendered as a light green shape that turns red on hover. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw the geography, while TopoJSON’s `feature` extracts state boundaries from the us-atlas counties-10m dataset. The SVG paths are selected and appended via `selectAll` and `data`, with styling handled in CSS. The map is static apart from the hover effect, with no zoom or pan interactions.

Mmikezy
85% match
Loading thumbnail…

Gist 5967514

This example displays a map of U.S. counties using a TopoJSON shapefile from the U.S. Census Bureau, rendered as gray-filled paths with white borders that turn red on hover. It shows the geographic boundaries of counties and responds to clicks, though the click behavior only logs to the console. The visualization uses D3 v3’s `d3.geo.path()` to project and draw the SVG paths, and TopoJSON’s `topojson.feature` to extract GeoJSON features from the topology. The map is static, with no zoom or pan, and the hover effect is the only interactive styling.

CCaged
85% match
Loading thumbnail…

map: usa, counties

This example renders a choropleth-style map of the United States, displaying county and state boundaries overlaid on landmasses, with graticules and a sphere outline. It uses a React component with `d3.geoAlbersUsa` for projection and `d3.geoPath` for drawing geometries. Data comes from the US Atlas TopoJSON (`us-atlas@3.0.0/counties-10m.json`), processed with `topojson.feature` and `topojson.mesh`. Interactive tooltips show county and state names on hover. The SVG output is styled with semi-transparent fills and distinctive boundary strokes.

Zzach b.
85% match