Fork of Atlas Map

100%

Fork of Atlas Map

✓ Published0🌍 Public

Last edited Apr 12, 2023

Created on Apr 12, 2023

This fork of the Atlas Map uses D3.js to render a global choropleth map of GDP per capita for the year 2020. It displays countries colored on a blue-green scale using a `d3.scaleQuantile` mapping, with gray for missing data, overlaid with red graticule lines and an aqua outline. The visualization fetches geographic data from a TopoJSON world atlas and economic data from a CSV file, then uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw the countries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Atlas Map

This atlas map visualizes global GDP per capita for the year 2020, using a color gradient from yellow to blue to represent the quantile distribution of the data. Countries with missing data appear in gray. The map is rendered with the D3.js library, using `geoNaturalEarth1` for the projection, `geoPath` for country outlines, and `geoGraticule` for the graticule and outline layers. GDP data is fetched from a CSV file, while country geometries are loaded from a TopoJSON world atlas.

VVineela Reddy

86% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by their economy classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes an interactive color legend built with custom D3 selections. The map supports zooming via d3.zoom, and country tooltips display name and economic group. Data comes from the World Atlas TopoJSON and TSV files, loaded with d3.json and d3.tsv, with hover states highlighting countries in red.

Ggeneralshermanw

84% match

Loading thumbnail…

Fork of choropleth map

This fork of a choropleth map visualizes global economic data by coloring countries according to their economy type. The map uses a natural Earth projection and displays a dynamic color scale based on the spectral scheme. Built with D3 v5 and TopoJSON, the visualization loads world atlas data from a TSV and JSON file, then projects geographic features using d3.geoPath. Users can click a country to select a specific economy value, which triggers a re-render that updates the color assignments. The SVG output supports zooming through the d3.zoom component, and hovering highlights individual countries in red.

Zzenoe

84% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes GDP per capita (PPP, current international $) by country, using data from the World Bank’s 2020 dataset. It renders countries as geographic paths via `d3.geoPath`, fills them with a sequential color scale (`d3.scaleQuantile` and `schemeYlGnBu`), and marks missing values in gray. The code fetches TopoJSON world atlas boundaries and a CSV dataset, then combines them using `topojson-client` and `d3.csvParse`. Natural Earth projection and graticule lines provide geographic context.

NNICHAPA

84% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by their economy category using a spectral color scale. The map is rendered with SVG paths generated by `d3.geoPath` and the Natural Earth projection, with country names and values shown as tooltips. The visualization includes a custom color legend built with `d3.scaleOrdinal`, and users can pan and zoom via the `d3.zoom` event handler. Data is loaded from the World Atlas TopoJSON and TSV files.

Zzenoalive

83% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by economy category using a spectral color scale, with hover highlighting and a custom color legend. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` to project and render TopoJSON world-atlas data, while `d3.zoom` enables pan and zoom. The legend, rendered with reusable SVG components, displays ordinal color swatches and labels. Data is loaded from the world-atlas package, combining TopoJSON geometry with TSV metadata.

Mmavercikalvin

83% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by economy category, using a categorical color scheme with an interactive color legend built from circles and text. The visualization loads world country boundaries and metadata from the world-atlas package, merges them with TopoJSON processing, and projects the map with d3.geoNaturalEarth1 and d3.geoPath. It supports zooming via d3.zoom and highlights countries on hover by changing their fill to red.

Bboardkeystown

83% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map visualizes World Bank GDP per capita data for 2020 across countries worldwide. The map colors each country using a quantile color scale with a YlGnBu sequential scheme, with gray filling regions lacking data. The visualization loads GeoJSON topology from the world atlas and CSV data, processing both through `Promise.all` before rendering with `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. The code implements a reusable map component that updates through a state management pattern using `d3.select` and `d3.scaleQuantile`.

MMatovu Ronald

83% match