Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
AAshishKumar3301
Last edited Apr 20, 2023
Created on Mar 4, 2023
Forked from Making a Bar Chart

An interactive choropleth map of the United States visualizes county-level population data, sourced from a local `data/us.json` file. Users can click counties to trigger a zoom animation, which reveals their unique identifier via an alert. The map is rendered using D3's geo projection and path APIs, with selections and transitions handled through D3's selection, transition, and animation methods.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This choropleth map shows the population distribution across U.S. counties, with a color scale from light blue to red indicating population magnitude. The visualization is rendered as SVG using D3 v7, employing `d3.geoAlbersUsa` for projection and `d3.geoPath` to draw county boundaries from `counties.json`. Population data is loaded from `PopulationEstimates.csv` and matched to counties by name, with a tooltip showing county name and population on mouseover. The code uses a sequential color scale with an RGB interpolator.

Eeranyoung
84% match
Loading thumbnail…

Untitled

An interactive choropleth of US states allows users to click a state to zoom in and highlight its boundaries, with the map rendered via d3.geo.path and TopoJSON. Wildfire data is loaded from a CSV, though the visualization primarily shows state selection and zoom animation using React state management. The albersUsa projection scales and translates to focus on selected regions, with transitions animating the zoom effect.

AAndrey Getmanov
83% match
Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall
82% match
Loading thumbnail…

Untitled

A choropleth map of the United States visualizes state-level data from a CSV file, with each state filled according to a linear color scale (yellow to red) based on the `prem_an` attribute. The map also plots doughnut markers at state centroids, showing state abbreviations, and includes a partially commented-out section for city locations with circle sizes proportional to years lived. Built with D3 v3, the code uses `d3.geo.albersUsa()`, `d3.geo.path()`, and SVG paths rendered from GeoJSON, merging CSV attributes into the map's feature properties before binding data to the paths.

Iillus0r
82% match
Loading thumbnail…

Untitled

This example shows a choropleth map of the United States, with states colored by whether the author has lived in, visited, or never visited them. Overlaid circles mark cities where the author has resided, with circle size scaled by years spent there. Hovering a circle reveals a tooltip with the city name. The visualization is built with D3 v3, using `d3.geo.albersUsa` and `d3.geo.path` to render GeoJSON state boundaries, while a linear color scale and SVG circles encode the categorical and quantitative data.

KKhushwant Rai
82% match
Loading thumbnail…

Untitled

This example presents an interactive map of the United States using d3.geo.path with an Albers USA projection, rendering state boundaries as SVG paths. Clicking a state triggers a smooth zoom animation that scales and translates the map to center on the selected region, highlighting it in orange. The map is constructed from topojson.feature and include a mesh overlay for state borders. The zoom effect is achieved by transitioning the group element's transform attribute using d3.transition over 750 milliseconds.

Ppcsong33
81% match
Loading thumbnail…

Untitled

This interactive choropleth maps the author’s personal travel history, coloring U.S. states by whether they were lived in, visited, or unvisited, with a legend for reference. Cities where the author resided appear as orange circles, sized by years spent there, and hover tooltips reveal each city’s name. Built with D3 v3, it uses `d3.geo.albersUsa` and `d3.geo.path` to project and render GeoJSON state boundaries, while `d3.csv` loads the state and city data. Circle radii scale with the square root of years lived, and SVG hover effects lighten state fills.

AAnimesh Nautiyal
81% match
Loading thumbnail…

Untitled

A choropleth map of the United States displays county-level poverty rates, colored with a threshold scale using a green sequential scheme. The visualization includes a legend with a color bar and labeled ticks. The code uses D3 v5 and the `d3.geoPath` and `d3.scaleThreshold` APIs, along with TopoJSON for US county boundaries and a CSV data file for the rates.

IIsha Singh
81% match