Skip to main content
SimilarExport ZIP
100%

Population Change in Europe in 2019 by Region

✓ Published0🌍 Public
SStefan Apostol
Last edited Dec 19, 2022
Created on Dec 19, 2022
Forked from HTML Starter

This example visualizes population change across European regions in 2019, using a choropleth map with a color scale ranging from brown to teal to represent growth rates per 1,000 persons. It employs the `eurostat-map` library, which fetches Eurostat data via the `demo_r_gind3` dataset, and renders the map as an SVG using React and D3. The map includes customizable borders, legend, and title, with thresholds dividing the data into discrete color classes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

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

Population time-series

This example shows population trends over time for world regions, with each region drawn as a colored line against year and population axes. A color legend on the right identifies each region, and the lines are sorted by their final population values. The visualization uses React with D3 v5, including `d3.line`, `d3.nest`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for styling. Data comes from UN population estimates CSV files, processed via a custom melt function, and rendered as animated SVG paths with transitions on the legend.

Sszy1900
69% match
Loading thumbnail…

europe-atlantic population

This visualization shows world population by country, with countries colored according to population thresholds on a custom europe-Atlantic projection. It uses d3.js v3 with SVG rendering, and the projection combines two equirectangular projections to focus on Europe and the North Atlantic. The map loads country geometries from a TopoJSON file and joins population data from a TSV file. Hovering over a country triggers a tooltip built with d3-tip, displaying the country name and population.

PPhilippe Rivière
68% match
Loading thumbnail…

Population time-series

This visualization shows population trends over time for world regions, with each region's trajectory drawn as a distinct colored line. A color legend identifies the regions, and the chart title clearly labels the relationship between population and year. The visualization uses D3 v5 APIs including `nest` for data grouping, `scaleTime` and `scaleLinear` for axes, and `line` for generating SVG paths. Data comes from UN population estimates and historical datasets processed via Promise loading. The color legend component updates with transitions, while lines use blend modes for overlapping clarity.

Rreo440
67% match
Loading thumbnail…

Loading Europe Population Projections

This example presents static population projections for European countries from 2010 to 2030, loaded from a CSV file. It shows two abstract circles and connecting lines as placeholders, with the data fetched using d3.csv and logged to the console. The visualization uses D3 v3 to read the external data file, while the initial SVG shapes are hardcoded. The page displays a simple title but does not yet bind the data to any visual elements, serving as a starting point for a future chart.

BBeaupe
67% match
Loading thumbnail…

Population time-series

This visualization displays population trends for global regions from 1950 to 2100, using animated line charts that color-code each region via a categorical scale. The data, sourced from UN population estimates, is processed through a custom melt function and rendered as SVG with D3 v5, React, and the `d3.axisBottom`, `d3.axisLeft`, and `d3.line` APIs. A color legend with animated transitions clarifies the mapping, while styled tick lines and labels enhance readability.

MManoj Betawar
67% match
Loading thumbnail…

Map_2

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.

NNita
66% match
Loading thumbnail…

Choropleth Map

This choropleth map displays global population data from the UN’s 2019 dataset, coloring each country according to its population value. The visualization uses D3’s geoMercator projection and geoPath to render country outlines from World Atlas TopoJSON data, while the D3 scaleOrdinal and schemeSpectral functions generate the color scale. A custom color legend shows the mapping between colors and population values, and hovering over a country highlights it in red.

SSophia Murage
65% match