Skip to main content
SimilarExport ZIP
100%

Map exemple

✓ Published0🌍 Public
EElodie31190
Last edited Oct 3, 2022
Created on Oct 3, 2022
Forked from 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.

AI-generated description

map

MIT Licensed

Similar vizzes

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

map exemple

This map example visualizes global population estimates by country using a dark red color scale. The code loads geographic data from the world-atlas package and joins it with a TSV file containing population statistics. The visualization uses the d3.geoMercator projection and d3.geoPath to render country boundaries as SVG paths, while the topojson library converts the GeoJSON features. Hovering over a country turns it purple, and the map supports zooming through d3.zoom and event handling.

JJuliette
90% match
Loading thumbnail…

MAP

This map visualizes global population estimates for each country using a choropleth color scale, where darker reds indicate higher population values. The geographic outlines are rendered as SVG paths generated from world-atlas TopoJSON data, projected with `d3.geoMercator`. Population figures come from a TSV dataset loaded via `d3.tsv`, and the fill color is computed with `d3.scaleLinear`. The visualization also includes interactive pan and zoom functionality through `d3.zoom`, and hover states change country colors to purple via CSS.

AAnissa Belkelfa
89% 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
89% match
Loading thumbnail…

Fork of map exemple

This choropleth displays global population estimates, with each country filled using a dark red gradient that intensifies for higher population counts. The visualization loads country borders and demographic data from the world-atlas TopoJSON and TSV files, then renders them as SVG paths via d3.geoPath with a Mercator projection. Interactive zooming is enabled through d3.zoom, and hovering over a country turns it purple while a tooltip reveals its name.

MMuhriddinMahmudjonovich
88% match
Loading thumbnail…

Fork of map exemple

This visualization displays a choropleth map of world population estimates, using darker reds to represent higher population counts. It employs d3.geoMercator and d3.geoPath to project and render country boundaries from the world-atlas TopoJSON dataset, with d3.scaleLinear mapping population estimates to fill colors. The map supports zooming via d3.zoom, and hover effects change country fills to purple. Population data is loaded from a TSV file and matched to country features by ISO numeric codes.

IIndira120
88% match
Loading thumbnail…

Fork of map exemple

This choropleth map visualizes world population estimates for each country, with a color scale ranging from light red to dark red. The map renders geographic boundaries using `d3.geoPath` with a Mercator projection, and supports zooming via `d3.zoom`. Population data comes from a TSV file and country shapes from TopoJSON, both sourced from the world-atlas package. Countries display hover effects through CSS, changing fill color to purple, and show country names via SVG `title` elements.

MMunisbek-design
87% 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
87% match