World Map

100%

✓ Published0🌍 Public

Last edited Apr 21, 2024

Created on Apr 19, 2024

This example visualizes homelessness-related diversity metrics across US states, mapping numerical values to a white-to-blue color scale. The code uses D3 v4 with the `geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from TopoJSON data, while territories are colored based on a static `diversity` dataset. State paths receive hover effects through CSS classes, and the visualization is built within a React framework using SVG rendering. Animated interactions are present, though the tooltip functionality appears incomplete in the provided code.

AI-generated description

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

Similar vizzes

Loading thumbnail…

D3 World Map

This D3 world map visualizes university diversity across U.S. states, using a blue-white linear color scale mapped to each state’s diversity index. Hovering over a state with the mouse reveals a histogram image of that state’s diversity distribution. The visualization uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` for rendering state boundaries, and `d3.legendColor` for the color scale, with data from a static JSON file.

JJincheng Liu

84% match

Loading thumbnail…

D3 World Map

This choropleth map visualizes the average university diversity index across U.S. states in 2021, using a white-to-blue linear color scale. Each state is rendered as an SVG path via `d3.geoPath` with a `d3.geoAlbersUsa` projection, colored by state-level data. Hovering reveals a tooltip, and a `d3.legendColor` legend displays the scale. The code loads TopoJSON state boundaries from a GitHub gist and uses D3 v4 and the d3-legend plugin.

EErik Erickson

84% match

Loading thumbnail…

Fork of D3 World Mapzzz

A choropleth map of the United States visualizes a diversity index for each state, ranging from white to blue via a linear color scale. The visualization uses D3 v4 with `d3.geoAlbersUsa` for projection and `d3.geoPath` to render state boundaries from TopoJSON data. State polygons are filled based on a hardcoded dataset of diversity values, and hovering highlights the state with a thicker stroke. The code includes a commented-out tooltip and a legend using `d3.legendColor`, though neither is fully implemented.

11godfrey

83% match

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

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

83% match

Loading thumbnail…

Homelessness Choropleth map

A choropleth map of the United States displays the total number of homeless persons per state in 2021, with darker blue shades indicating higher counts. Hovering over a state reveals a tooltip with its exact value. The visualization uses D3 v7 with `d3.geoAlbersUsa` projection and `d3.geoPath` to render SVG paths from a GeoJSON file, while a threshold color scale maps data values to a blue scheme. Data comes from a CSV file containing state-level homeless population totals.

EEunice Tu

82% match

Loading thumbnail…

HomelessUSpeople

This visualization displays a map of the United States with a single green landmass against a blue background, representing the country’s geography. It uses `d3.geoAlbersUsa` for projection and `d3.geoPath` to render SVG paths from TopoJSON data fetched from the world-atlas dataset. The code filters the world countries to isolate the USA. Additionally, a separate CSV file is loaded to display dataset statistics, including file size, row count, and column count, in a text container.

Hhappymail6

82% match

Loading thumbnail…

Fork of D3 World Map

This interactive map of the United States uses a blue-to-white color scale to display a “University Diversity Index” for each state, with darker blue indicating higher diversity. Built with D3 v4 and React, the visualization employs `d3.geoAlbersUsa` for the map projection and `d3.geoPath` to render state boundaries. Hovering over a state triggers a tooltip that displays a histogram image for that state, with the map data sourced from an external JSON file.

RReyden Harris

82% match