Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Blank Slate with Hot Reloading

✓ Published1🌍 Public
Ssandyman2109@gmail.com
Last edited Nov 1, 2025
Created on Nov 1, 2025

This choropleth map shows the number of universities per U.S. state, with darker orange shades representing higher counts and gray for states without data. It uses d3.json to load TopoJSON from the us-atlas package, converts it to GeoJSON via topojson.feature, and projects it with d3.geoPath and d3.geoAlbersUsa. A d3.scaleSequential with d3.interpolateOranges maps values to colors. Hovering over a state triggers a tooltip that displays the state name and its university count. The example uses embedded data but also includes a CSV variant.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This choropleth shows the number of universities per U.S. state, with darker orange shades indicating higher counts and gray for states without data. Hovering over a state reveals a tooltip with its name and university total. The visualization uses d3.geoPath with a geoAlbersUsa projection to render TopoJSON state boundaries from us-atlas, and d3.scaleSequential with an interpolateOranges color scheme to encode values. State data is provided via a hardcoded array in USA.html, while the separate usa.js version loads the same values from a CSV file.

Ssandyman2109@gmail.com
97% match
Loading thumbnail…

Fork of Fork of Fork of Blank Slate with Hot Reloading

This choropleth map visualizes the number of universities per U.S. state using a sequential orange color scale. The visualization loads US TopoJSON from us-atlas and a CSV dataset, joining state names to university counts. D3’s `geoAlbersUsa` projection and `d3.geoPath` render state boundaries, while a tooltip displays exact values on hover. Missing data states appear gray.

Kkmohithkumar7@gmail.com
96% match
Loading thumbnail…

Fork of React Starter

This choropleth map shows the number of universities per U.S. state, using an orange sequential color scale on an Albers projection via `d3.geoAlbersUsa`. The map renders SVG paths for states loaded from a TopoJSON source (`us-atlas`), converted to GeoJSON with the `topojson@3` library. State data is embedded in the page, and hovering displays a tooltip with the state name and university count, powered by D3 v7's selection and event handling. States without data appear gray.

Ssandyman2109@gmail.com
90% match
Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This world map visualizes the number of universities in 24 countries, using a choropleth color scale from light to dark blue on a natural Earth projection. The D3.js v7 code loads country boundaries from a TopoJSON file via `d3.json`, converts them with `topojson.feature`, and renders them as SVG paths using `d3.geoPath`. A color scale is created with `d3.scaleSequential` and an `interpolateBlues` interpolator. Hovering over a country triggers a mousemove event that displays a tooltip showing the country name and its university count, with data sourced from a CSV file.

Ssandyman2109@gmail.com
88% match
Loading thumbnail…

Fork of Map

This example displays a choropleth-style map of the United States, with each state filled in a light blue shade and outlined by dark gray borders, over a pale background. Hovering over a state reveals its name via an SVG `<title>` tooltip. The visualization uses a `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON data from the us-atlas package, drawing both individual state polygons and the national outline. State names are derived from the TopoJSON geometries’ `properties.name` field.

Sson.sultan@yahoo.com
81% match
Loading thumbnail…

Fork of US states map : with colorScale. One color for each country

This choropleth map displays US states, each filled with a distinct color from a categorical palette. The visualization uses the D3.js library, specifically `d3.geoPath` with `geoAlbersUsa` projection, to render the map from a TopoJSON file loaded from the us-atlas package. The color scale assigns colors based on the state's name, and hovering over a state turns it green via CSS. The map also includes tooltips that reveal the state name using the `.append('title')` method.

DDonald Bagwell
81% match
Loading thumbnail…

Fork of Fork of Map

This example shows a choropleth map of U.S. states, with each state filled by a categorical color from `schemeCategory10`. The code loads county-level TopoJSON data from the `us-atlas` CDN and renders the boundaries using `d3.geoPath` with an `geoAlbersUsa` projection. State features are extracted via `topojson.feature`, and each path’s fill is assigned by a `scaleOrdinal` based on the state name, with a tooltip title appended. The visualization demonstrates a straightforward integration of D3’s geospatial and scale APIs.

Rreddysushma994@gmail.com
80% 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
80% match