Skip to main content
SimilarExport ZIP
100%

Fork of Map

✓ Published0🌍 Public
Mmaddulanagasanjana@gmail.com
Last edited Nov 9, 2025
Created on Nov 10, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Map

This example displays a world map of countries rendered as light blue SVG paths with dark borders, using an Equal Earth projection fitted to the full viewport. The visualization loads geographic data from the World Atlas TopoJSON collection, converts it to GeoJSON features via topojson.feature, and draws each country with d3.geoPath. A hover tooltip reveals each country’s numeric ID, while the projection and path generator are configured through d3.geoEqualEarth and fitSize to center the globe.

Mmaddulanagasanjana@gmail.com
92% 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
90% 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
88% 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
88% 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
88% 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
88% match
Loading thumbnail…

Fork of map exemple

This example shows a world map where each country is colored according to its population, using a threshold color scale and the D3.js library. The map uses a Mercator projection via `d3.geoMercator`, with country boundaries drawn using `d3.geoPath` from TopoJSON data. Hovering over a country triggers a transition that highlights it and dims others, while the underlying data comes from a CSV file. The code relies on `d3.queue` to load external data and uses `d3.scaleThreshold` with `d3.schemeBlues` for the color encoding.

LLauranJade
88% match
Loading thumbnail…

Fork of Map

This map shows a world map rendered entirely in SVG, with each country drawn as a gray shape with dark borders. The visualization loads country boundaries from the `world-atlas` TopoJSON package, converts the topology to GeoJSON using the `topojson` library, and projects it with the Mercator projection via `d3.geoMercator`. The code uses `d3.geoPath` to generate the SVG paths and displays country identifiers in tooltips.

Kkodalijagadeesh9@gmail.com
88% match