D3 World Map

100%

✓ Published0🌍 Public

Last edited Dec 11, 2023

Created on Dec 11, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

D3 World Map

The map displays the University Diversity Index for each U.S. state, using a white-to-blue color scale where darker shades indicate higher diversity. It is rendered as an SVG using `d3.geoPath` and `d3.geoAlbersUsa` with data from a JSON file. On mouseover, a histogram image for the hovered state appears, which is appended dynamically and follows the cursor. The visualization is built with React, D3 v4, and the `d3-legend` library for the color legend.

JJincheng Liu

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

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

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

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

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

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

81% match

Loading thumbnail…

country map

This visualization displays a choropleth map of the United States, coloring each state in red with thin black internal borders. The map is rendered using React and D3 v5, with geographic shapes generated through `d3.geoAlbers` projection and `d3.geoPath`. State boundaries come from the US Atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh`. The SVG paths change to sky blue on hover using CSS, providing simple interactivity.

SSai Kaushik

81% match