Skip to main content
SimilarExport ZIP
100%

D3 World Map

✓ Published4🌍 Public
JJincheng Liu
Last edited Dec 15, 2022
Created on Dec 15, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

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
96% 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
93% 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
92% 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
92% 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
84% match
Loading thumbnail…

US State Map

This interactive map of the United States uses D3 v3 to render state boundaries as SVG paths from the included `uStates.js` data file. Each state is colored according to randomly generated sample statistics—low, average, and high values—using an interpolated color scale from light yellow to dark red. Hovering over a state triggers a CSS-based tooltip that displays the state's name and its low, average, and high values in a styled HTML table. The map animates state fills on hover with a subtle opacity change, while the tooltip follows the cursor, providing a clean and informative way to explore the data.

CCoola85
78% match
Loading thumbnail…

D3 World Map

This example displays a U.S. map with state boundaries and labels, alongside a scatterplot of cities plotted by latitude and longitude, using a dark background. It loads geographic data from a JSON file and renders it with the D3 v3 library, using the AlbersUSA projection and `d3.geo.path` for SVG paths. The map also includes city points from a CSV file, and the code demonstrates basic chart setup with D3 selections and event handlers.

HHaolong Liu
78% match
Loading thumbnail…

D3 map

This visualization presents a map of the United States, with each state’s geographic boundary drawn as a vector path. The code defines state outlines using SVG path data within a JavaScript object, where each state’s shape is specified as a series of coordinates. Built with React, the visualization leverages D3.js to render the map, using the path data to generate the geographic shapes through the `d3.geoPath` API. The animation-driven rendering brings the map to life, dynamically displaying the state boundaries on the canvas.

00506Zhengyi
77% match