D3 World Map

100%

✓ Published0🌍 Public

Last edited Dec 14, 2022

Created on Dec 14, 2022

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.

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

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

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

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

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

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

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