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

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.

AI-generated description

A stacked area chart visualization of 150 years of immigration in Canada. This variant shows the data scaled by percentages.

See also:

Uses d3-area-label to position labels.

Inspired by The Economist: Where do Canada’s immigrants come from?

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/30e50fe82819ef73c6b8d9f2d31b99a8'>How Americans Spend Time</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
96% 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
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
71% 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
69% match
Loading thumbnail…

Age Distribution Chart

This interactive stacked bar chart displays age distributions across provinces, rendered with SVG and animation via D3.js (version 3.5.6). Users can toggle between raw counts and percentage of total using radio buttons, which triggers transitions recalculating the stack layout with `d3.layout.stack()` and updating the y-axis tick format. The chart reads from data3.csv and uses `d3.scale.ordinal()` for the x-axis, category20 colors for age bands, and a custom tooltip on hover.

LLex
68% match
Loading thumbnail…

Loading CSV Data

A scatterplot displays the proportion of primarily English-speaking versus primarily French-speaking people across Canadian electoral districts, with each circle representing a district. The data is loaded from a CSV file using `d3.csv`, then mapped onto linear scales via `d3.scale.linear` with axes rendered by `d3.svg.axis`. The SVG circles are colored orange and include tooltips showing exact percentages. The chart reveals a strong negative correlation between the two language groups, with clusters at either end. Data comes from Statistics Canada via a gist.

AAlfsig
68% match
Loading thumbnail…

ICE 7 Area Chart

This area chart displays the number of USA immigrants from 2006 to 2021, with the data loaded from a CSV file and rendered as an SVG. The visualization uses D3 v5 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and `d3.area` with a `curveBasis` smoothing function. The chart combines a red line trace with a blue filled area beneath it, while axis labels and tick formatting are applied via D3’s axis and format utilities.

EEeshwarReddy
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