Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Blank Slate with Hot Reloading

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

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.

Ssandyman2109@gmail.com
88% 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
87% match
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
86% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays world countries colored in light green on a blue sphere, with hover effects turning countries red. It uses D3 v5 and TopoJSON to load and render world geography from the world-atlas dataset. The code combines `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interactive panning and zooming. Country names are joined from a TSV file and shown as SVG `<title>` tooltips.

Ggharakhani1986
82% match
Loading thumbnail…

Fork of Fork of World Map with D3.js!

This visualization displays a world map using D3.js and TopoJSON, with countries rendered as yellow filled paths on a dark blue sphere. It loads geographic data from the world-atlas countries-110m.json file and projects it using d3.geoEquirectangular. The code employs d3.json to fetch data, topojson.feature to convert TopoJSON to GeoJSON, and d3.geoPath to generate SVG paths. A hover effect darkens country fills using CSS, while the sphere background uses a navy color.

Rradhadevarapu
81% 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
80% match
Loading thumbnail…

Fork of Let's make a map with D3 (Tricks).js!

This interactive map displays world countries using a natural Earth projection, rendered as SVG paths with green fill that turns red on hover. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. Users can pan and zoom the map through `d3.zoom`, with transformations applied to a group element containing the country paths. The map also includes a blue sphere outline drawn via `d3.geoPath` with the `geoNaturalEarth1` projection, and each country displays its name as a tooltip using SVG `title` elements.

BBKirst3
80% match
Loading thumbnail…

Fork of Fork of world map

This interactive D3.js world map uses an orthographic projection to render Earth’s landmasses as white countries with black outlines against a blue oceanic sphere. It loads country boundaries from the world-atlas TopoJSON dataset, processing them via the `topojson.feature` function and drawing paths with `d3.geoPath`. Hovering over a country highlights it in orange through a CSS `:hover` rule, providing visual feedback for exploration.

Sshabbab01
80% match