Skip to main content
SimilarExport ZIP
100%

GDP Choropleth Viz save

✓ Published0🌍 Public
TTom Heffernan
Last edited May 14, 2024
Created on May 14, 2024

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.

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

Fork of 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.

LLouisa Penrice
88% match
Loading thumbnail…

d3 choropleth (world) map

This choropleth map visualizes average GDP per capita by country from 1970 to 2017, with each nation shaded on a logarithmic green color scale based on its value. Hovering over a country dims all others, highlights the selected region, and reveals a tooltip with the country’s name and GDP. Built with D3 v6, it uses `d3.geoMercator` and `d3.geoPath` to project and draw the map from a simplified GeoJSON, while the data from a CSV is joined to the topology for coloring. Animated transitions control opacity and tooltip visibility.

AAndrew
88% match
Loading thumbnail…

GDP World Map

This world map visualizes geographic GDP data using a choropleth approach, coloring countries by their economic output. The example loads GeoJSON map data and renders it as SVG paths with `d3.geoPath`, while numeric GDP values drive a color scale. It uses `d3.json` to fetch the dataset and `d3.scaleThreshold` to map values to fill colors, with a tooltip providing details on hover. Built with D3 v6, the visualization demonstrates basic geographic mapping and data-driven styling in an SVG container.

TTom Heffernan
85% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes GDP per capita (PPP, current international $) for 2020 across countries, using a sequential YlGnBu color scale to encode economic output. The map renders with d3.geoNaturalEarth1 and d3.geoPath, while d3.scaleQuantile assigns colors from d3-scale-chromatic’s schemeYlGnBu. Data comes from a World Bank CSV parsed with d3.csvParse, and country boundaries use topojson-client on a world atlas. Gray fills indicate missing GDP values for a given country.

CCurran Kelleher
84% match
Loading thumbnail…

A9 - World Choropleth Map

This example shows a world choropleth map of 2021 GDP values by country, with darker blue shading representing higher GDP. A tooltip displays the country name and GDP on mouseover, while a horizontal color legend encodes the scale. The visualization uses a geographic projection via `d3.geoMercator` and `d3.geoPath` to render GeoJSON features, with color mapping through `d3.scaleSequential` and `d3.interpolateBlues`. GDP data is loaded from a CSV using `d3.csv`, and the legend is built with the `d3-legend` library.

DDuc Pham
82% match