Name: Live Vibe Coding with D3 and React
Start: 2025-12-12T12:00:00-08:00
End: 2025-12-12T13:00:00-08:00

Join Curran Kelleher on a weekly livestreamed AI code editing journey with D3 and React. Attendees can voice chat live through the [VizHub Discord](https://discord.gg/Pn6VY99ba4) general voice channel, or just watch on the [YouTube Livestream](https://www.youtube.com/@currankelleher/streams).

Future sessions can be driven by community ideas, e.g. suggestions for public datasets to dig into, or cool existing dataviz works we can reproduce with D3, React, and AI.

Initial plan of topics to cover in due time:

\# Constructing Visualizations \- Outline

This document provides a structured outline of all topics in the book, listing the key visualization examples and concepts covered.

\-\-\-

\#\# Introduction

\#\#\# Key Concepts

\- D3 \(Data\-Driven Documents\)
\- Web Technologies \(HTML\, CSS\, SVG\, JavaScript\)
\- Front end development
\- DOM \(Document Object Model\)
\- D3 selections
\- Method chaining
\- D3 data joins
\- Import maps and CDN
\- ES module syntax
\- Bare module specifier
\- Responsive visualizations
\- Idempotent rendering
\- Accessor functions
\- Event listeners
\- State fields
\- Immutable update patterns
\- Setter functions
\- LLMs \(Large Language Models\)
\- Memoization
\- D3 Rosetta
\- NPM \(Node Package Manager\)
\- Tuples
\- D3 call pattern

\#\#\# Visualization Examples

1\. \*\*Pseudo Scatter Plot with HTML\*\* \- Static scatter plot using only HTML/SVG
2\. \*\*Pseudo Bar Chart with HTML\*\* \- Static bar chart using only HTML/SVG
3\. \*\*Pseudo Line Chart with HTML\*\* \- Static line chart using only HTML/SVG
4\. \*\*Pseudo Scatter Plot with D3\*\* \- First D3 example rendering circles
5\. \*\*Clickable Circles\*\* \- Interactive scatter plot with click selection
6\. \*\*Clickable Circles with D3 Rosetta\*\* \- Simplified version using D3 Rosetta utilities

\-\-\-

\#\# Loading and Transforming Data

\#\#\# Key Concepts

\- Tabular data
\- Trees
\- Graphs
\- Geospatial data
\- CSV \(Comma Separated Values\)
\- JSON \(JavaScript Object Notation\)
\- GeoJSON and TopoJSON
\- Natural ordering
\- Interval scales
\- Ratio scales
\- JSON schemas
\- Asynchronous requests
\- HTTP \(HyperText Transfer Protocol\)
\- State machines
\- Asynchronous control flow
\- Early return pattern
\- Pivoting data
\- Data abstraction framework
\- Dataset types \(tables\, networks\, trees\, geospatial\)
\- Attribute types \(categorical\, ordinal\, quantitative\)
\- Temporal attributes

\#\#\# Visualization Examples

1\. \*\*Loading and Parsing CSV\*\* \- Interactive scatter plot with Iris dataset loaded from CSV
2\. \*\*Loading JSON\*\* \- Table/preview of World Bank GDP data from JSON
3\. \*\*Loading TSV\*\* \- Bar chart with state unemployment data from TSV
4\. \*\*Parsing Dates & Times\*\* \- Line chart with Mauna Loa CO₂ data
5\. \*\*Joins/Merges\*\* \- Choropleth map joining census data with state geometries
6\. \*\*Filtering & Mapping\*\* \- Scatter plot with Auto MPG dataset
7\. \*\*Deriving Columns\*\* \- Computed ratios from energy mix data
8\. \*\*Wide↔Long Reshaping\*\* \- Multi\-series line chart with population data

\-\-\-

\#\# Scatter Plots

\#\#\# Key Concepts

\- Visualization idioms
\- Marks and channels
\- Visual encoding
\- Marks \(points\, lines\, areas\)
\- Channels \(position\, color\, size\, shape\, texture\)
\- Task abstraction
\- Scales
\- Axes
\- Domain and range

\#\#\# Visualization Examples

1\. \*\*Labeled Marks and Channels\*\* \- Isolated demonstrations of visual channels
\- X Position
\- Y Position
\- Size
\- Length
\- Shape
\- Hue
\- Luminance
\- Saturation
2\. \*\*A Simple Scatter Plot\*\* \- Basic Iris scatter plot with axes
3\. \*\*Scatter Plot with Axes\*\* \- Enhanced version with proper axis labels
4\. \*\*Scatter with Color Encoding\*\* \- Iris species encoded by color
5\. \*\*Scatter with Size Encoding\*\* \- Petal area encoded by size
6\. \*\*Scatter with Shape Encoding\*\* \- Species encoded by shape

\-\-\-

\#\# Line and Area Charts

\#\#\# Key Concepts

\- Time series data
\- SVG path elements
\- Line generators
\- Area generators
\- Time scales
\- Date parsing

\#\#\# Visualization Examples

1\. \*\*Pseudo Line Chart with HTML\*\* \- Static line chart using SVG paths
2\. \*\*A Simple Line Chart\*\* \- Keeling Curve CO₂ data
3\. \*\*Area Chart of World Population Growth\*\* \- UN population data
4\. \*\*Multi\-Line Chart\*\* \- Population by world region
5\. \*\*Stacked Area Chart\*\* \- Energy consumption by source
6\. \*\*Line Chart Small Multiples\*\* \- US state unemployment over time

\-\-\-

\#\# Bar Charts and Histograms

\#\#\# Key Concepts

\- Zero baseline
\- SVG rectangle elements
\- Band scales
\- Bin generators
\- Grouped bar charts
\- Stacked bar charts
\- Histograms

\#\#\# Visualization Examples

1\. \*\*Pseudo Bar Chart with HTML\*\* \- Static bar chart using SVG rectangles
2\. \*\*Simple Bar Chart\*\* \- UN population for top 10 countries
3\. \*\*Interactive Stacked Bar Chart\*\* \- Electricity generation by source
4\. \*\*Histogram\*\* \- Car MPG distribution
5\. \*\*Horizontal Bar Chart\*\* \- GitHub repos by language
6\. \*\*Grouped Bar Chart\*\* \- SAT/ACT scores by state

\-\-\-

\#\# Geographic Maps

\#\#\# Key Concepts

\- GeoJSON format
\- TopoJSON format
\- Map projections
\- Geographic path generators
\- Choropleth maps
\- Symbol maps
\- Zoom and pan behaviors

\#\#\# Visualization Examples

1\. \*\*Simple US County Map\*\* \- Basic county boundaries
2\. \*\*County Choropleth\*\* \- Counties colored by median income
3\. \*\*World Map in Various Projections\*\* \- Natural Earth\, Mercator\, Orthographic
4\. \*\*Points on a Map\*\* \- Cities with population \> 1M
5\. \*\*Monochrome Choropleth\*\* \- GDP per capita by country
6\. \*\*Globe with Panning & Zooming\*\* \- Interactive orthographic projection
7\. \*\*Quantile Choropleth\*\* \- US states median household income

\-\-\-

\#\# Trees

\#\#\# Key Concepts

\- Hierarchical data structures
\- D3 hierarchy
\- Node\-link diagrams
\- Tidy tree layouts
\- Dendrograms
\- Treemaps
\- Circle packing
\- Partition layouts \(icicle plots\)

\#\#\# Visualization Examples

1\. \*\*Treemap of Canadian Exports to US\*\* \- Hierarchical trade data
2\. \*\*DBpedia Ontology Visualization\*\* \- Ontology hierarchy
3\. \*\*Tidy Tree of World Countries\*\* \- Countries by continent/region
4\. \*\*Dendrogram of World Countries\*\* \- Cluster layout
5\. \*\*Treemap\*\* \- Government budget allocations
6\. \*\*Circle Pack\*\* \- Hierarchical quantitative data
7\. \*\*Icicle Plot\*\* \- Partition layout

\-\-\-

\#\# Graphs

\#\#\# Key Concepts

\- Network data structures
\- Nodes and links
\- Force\-directed layouts
\- Force simulation
\- Adjacency matrices
\- Hierarchical graph layouts \(Sugiyama\)
\- Sankey diagrams
\- Chord diagrams

\#\#\# Visualization Examples

1\. \*\*Force\-Directed Network\*\* \- Zachary's Karate Club
2\. \*\*Force\-Directed Graph\*\* \- Les Misérables character co\-occurrence
3\. \*\*Sugiyama\*\* \- Layered DAG \(module dependencies\)
4\. \*\*Adjacency Matrix\*\* \- Les Misérables relationships
5\. \*\*Sankey Diagram\*\* \- Energy flows \(LLNL data\)
6\. \*\*Chord Diagram\*\* \- Migration flows between regions

\-\-\-

\#\# Using Color and Shape

\#\#\# Key Concepts

\- Hue\, Saturation\, Lightness
\- Categorical data encoding
\- Sequential data encoding
\- Diverging data encoding
\- Color vision deficiency \(Protanopia\, Deuteranopia\, Tritanopia\)
\- Color scales \(ordinal\, sequential\, diverging\)
\- Color accessibility
\- Shape encoding
\- Interactive legends

\#\#\# Visualization Examples

1\. \*\*Scatter Plot with D3 Rosetta\*\* \- Iris with interactive color legend
2\. \*\*D3 Color Scheme Inventory\*\* \- Showcase of built\-in color schemes
3\. \*\*D3 Color Spaces Inventory\*\* \- RGB\, HSL\, LAB interpolation
4\. \*\*Scatter with Shape Encoding\*\* \- Iris species by shape
5\. \*\*Categorical Color Legend\*\* \- Multi\-series with legend interaction
6\. \*\*Continuous Color Legend\*\* \- Choropleth with gradient legend
7\. \*\*Interactive Color Legend \(Highlight Hovered Color\)\*\* \- Coordinated highlighting

\-\-\-

\#\# Radial Forms

\#\#\# Key Concepts

\- Radial coordinate systems
\- Pie charts
\- Donut charts
\- Arc generators
\- Sunburst diagrams
\- Radial line charts
\- Radial tree layouts

\#\#\# Visualization Examples

1\. \*\*Radial Tree of Countries\*\* \- Countries hierarchy in radial layout
2\. \*\*Pie Chart\*\* \- Web browser market share
3\. \*\*Donut Chart\*\* \- Same data as pie chart
4\. \*\*Sunburst\*\* \- Multi\-level hierarchical data
5\. \*\*Radial Multi\-Line\*\* \- Cyclical temperature data
6\. \*\*Radial Tree of World Countries\*\* \- Natural Earth data

\-\-\-

\#\# Tooltips

\#\#\# Key Concepts

\- Details\-on\-demand
\- HTML tooltips
\- Mouse event handling
\- Pointer coordinates
\- Voronoi diagrams
\- Distance\-limited interactions
\- Tooltip positioning
\- Rich tooltip content

\#\#\# Visualization Examples

1\. \*\*Scatter with Tooltips\*\* \- Iris with basic tooltips
2\. \*\*Scatter \+ Voronoi\*\* \- Improved targeting with Voronoi overlay
3\. \*\*Distance\-Limited Voronoi\*\* \- Tooltips only near data points
4\. \*\*Choropleth with Tooltips\*\* \- Country population density
5\. \*\*Multi\-line with Tooltips\*\* \- City temperature trends

\-\-\-

\#\# Multidimensional Visualizations

\#\#\# Key Concepts

\- High\-dimensional data
\- Parallel coordinates
\- Radar charts \(spider plots\)
\- Scatterplot matrices \(SPLOM\)
\- Dimensionality reduction \(UMAP\, t\-SNE\)
\- Small multiples
\- Faceting

\#\#\# Visualization Examples

1\. \*\*Parallel Coordinates\*\* \- Automotive specifications
2\. \*\*Parallel Coordinates with Brushing\*\* \- Auto MPG with filtering
3\. \*\*Scatterplot Matrix \(SPLOM\)\*\* \- Iris pairwise relationships
4\. \*\*Radar Chart\*\* \- Sports statistics or star properties
5\. \*\*Histogram Small Multiples\*\* \- Housing prices by neighborhood
6\. \*\*UMAP Scatter Plot\*\* \- High\-dimensional wine dataset

\-\-\-

\#\# Multiple Linked Views

\#\#\# Key Concepts

\- Focus\+Context patterns
\- Coordinated views
\- Brush\-driven navigation
\- Shared state management
\- Dashboard layouts
\- Responsive design for dashboards

\#\#\# Visualization Examples

1\. \*\*Focus\+Context Area Chart with Brushing\*\* \- Stock price or weather data
2\. \*\*Migrant Deaths Map \+ Time Histogram\*\* \- Linked map and timeline
3\. \*\*UMAP with Brushing \+ Histograms\*\* \- Dimensionality reduction with distributions
4\. \*\*UNHCR Streamgraph Explorer\*\* \- Dual streamgraphs with area chart and bar chart
5\. \*\*Complex Dashboard with Focus Navigation\*\* \- Financial data with hierarchical navigation

\-\-\-

\#\# Crossfiltering

\#\#\# Key Concepts

\- Interactive filtering
\- Selection coordination
\- Brushing as filter mechanism
\- Centralized filter state
\- Real\-time data processing
\- Animation during filtering
\- Filter combination logic \(AND/OR\)

\#\#\# Visualization Examples

1\. \*\*Multidimensional Filtering\*\* \- Dashboard with multiple filters
2\. \*\*Parallel Coordinates with Brushing\*\* \- Auto MPG with axis brushing
3\. \*\*Histogram Small Multiples with Brushing\*\* \- NYC property sales
4\. \*\*Histogram Small Multiples with Brushing \+ Animated Transitions\*\* \- Enhanced version
5\. \*\*SPLOM with Brushing\*\* \- Iris with coordinated selection
6\. \*\*Interactive Dashboard with Multiple Filters\*\* \- Electricity data with complex filtering

\-\-\-

\#\# Optimization

\#\#\# Key Concepts

\- Performance optimization
\- Memoization and caching
\- Efficient DOM operations
\- Debouncing and throttling
\- Responsive design
\- Touch\-friendly interactions
\- Color accessibility
\- Screen reader support
\- Print optimization
\- Canvas vs SVG performance

\#\#\# Visualization Examples

1\. \*\*Black & White Nested Circles\*\* \- Accessibility\-first design
2\. \*\*Optimized Migrant Deaths Map with Memoization\*\* \- Performance improvements
3\. \*\*Responsive Design Implementation\*\* \- Adaptive dashboard layout
4\. \*\*Color\-Blindness Simulator\*\* \- CVD simulation tool
5\. \*\*Print\-Optimized Export\*\* \- Static versions for publication
6\. \*\*Canvas\-Based Performance\*\* \- Large scatter plot with Canvas rendering

Curran Kelleher

D3 Online

Technology

Web Design

Data Analytics

Software Development

JavaScript

Web Development

Computer Programming

Web Technology

Data Visualization

HTML5

d3.js

Every 2 weeks on Friday until October 6, 2026

Ian Johnson

Anil Srivastava

Seth

Andy K

Karen Dalton

Joel Lunzaga

Rob Bierman

Live Vibe Coding with D3 and React

Online event

Share

Live Vibe Coding with D3 and React

D3 Online

Details

Members are also interested in