Skip to main content
SimilarExport ZIP
100%

RC 007 Fork of Map

✓ Published0🌍 Public
Rrichardcorreia@my.unt.edu
Last edited Oct 31, 2025
Created on Oct 30, 2025
Forked from Map

This example presents two synchronized SVG maps: a world map colored by 2022 population data and a zoomed view of Portugal. It uses D3 v7 with the `d3.geoNaturalEarth1` projection, `d3.geoPath`, and `d3.geoGraticule` to render country boundaries and graticules from world-atlas TopoJSON. Population values from a CSV drive a sequential blue color scale, and hovering over a country triggers a tooltip showing its name and population.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Map

This example displays a world map colored according to a small set of country population figures, using lighter blue shades to represent higher values. It renders countries as SVG paths through `d3.geoPath` and the `geoEqualEarth` projection, with a Title and Labels for each of the eleven populated countries. The map loads TopoJSON from the `world-atlas` dataset via `d3.json`, and uses a `d3.scaleSequential` with `d3.interpolateBlues` to map populations. A legend in the top-left corner communicates the color scale range.

Mmaddulanagasanjana@gmail.com
81% match
Loading thumbnail…

Fork of map exemple

This example displays a world map with countries colored by population estimates using a linear color scale from red to dark red. The visualization uses `d3.geoMercator` projection and `d3.geoPath` to render geographic features from TopoJSON data provided by world-atlas. Population values and country names are loaded from a TSV file, while pan and zoom interactions are enabled through `d3.zoom`. Hovering over a country changes its fill to purple via CSS.

Ppatratel
81% match
Loading thumbnail…

Fork of Fork of map exemple

This example displays a choropleth world map where each country is colored according to its population estimate, ranging from red to dark maroon. The visualization uses d3.geoMercator for projection, d3.geoPath for rendering SVG paths, and topojson.feature to convert TopoJSON data from the World Atlas 50m dataset. Population values are loaded from a TSV file and mapped to colors via d3.scaleLinear. Hovering highlights countries in purple, and d3.zoom enables pan and zoom interactions.

Nnsatyaprakash22
80% match
Loading thumbnail…

Fork of React & D3 Starter

This example shows a world population map where individual countries are shaded with a blue sequential color scale, and hovering over a country reveals its name and population in millions via a tooltip. It renders a Natural Earth projection using `d3.geoPath` and `d3.geoNaturalEarth1`, with geographic data loaded from TopoJSON via `topojson.feature` and country names from a TSV file. The code uses `d3.scaleSequential` with `d3.interpolateBlues` to map population values to fill colors, and SVG paths for country boundaries.

Ppvvaishnavi93@gmail.com
80% match
Loading thumbnail…

Fork of map exemple

This example displays a zoomable world map where each country is filled with a color intensity based on its population estimate. The choropleth uses a linear scale transitioning from light to dark red, with hover effects changing the fill to purple. It builds the map using `d3.geoPath` with a `geoMercator` projection and TopoJSON data from world-atlas, while population and country names come from a TSV file. Zoom interactions are handled through d3’s `zoom` behavior, transforming SVG paths.

KKinjal-Goyani
80% match
Loading thumbnail…

Fork of map exemple

This example displays a zoomable world map where each country is filled with a color intensity based on its population estimate. The choropleth uses a linear scale transitioning from light to dark red, with hover effects changing the fill to purple. It builds the map using `d3.geoPath` with a `geoMercator` projection and TopoJSON data from world-atlas, while population and country names come from a TSV file. Zoom interactions are handled through d3’s `zoom` behavior, transforming SVG paths.

KKinjal-Goyani
80% match
Loading thumbnail…

Fork of map exemple

This example displays a zoomable world map where each country is filled with a color intensity based on its population estimate. The choropleth uses a linear scale transitioning from light to dark red, with hover effects changing the fill to purple. It builds the map using `d3.geoPath` with a `geoMercator` projection and TopoJSON data from world-atlas, while population and country names come from a TSV file. Zoom interactions are handled through d3’s `zoom` behavior, transforming SVG paths.

KKinjal-Goyani
80% match
Loading thumbnail…

Maps-Exemple

This example displays a choropleth map of world countries colored by population estimates, with hover highlighting and zoom/pan interaction. It uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render SVG paths from TopoJSON data loaded from the world-atlas package, while population values and country names come from a supplementary TSV file. A linear `d3.scaleLinear` maps population magnitudes to a red color ramp, and the `d3.zoom` behavior applies transforms to all country paths.

JJShellBach
80% match