Skip to main content
SimilarExport ZIP
100%

TEST - TD2 - dboard

✓ Published1🌍 Public
MMaeva B
Last edited Oct 10, 2022
Created on Oct 10, 2022

This example shows a zoomable choropleth map of world countries, where each country’s fill color encodes its population estimate on a scale from light to dark red. The visualization is built with D3 v5, using `d3.geoMercator` for projection, `d3.geoPath` to render country outlines from TopoJSON data sourced from the world-atlas package, and `d3.scaleLinear` for the color mapping. A `d3.zoom` handler applies transforms to all country paths, and hovering a country displays its name as a tooltip. Population data comes from a TSV file loaded via `d3.tsv`.

AI-generated description
MIT Licensed

Similar vizzes

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

Map exemple

This interactive choropleth displays global population estimates, with each country filled by a color scale ranging from light red to dark red according to its population. Built with D3 v5, the map uses TopoJSON to convert world-atlas GeoJSON features into SVG paths via a Mercator projection, while an accompanying TSV file supplies the population attributes. The visualization supports zooming and panning, and countries turn purple on hover.

EElodie31190
83% 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
82% 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
82% 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
82% 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
82% match
Loading thumbnail…

Fork of map exemple

This visualization displays a choropleth map of world countries, with each nation filled by a dark red color scale based on its estimated population. The map uses d3.geoMercator projection and d3.geoPath to render geographic features from the World Atlas TopoJSON data. Population values are loaded as TSV data with d3.tsv, while event handling and zoom functionality come from d3.zoom. Country labels and population estimates are attached as SVG title elements, and hover effects are styled through CSS.

Ssnehareddygurram
82% match
Loading thumbnail…

map exemple

This choropleth map displays global population estimates, with countries shaded from light red to dark red according to their population size. The visualization uses `d3.geoMercator` for projection and `d3.geoPath` to render country boundaries from TopoJSON data loaded via `d3.json`, while population values come from a TSV file loaded with `d3.tsv` and mapped to colors using `d3.scaleLinear`. The map supports pan and zoom interactions through `d3.zoom`, and hover effects are styled with CSS.

TTimothyMiage
82% match