Foreign Population in Germany by Selected Citizenships and Years

100%

Foreign Population in Germany by Selected Citizenships and Years

✓ Published1🌍 Public

Last edited Dec 5, 2021

Created on Nov 12, 2021

This example shows the foreign population in Germany by selected citizenships and years, using a streamgraph to display changes across six categories. It uses d3.stack with the stackOffsetWiggle and stackOrderInsideOut settings, and renders the chart with SVG paths generated via d3.area. The data comes from two CSV files, merged and aggregated by the code before rendering. The visualization includes major and minor time axes, and uses d3.scaleOrdinal with a category color scheme to differentiate the series.

AI-generated description

This is a recreation of the Streamgraph template.

Source: (https://www.destatis.de/EN/Themes/Society-Environment/Population/Migration-Integration/Tables/foreigner-citizenship-time-serie.html).

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Foreign Population in Germany by Selected Citizenships and Years

This fork of a Streamgraph template visualizes the foreign population in Germany by selected citizenships across six years (2015–2020), based on CSV data from Destatis. Six stacked, wiggled areas represent Europe, Africa, America, Asia, Australia and Oceania, and Unknown, with hover effects that darken a path. The chart uses D3 v4, applying `d3.stack()` with `stackOffsetWiggle` and `stackOrderInsideOut`, plus `d3.area()` with `curveBasis` for smoothing. Axis ticks, labels, and area-label overlays come from `d3-axis` and the `d3-area-label` plugin.

AAsimali39

88% match

Loading thumbnail…

Foreign Born in Canada

This streamgraph visualizes the foreign-born population in Canada over 150 years, aggregated into nine world regions as proportions of the total. The stacked area chart uses a wiggle offset to reveal changing immigration patterns since 1871. Built with D3 v4, it employs the d3.stack API with stackOffsetWiggle and stackOrderInsideOut, plus the d3-area-label library for area labels. The data comes from Statistics Canada charts 3 and 4, processed from CSV files, and rendered as SVG with interactive hover states.

CCurran Kelleher

72% match

Loading thumbnail…

Bar chart

This bar chart visualizes the proportion of foreign-born residents across seven European countries, with Luxembourg leading at 45.9% and Germany at 14.5%. The visualization uses D3 v5 to load CSV data and render an SVG bar chart with linear and band scales. Axes are customized using `axisBottom` and `axisLeft`, with the y-axis formatted as percentages and grid lines drawn via `tickSize`. The chart includes a title and a rotated y-axis label, both styled through CSS classes.

BbeauMarko

71% match

Loading thumbnail…

Bar chart

A bar chart displays the proportion of foreign-born residents in seven European countries, with Luxembourg leading at 45.9 percent and Germany at 14.5 percent. The visualization encodes values with circles plotted at bar positions, using D3's `scalePoint` and `scaleLinear` for axes. Axis ticks use `axisBottom` and `axisLeft`, with `format(".0%")` for percentage labels. The SVG output is generated by appending circles to a group, with data loaded from a CSV file.

MMitch Dresdner

70% match

Loading thumbnail…

Foreign Born in Canada

A stacked area chart visualizes 150 years of immigration in Canada, showing the foreign-born population by region of origin over time. The chart uses a streamgraph layout, with each colored band representing a different geographic area, such as the British Isles, Eastern Europe, or Southeast Asia. Data comes from Statistics Canada and is rendered using D3 v4, with d3.stack and stackOffsetWiggle for the streamgraph effect. Labels are positioned using the d3-area-label library, and the SVG visualization includes major and minor axes with hover effects that darken individual areas.

CCurran Kelleher

69% match

Loading thumbnail…

Foreign Born in Canada

A stacked area chart visualizes 150 years of Canadian immigration, showing the percentage of foreign-born population by region of origin from 1871 to 2011. The chart displays how the composition of immigrants shifts over time, with labels positioned using the d3-area-label library. Data is rendered as SVG paths using d3.stack with stackOffsetExpand to normalize values to percentages. The visualization uses d3.axisBottom for time-based x-axis ticks and d3.scaleOrdinal with d3.schemeCategory10 for color encoding.

CCurran Kelleher

69% match

Loading thumbnail…

Population by German States

This visualization displays the population of Germany’s 16 states as horizontal bars, with the longest bar for North Rhine-Westphalia indicating the most populous state. The chart uses D3 v5, reading population data from a CSV file. The x-axis applies a linear scale with tick formatting via `d3.format`, while the y-axis uses an ordinal band scale (`d3.scaleBand`) to place each state name. Rectangles are rendered in SVG, with axes drawn using `d3.axisLeft` and `d3.axisBottom`.

VVinh H. Le

68% match

Loading thumbnail…

Barchart

This bar chart displays the population of the ten most populous countries, with Germany-language labels on the y-axis and population values on the x-axis. The visualization uses D3 v5’s `csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis, with `axisLeft` and `axisBottom` rendering the ticks. Bars are drawn as SVG `rect` elements, and the chart is generated from a static CSV file containing land and population figures.

Ssteppkeac

67% match