Integrating d3.js with React

Course Curriculum

Chapter 1: React + D3 Hello World

Lecture 1: Setting up the environment

Lecture 2: 'Hello D3' Function Component

Lecture 3: 'Hello D3' Class Component

Chapter 2: Graphics and Interactions

Lecture 1: Introduction

Lecture 2: Graphics – JSX Canvas

Lecture 3: Graphics – SVG advanced

Lecture 4: Map data in React using JSX

Lecture 5: Map data in React using d3

Lecture 6: Your first chart – Simple bar chart

Lecture 7: User Gestures – React & d3 Mouse Events

Lecture 8: Animating Graphics with React

Lecture 9: Animating Graphics with d3

Lecture 10: Animate SVG with CSS Transitions

Chapter 3: React + d3 – Simple Charts Part 1

Lecture 1: Line Chart

Lecture 2: Resizable Line Chart Widget

Lecture 3: Line Chart Widget with Animation

Lecture 4: Area Chart

Lecture 5: Area Chart with Gradient

Lecture 6: Area Chart with Custom Space Colors

Lecture 7: Bar Chart

Lecture 8: Bar Chart tooltip interaction

Chapter 4: React + d3 – Simple Charts Part 2

Lecture 1: Pie Chart

Lecture 2: Donut Chart

Lecture 3: Scatter Plot

Lecture 4: Scatter Plot Interactivity

Chapter 5: Integrating with Recoil State Management

Lecture 1: Histogram chart with Recoil

Lecture 2: Integrating Histogram Chart With Material-UI Components

Lecture 3: Summary

Chapter 6: Advanced charts – World Chart

Lecture 1: Introduction

Lecture 2: WorldMap d3 & React – Hello World Map Atlas

Lecture 3: Round World Map projection

Lecture 4: Rotating round world map chart

Lecture 5: Rotating round world map chart with coordinates

Lecture 6: Refactoring World Map

Chapter 7: World Map Widget

Lecture 1: Setting up our data and state management

Lecture 2: World Map Widget Component

Lecture 3: ClientList Material-UI Component

Lecture 4: ClientListDetail Material-UI Component

Chapter 8: Force Chart Part I – Bubble Chart

Lecture 1: Bubble chart

Lecture 2: Bubble Chart User Interaction

Chapter 9: Force Chart Part II – Force network graph

Lecture 1: Intro and setting up with data management

Lecture 2: Network graph graphics

Lecture 3: Network graph interactivity

Chapter 10: Integrating Popular Chart Libraries Built on D3

Lecture 1: Introduction

Lecture 2: Recharts

Lecture 3: Visx

Lecture 4: Victory

Lecture 5: Nivo

Lecture 6: React-vi

Chapter 11: Performance Knick-Knacks

Lecture 1: Intro

Lecture 2: Data loading & JSON vs CSV

Lecture 3: Install modules instead of global imports

Lecture 4: Tree shaking

Lecture 5: Update DOM only when needed

Lecture 6: SSR & Optimize CRA with Prerender

Lecture 7: Optimize CRA with Prefetching

Lecture 8: Optimize CRA with Precache

Lecture 9: Memorize function with useCallback

Chapter 12: Publish Your App

Lecture 1: Intro

Lecture 2: Create React + d3 on SSR with Next.js

Lecture 3: Publish Next.js with Express

Lecture 4: Create and publish CRA SPA

Lecture 5: Publish Serverless with Heroku

Chapter 13: Bonus Material

Lecture 1: Donut Pie Chart with Polylines and Labels