Skip to main content
SimilarExport ZIP
100%

Fork of GDP Choropleth Viz

✓ Published0🌍 Public
LLouisa Penrice
Last edited May 13, 2024
Created on May 13, 2024
Forked from GDP Choropleth Viz

This interactive visualization combines a choropleth map of global GDP per capita with a time-series line plot. A slider allows the user to change the displayed year, updating the map’s color scale and the position of a red vertical line on the line plot. Hovering over a country highlights it in red and updates the line plot to show that country’s GDP trajectory from 1995 to 2023. The map is rendered using `d3.geoPath` with a `geoEqualEarth` projection and a graticule, while the line plot is built with `d3.line`, axes, and scales. GDP data is mapped to a linear color scale from white to blue.

AI-generated description

The color of each country on the map shows its GDP per capita. You can move the slider to change the year shown on the map. You can hover over a country to show its GDP over time on the plot. The red line on the plot shows the current year on the slider

Goals of viz:

  • Be able to compare the GDP of countries at a given year
  • Be able to see how one country's GDP changes over time
  • Get an idea of how global gdps change over time by playing with slider
MIT Licensed

Similar vizzes

Loading thumbnail…

GDP Choropleth Viz

A world map colored by GDP per capita displays each country’s economic standing for a selected year, controlled by a slider. Hovering over a country updates a line plot showing that nation’s GDP trend over time, with red and green reference lines marking the current year’s value. The visualization combines a `d3.geoEqualEarth` projection rendered as SVG with `d3.scaleLinear` color encoding, alongside a linked line chart built using `d3.line` and axis components. GDP data originates from a CSV file, while country boundaries use a GeoJSON source.

TTom Heffernan
90% match
Loading thumbnail…

GDP Choropleth Viz final

This interactive visualization presents a global choropleth map where each country’s color encodes its GDP per capita, with a slider to shift the year between 1970 and 2033. Hovering highlights a country in pink, while selecting it turns it red and displays a line plot of that nation’s GDP over time, split into blue (pre-2023) and red (post-2023) segments. The map uses `d3.geoPath` for country shapes and a quantile-based color scale, while the line plot relies on `d3.axisBottom` and `d3.axisLeft` for axes. Data is sourced from a GDP dataset, with country name mappings to reconcile discrepancies.

TTom Heffernan
90% match
Loading thumbnail…

GDP Choropleth Viz save

A choropleth map colors countries by GDP per capita, with a slider to change the displayed year from 1970 to 2033. Hovering a country reveals a line plot of its GDP over time, annotated with red and green dashed lines marking the current year’s value. Built with D3 v6, it uses `d3.geoPath` for map rendering and `d3.scaleLinear` for both the map’s color scale and the plot’s axes.

TTom Heffernan
88% match
Loading thumbnail…

GDP Choropleth Viz failed log scale

A choropleth map colors countries by GDP per capita for a selected year, with a slider to scrub through time from 1970 to 2033. Hovering highlights a country in pink, and clicking pins it in red while a line plot beside the map shows that country’s GDP trajectory, split into blue (historical) and red (projected) segments past 2023. A toggle switches the map and plot between linear and logarithmic color/value scales. Built with D3 v6, the visualization uses `d3.geoPath` for map rendering and `d3.scaleLinear`/`d3.scaleLog` for the scales, with country data loaded from external files.

TTom Heffernan
86% 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
83% match
Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes GDP per capita (PPP) for countries in 2020, using a quantile color scale with a YlGnBu scheme to show economic disparities, while gray fills indicate missing data. Built with D3.js, it renders world geography via `geoNaturalEarth1` and `geoPath`, fetching TopoJSON from the visionscarto-world-atlas and parsing World Bank CSV data. The map uses `scaleQuantile` for color mapping, `Promise.all` to load datasets asynchronously, and dynamically resizes to the viewport.

Eeinsko
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
82% 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
82% match