Untitled

100%

✓ Published0🌍 Public

Last edited Dec 13, 2021

Created on Dec 13, 2021

A choropleth map of the United States displays drought counts per state from 2012 to 2021, with a year selector to switch between annual datasets. The visualization uses D3 v7 to render SVG paths and a color legend categorizing drought frequency into six bins from green (low) to red (high). The code loads data from local JavaScript config files and computes the map projection, with a tooltip and legend providing supplementary context.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This choropleth map of the United States displays state-level COVID-19 case values with a green color scale, using lighter shades for lower numbers and darker greens for higher ones. The visualization loads CSV data and merges it with GeoJSON state geometries using d3.csv and d3.json, then renders paths with d3.geoPath and the d3.geoAlbersUsa projection. A d3.scaleQuantize maps numeric values to a five-color range, while states lacking data appear gray. The SVG is built with D3 v7 and styled with minimal CSS.

Jjoslinl

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

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

81% match

Loading thumbnail…

Untitled

This choropleth map of the United States visualizes the legal status of a substance in each state, with colors ranging from red to green based on a five-point scale. The visualization also plots cities as circles, with their size representing the number of years lived there, and includes interactive tooltips that appear on hover. The map is rendered using D3 version 3 with an Albers USA projection, loading geographic data from a GeoJSON file, state statuses from a CSV, and plotting city coordinates through the same projection.

Ggcappadaniel

81% match

Loading thumbnail…

Untitled

A choropleth map of US counties depicts poverty rates using a threshold color scale with a green sequential scheme. The visualization loads TopoJSON geographic data via `d3.json` and joins it with CSV values using `d3.map`. It renders county boundaries with `d3.geoPath`, overlays state borders, and includes a legend with an axis. The map also uses `d3.axisBottom` and `d3.scaleThreshold` for color classification.

Rryan-dirajlal

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

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

79% match

Loading thumbnail…

Untitled

A choropleth map of the United States displays the cumulative wildfire burn area per state, with a green color scale encoding the logarithm of total acres burned. Clicking a state zooms and centers the map on that region, enlarging it fourfold and replacing the state abbreviation label with its full name and fire size. Using React, d3.geoPath, and d3.json, the SVG map projects geographic data with d3.geoAlbersUsa and animates the zoom via d3.transition, while the color scale relies on d3-scale-chromatic.

PPavelyev Ivan

78% match