Skip to main content
SimilarExport ZIP
100%

Fork of D3 World Mapzzz

✓ Published0🌍 Public
11godfrey
Last edited Mar 20, 2023
Created on Mar 20, 2023
Forked from D3 World Map

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Fork of D3 World Map

This interactive map of the United States visualizes a university diversity index, using a blue color scale from white to dark blue to represent values from 0.2 to 0.8. Hovering over a state reveals a histogram image for that specific state, positioned near the cursor. The visualization is built with D3 v4, using `d3.geoAlbersUsa` for the projection, `d3.geoPath` for rendering state boundaries, and `d3.legendColor` for the color legend. State outlines have a white stroke and react to mouse events, while tooltips are implemented as dynamically appended images rather than the standard D3 tooltip.

Hhusseinmaatouk506@gmail.com
90% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
87% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
87% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
87% match
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
87% 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
87% match
Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth map of the United States displays each state as a pink shape with white borders, enhancing interactivity by highlighting states in orange on hover. The visualization uses D3.js v5’s `geoAlbersUsaTerritories` projection and `geoPath` to render geographic boundaries, while React manages the component state. TopoJSON’s `feature` and `mesh` functions process the US Atlas state boundaries from a JSON file, and the SVG output is styled via CSS.

Mmoslem-tg
86% match