Skip to main content
SimilarExport ZIP
100%

Foreign Born in Canada

✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 30, 2017
Created on Sep 30, 2017

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.

AI-generated description

A StreamGraph visualization of 150 years of immigration in Canada, Chart 3 and Chart 4, aggregated into regions. Inspired by The Economist: Where do Canada’s immigrants come from?, in which a similar aggregation was performed.

See also:

Uses d3-area-label to position labels.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/f5282f177a5d339bc9d3e59745879fd7'>All Foreign born population in Canada</a>

mit Licensed

Similar vizzes

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
95% 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
93% match
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
74% match
Loading thumbnail…

Foreign Population in Germany by Selected Citizenships and Years

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.

GGonzalo Montañés
72% match
Loading thumbnail…

Choropleth Map

This choropleth map shows how Canada’s provincial and territorial populations changed annually from 1991 to 2019. Animated transitions recolor each region as a slider or playback control (not implemented here) would step through years. The visualization uses D3 v5 with `d3.geoPath` and a `d3.geoAlbers` projection to render TopoJSON boundaries, while population data is loaded from a CSV. Province fill colors are intended to map to population values, though the current code leaves them white.

GGraceXT
69% match
Loading thumbnail…

Persons of Concern StreamGraph by Origin

This StreamGraph visualizes the number of persons of concern over time, grouped by country of origin, using data from UNHCR Population Statistics. A stack offset wiggle creates the flowing layers, with d3.area-label placing labels inside each region. The code uses d3.stack, d3.scaleTime, and d3.curveBasis to render the SVG, with interpolated values between annual data points. Major and minor axes display time, while hovering highlights individual country streams.

Ppgy-iacas
68% match
Loading thumbnail…

Untitled

This visualization displays the number of asylum seekers arriving in Canada from various countries of origin between 1959 and 1970. It uses a red arc to connect Washington, D.C. and Beijing across an equirectangular projection of the world map. The map is rendered using the `d3.geo` API, with graticule, land, and boundary layers. The asylum data is loaded from a CSV file and joined with the country features from a TopoJSON world atlas.

Aankita1mit
68% match
Loading thumbnail…

d3 line chart

This visualization shows population growth in the United States, Canada, and Mexico from 1890 to 2010, with each country represented by a colored line and gray circles for individual data points. Hovering over a circle displays a tooltip with the country, year, and population growth value. The chart uses d3.line and d3.scaleLinear to generate SVG paths, with data loaded from a simplified CSV derived from the Corgis global development dataset. Interactive mouseover, mousemove, and mouseout events control the tooltip's visibility and content.

AAndrew
67% match