Created on Cognitive Class Labs

100%

Created on Cognitive Class Labs

✓ Published0🌍 Public

Last edited Jun 1, 2019

Created on Jun 1, 2019

This example demonstrates three distinct data-visualization techniques applied to Canadian immigration data from 1980 to 2013: waffle charts, word clouds, and regression plots. It uses Matplotlib, seaborn, and WordCloud within a Jupyter notebook environment. Waffle charts display categorical proportions using colored grid squares, word clouds render text frequency by font size, and seaborn’s `regplot` generates scatter plots with fitted regression lines, showing relationships between variables like year and immigration numbers.

AI-generated description

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

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

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

63% match

Loading thumbnail…

Scientific Data Visualisation Bonus ICE- 3D Scatter Plot

This example visualizes visitor counts across three museums—Avila Adobe, Firehouse, and Chinese American—as a 3D scatter plot. Each point represents a data row, with the marker’s position determined by the three numeric attributes. The visualization uses Plotly’s `scatter3d` trace type, rendered via `Plotly.newPlot` into a designated div. Data is loaded from a CSV file using `d3.csv`, with the `unpack` helper extracting each column into arrays for the x, y, and z coordinates. Axes are labeled with distinct colors and customized margins are applied.

SSravyaAnnadi

63% match

Loading thumbnail…

Word Cloud Example

This example demonstrates a word cloud visualization, where words from a CSV file (datas.csv) are displayed with varying font sizes proportional to their frequency counts. The visualization is built using D3.js v3 and the custom `d3.layout.cloud.js` library, which implements the word layout algorithm. The code uses D3's linear scale for color mapping and renders the words as SVG text elements. Animated placement occurs through the library's internal timer steps, positioning each word using a spiral placement algorithm.

Kkaviya-ds

62% match

Loading thumbnail…

Migration to US chart

This example attempts to visualize migration to the US using a bar chart built with Chart.js. It loads CSV data via a fetch request and parses it with `d3.csvParse`, though the data is not explicitly bound to the chart. The chart configuration includes placeholders for two datasets, axes for countries and migrant counts, and renders on a canvas element. The code references d3.v7 but relies primarily on Chart.js for the visualization.

Ssucotton9

61% match

Loading thumbnail…

Word Cloud Example

This example visualizes the frequency of family and first names from genealogical data using D3.js word clouds. The visualization displays the most common names as text, with font size scaled proportionally to their occurrence count, rendered in an animated layout using SVG. The implementation leverages the `d3.layout.cloud` module, which uses a canvas's `getImageData` method for text bounding measurements, along with the `d3.scale.linear` for size mapping and `d3.scale.category20` for coloring. Users can switch between datasets via toolbar buttons that load different JSON files.

KKurtCodeAnyWhere

61% match

Loading thumbnail…

Migrant Chart try3

This example displays migration to the United States from 14 countries as a bar chart, with each bar's height representing the number of migrants. The visualization is built using React and D3 v7, leveraging `d3.csvParse` to load data from a remote CSV file and `d3.scaleBand` and `d3.scaleLinear` to map country names and migrant counts to SVG rectangle coordinates. The chart renders bars as SVG `<rect>` elements, with axes implied by the scales but not explicitly drawn. Data loading is handled via a fetch promise, though the code currently logs parsed results instead of fully wiring them into the state.

Ssucotton9

61% match