Skip to main content
SimilarExport ZIP
100%

Map_2

✓ Published1🌍 Public
NNita
Last edited Aug 27, 2021
Created on Aug 19, 2021
Forked from Map

This map visualization displays global population growth rates for 2020, using a color scale that maps negative growth to indigo, positive growth to dark green, and zero to white. It renders country boundaries from a GeoJSON file containing world administrative regions onto an SVG canvas, using D3’s `d3.geoPath` and `d3.geoEqualEarth` projection. The data comes from a CSV file with World Bank indicators, parsed via D3’s `csv` function, and the code uses a linear color scale with an extent derived from the metric values.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth map

This choropleth map visualizes annual population growth rates by country for 2017, using a diverging color scale from indigo (negative growth) to white (no change) to dark green (positive growth). The visualization renders world country shapes using D3’s `geoEqualEarth` projection and `geoPath`, with graticule and sphere overlays. It loads World Bank data from a CSV and geospatial data from GeoJSON, and includes an interactive tooltip on hover plus a user-location marker via the Geolocation API.

Jjbruzzo
85% match
Loading thumbnail…

World Map Visualization

This visualization presents a choropleth world map showing population counts by country, using a blue sequential color scale on an SVG-rendered Natural Earth projection. The code loads CSV population data and GeoJSON country boundaries, then applies d3.geoNaturalEarth1 and d3.geoPath to draw each nation. Countries without matching data appear in black. Population values are converted to numbers and mapped through d3.scaleQuantize with d3.schemeBlues[5] to encode magnitude visually across the geographic layout.

NNukaShravanKumar
80% match
Loading thumbnail…

World Map

This interactive visualization displays global population data for 2018 on a natural Earth projection world map. It uses D3 v5’s `geoPath` and `geoNaturalEarth1` to render country boundaries from a TopoJSON world atlas, with hovering highlighting each nation. A color legend and a square-root size legend encode population values via `scaleOrdinal` and `scaleSqrt`, while a `zoom` handler enables panning and zooming. Data comes from a CSV merged with the atlas, and animated transitions update the legends.

Jjitendrashahiitb
80% match
Loading thumbnail…

World Map

This interactive world map visualizes population data by country for 2018, using color and size to distinguish between regions with and without reported figures. The visualization employs a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with countries rendered as SVG paths. Population values are mapped to circle sizes using `d3.scaleSqrt`, and a size legend with tick marks displays the scale. Users can pan and zoom through `d3.zoom`, and hovering over a country reveals its population via a tooltip. Data comes from a CSV file joined to TopoJSON world atlas geometry.

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

Basic geo path

This example displays a world map using an equal-earth projection, with country boundaries drawn as SVG paths. It loads GeoJSON country shapes and CSV population growth data, computing a color scale based on the 2020 population growth rates for each country. The code uses d3.json, d3.csv, d3.geoEqualEarth, d3.geoPath, and d3.scaleLinear, though the population data is processed but not yet applied to the map. The visualization renders static gray country outlines without color encoding, demonstrating basic D3 v6 geographic path setup.

NNita
79% match
Loading thumbnail…

World Map Visualization

This example displays a choropleth world map where countries are colored by population using a blue sequential color scale. The visualization loads geographic boundaries from Natural Earth GeoJSON and joins them with population data from a CSV file. It leverages D3 v6 APIs including `d3.csv`, `d3.json`, `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.scaleQuantize` with `d3.schemeBlues`. Countries without matching data appear black, while the SVG rendering uses a 800x500 viewport.

Ssaikrishnabussa
78% match
Loading thumbnail…

Map

This map visualizes global population data from a CSV file (accessed via `d3.csv`), with each country’s population represented by a semi-transparent circle overlaid on a geographic projection. The circles’ areas are scaled using `d3.scaleSqrt`, and the map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1` on an SVG. Users can pan and zoom via `d3.zoom`, and hovering over a country reveals a tooltip with its regional name and population. A size legend, built with custom `sizeLegend.js`, and a color legend (`colorLegend.js`) accompany the visualization. Interactive encoding uses the `join` pattern to update SVG elements.

TTajallah-maryam
78% match