Untitled

100%

✓ Published0🌍 Public

Last edited Nov 19, 2020

Created on Nov 18, 2020

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

86% match

Loading thumbnail…

Untitled

This example presents a choropleth map of U.S. states, with each state filled using a color scale from light yellow to dark red based on randomly generated low, average, and high values. Hovering over a state triggers a tooltip that displays these three metrics in a table. The visualization uses D3 v3 and SVG, with the `uStates` library providing the map outlines and `d3.interpolate` for color encoding. State boundaries are drawn as paths, and the tooltip appears dynamically near the cursor.

Tthanhtrant219

85% match

Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei

85% match

Loading thumbnail…

Untitled

This example displays a choropleth map of the United States, coloring each state based on a numeric diversity value ranging from 0 to 5, with values mapped to a categorical color scale from grey to dark red. The map renders state boundaries using D3’s `d3.geoPath` and TopoJSON data from the US 10m dataset, while state fill colors are assigned via an ordinal `d3.scaleOrdinal`. The code loads the TopoJSON file and appends SVG paths for each state, using the diversity object to set fill colors and adding white state borders.

YYFKxenigsegg

84% match

Loading thumbnail…

Untitled

This choropleth map of the United States displays sample data for each state, with tooltips showing low, average, and high values on hover. Built with React and D3 v3, it renders states as SVG paths using the `uStates.js` helper, and colors each state via `d3.interpolate` from a yellow-to-dark-red scale based on randomly generated data. The custom tooltip div appears on mouseover, populated by the `tooltipHtml` function.

MManh Pham

84% match

Loading thumbnail…

Untitled

This choropleth displays the 50 U.S. states with land areas filled in green and white state borders, highlighting a state in orange on hover. It uses React and D3 v5’s `geoPath` with the `geoAlbersUsaTerritories` projection to render geographic features as SVG, pulled from TopoJSON data in the US Atlas (`states-10m.json`). The `feature` and `mesh` functions from TopoJSON extract land polygons and interior boundaries, which are styled via CSS.

SSelena Ding

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

83% match