Foreign Born in Canada

100%

Foreign Born in Canada

✓ Published0🌍 Public

Last edited Feb 14, 2018

Created on Feb 14, 2018

A stacked area chart shows how the percentage distribution of foreign-born populations in Canada has shifted across 15 regions from 1871 to 2011, based on Statistics Canada census data. The chart uses d3.stack with a stackOffsetExpand scale to display proportions, d3.area with curveBasis for smooth shapes, and d3-area-label to place region names inside the areas. Hovering over a region highlights it by changing its fill to black, while a secondary axis marks intervals for easier temporal reading.

AI-generated description

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

Similar vizzes

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

95% 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

94% 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

92% match

Loading thumbnail…

Gist 5e36771400038b0c861c6617c622c5f7

A map of Canada visualizes interprovincial migration flows for 2017 Q2 and Q3, using animated, arrow-headed routes and scaled circles to show the net movement of people between provinces and internationally. Provincial boundaries are rendered from a TopoJSON file via `d3.geoPath` with a conic conformal projection, while migration data from a CSV file drives the visualization. A dropdown menu lets users switch between time periods, and D3 v4 handles the SVG rendering and animations.

MMbrownshoes

71% 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

69% 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…

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

69% match

Loading thumbnail…

Stacked-to-Grouped d3 v4

This interactive chart visualizes foreign investment data from the Government of British Columbia’s data catalogue, displaying the number of transactions across three categories over time. Users can toggle between stacked and grouped bar chart layouts via radio buttons, with each bar segment representing a different investment column. The visualization uses d3.v4’s scaleBand, scaleLinear, and stack functions for positioning and aggregation, while the data is fetched asynchronously via ajax from the catalogue’s API. SVG rectangles animate their height and y-position when switching modes, and a tooltip, built with d3.select, shows the precise value on mouseover.

MMbrownshoes

68% match