Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Canadian Exports to US Treemap (draft)

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

d5348a62b37141098742c7ee5e5e3bb2

Open

Canadian Exports to US Treemap (draft)

0 stars1🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Mar 8, 2025

This visualization presents Canadian exports to the United States in 2022 as a hierarchical treemap, with rectangles sized by export value and colored by sector using d3.treemap and d3.scaleOrdinal with schemeCategory10. Hovering reveals tooltips with product name, export value, share, code, and sector. The data comes from the Atlas of Economic Complexity via a TSV file, with D3.js handling data loading, layout, and responsive rendering based on container dimensions observed through ResizeObserver.

AI-generated description

This template should work extremely well as a starting point for AI-driven iteration.

Iris Dataset Visualization with D3.js

This project demonstrates how to create a scatter plot visualization of the classic Iris dataset using D3.js, a powerful JavaScript library for creating data visualizations in a web browser. It provi

What is D3?

D3 (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It uses HTML, SVG, and CSS to bring data to life.

About This Project

This visualization shows the famous Iris flower dataset, displaying the relationship between sepal length and sepal width across different iris species. Each point represents a flower, colored by spec

How This Works

The Code Structure

This project is organized into several files, each with a specific purpose:

  • index.js: The main entry point that loads data and orchestrates rendering
  • data.js: Handles loading and formatting the Iris dataset
  • renderSVG.js: Creates and configures the SVG container
  • renderScatterPlot.js: Creates the scatter plot visualization
  • observeDimensions.js: Makes the visualization responsive

Key D3 Concepts Used

  1. Data Loading: Using d3.csv() to fetch and parse CSV data
  2. Scales: Converting data values to visual properties (position, color)
  3. Axes: Creating readable reference lines and labels
  4. Data Joins: The pattern selection.data().join() to connect data with visual elements
  5. Transitions & Animations: Smooth updates when data or dimensions change

Getting Started with D3

If you're new to D3, here are some helpful resources:

D3 Key Patterns Explained

The General Update Pattern

D3 uses a pattern called the "General Update Pattern" to create, update, or remove elements based on your data: