Autoplay
Autocomplete
HTML5
Flash
Player
Speed
Previous Lecture
Complete and continue
React for Data Visualization full course
Introduction
s00e00 - Hello new friend 👋 (6:08)
s00e01 - What you need to know (2:16)
s00e02 - How to approach React for Dataviz (3:16)
s00e03 - Why React and D3 (0:22)
s00e04 - Buzzword soup explained
s00e05 - JSX
s00e06 - What you'll build (2:30)
A quick intro to D3
s01e07 - Why D3 (1:03)
s01e08 - 3 key insights to learn D3 from scratch (2:23)
s01e09 - Data vs. DOM manipulation (6:07)
s01e10 - Scales (4:12)
s01e11 - D3 layouts (1:41)
s01e12 - Recap (1:49)
How React makes D3 easier
s02e13 - React + D3 = ❤️ (4:53)
s02e14 - What about existing libraries? (2:13)
s02e15 - Victory.js (1:04)
s02e16 - Recharts (0:54)
s02e17 - Nivo (1:11)
s02e18 - VX (1:07)
s02e19 - When you shouldn't use a library (1:14)
Quickly integrate any D3 code in your React project with Blackbox Components
s03e20 - The idea behind blackbox components (0:57)
s03e21 - A quick blackbox example - a D3 axis (3:36)
s03e22 - A React + D3 axis (5:19)
s03e23 - A D3 blackbox higher order component - HOC (2:26)
s03e24 - D3blackbox magic trick - render anything in 30 seconds (5:11)
Build scalable dataviz components with full integration
s04e25 - The approach (1:52)
s04e26 - When props don't change - a scatterplot (9:26)
s04e27 - A scatterplot When props do change (6:36)
s04e28 - Making your components more flexible with render props (6:08)
You're awesome
s05e29 - 💪 (0:39)
A note about state and app structure
s06e30 - Handling state in your React app (0:48)
s06e31 - Basic architecture we'll use (2:11)
s06e32 - What about React Context? Redux? MobX?
s06e33 - How to structure your app
s06e34 - Congratz!
Set up a local environment with create-react-app
s07e35 - Local environment setup
s07e36 - Start with create-react-app (1:10)
s07e37 - What you get
s07e38 - Install extra dependencies (0:43)
176,113 tech salaries visualized – a dataviz dashboard
s08e39 - 176,113 tech salaries visualized (2:54)
Show a Preloader
s09e40 - Show a Preloader (1:11)
s09e41 - Step1: get image (0:43)
s09e42 - Step 2: make component (2:01)
s09e43 - Step 3: Update App (1:20)
s09e44 - Step 4: Load styles (1:32)
Load and parse your data
s10e45 - Asynchronously load data (0:37)
s10e46 - Step 0: Get data (0:37)
s10e47 - Step 1: Prep App.js (2:13)
s10e48 - Step 2: Prep data parsing functions (1:46)
s10e49 - Step 3: Load the datasets (2:02)
s10e50 - Step 4: Tie datasets together (1:11)
Render a choropleth map of the US
s11e51 - Render a choropleth map of the US (0:11)
s11e52 - Step 1: Prep App.js (3:54)
s11e53 - Step 2: CountyMap index.js (0:44)
s11e54 - Step 3: CountyMap CountyMap.js (11:56)
s11e55 - Step 4: CountyMap County.js (2:03)
s11e56 - A map appears 🗺 (1:26)
Render a Histogram of salaries
s12e57 - Render a Histogram of salaries (0:23)
s12e58 - Step 1: Prep App.js (2:24)
s12e59 - Step 2: CSS changes (0:27)
s12e60 - Step 3: Histogram component (11:39)
s12e61 - Step 4: HistogramBar (sub)component (4:00)
s12e62 - Step 5: Add an axis (4:04)
Make it understandable with meta info
s13e63 - Add meta info (0:37)
s13e64 - Dynamic title (9:25)
s13e65 - Dynamic description (2:58)
s13e66 - Overlay a median household line (7:47)
Add user controls for exploration
s14e67 - Add user controls for data slicing and dicing (1:10)
s14e68 - Step 1: Update App.js (3:49)
s14e69 - Step 2: Build Controls component (4:26)
s14e70 - Step 3: Build ControlRow component (3:30)
s14e71 - Step 4: Build Toggle component (2:39)
s14e72 - Step 5: Add US state and Job Title filters (3:12)
Make it work in the real world
s15e73 - Add rudimentary routing (1:51)
s15e74 - Prep your app for launch
s15e75 - Twitter and Facebook cards and SEO
s15e76 - Use full dataset (3:05)
s15e77 - Launch! 🚀
Animation
s16e78 - Intro (0:51)
s16e79 - Using a game loop for rich animation (1:15)
A bouncy ball game loop animation example
s17e80 - Begin bouncy ball (0:19)
s17e81 - Step 1: stub out App and Ball (0:15)
s17e82 - Stub out BouncingBall (1:11)
s17e83 - Step 3: Rendering (0:20)
s17e84 - Step 4: The Game Loop (3:09)
s17e85 - Step 5: Correcting for time and frame drops (1:18)
s17e86 - Game loop recap (0:14)
Use transitions for simple animation
s18e87 - Transition basics (0:27)
Build a swipe transition component
s19e88 - A swipe transition component (0:47)
s19e89 - App.js (0:20)
s19e90 - Ball.js (0:20)
s19e91 - Ball.js state transition (6:31)
Enter-update-exit animation
s20e92 - Enter-update-exit animation intro
s20e93 - Build a declarative animated alphabet
s20e94 - Project setup
s20e95 - The Alphabet component
s20e96 - Declarative render for enter-exit transitions
s20e97 - TransitionGroup
s20e98 - The Letter component
s20e99 - onEnter
s20e100 - onExit
s20e101 - componentDidUpdate
s20e102 - render
s20e103 - That's it 👍🏼
s20e104 - Key transition takeaways
Animating with React, Redux, and D3
s21e105 - Redux animation intro
s21e106 - Here's how it works
s21e107 - Some basic terminology
s21e108 - 3 presentation components
s21e109 - 6 Redux Actions
s21e110 - 1 Container component
s21e111 - 2 Redux Reducers
s21e112 - What we learned
Speed optimizations
s22e113 - Speed intro
Using canvas
s23e114 - Intro
s23e115 - Why canvas
s23e116 - Isn't canvas too hard?
s23e117 - The trouble with Canvas
s23e118 - Declarative Canvas with Konva and react-konva
Smooth animation with 20,000+ elements
s24e119 - A particle generator pushed to the max
s24e120 - Prepare canvas layer
s24e121 - Use sprites for max redraw speed
s24e122 - But why so many elements?
Build a small interactive canvas game
s25e123 - Simulating billiards with MobX, Canvas, and Konva
s25e124 - Decorators
s25e125 - Part 0: Some setup
s25e126 - A quick MobX primer
s25e127 - Part 1: Rendering our marbles
s25e128 - Part 2: Building the physics
s25e129 - Collision detection
Speedy React Alternatives
s26e130 - Using a React alternative like Preact or Inferno
s26e131 - Stress test your framework with a recursive fractal
s26e132 - Stress testing Preact and Inferno
Refactor your components with React Hooks
s27e133 - An intro to hooks (2:10)
s27e134 - useState, useEffect, and useContext (1:51)
s27e135 - useMemo is your new best friend (0:58)
s27e136 - my useD3 hook (0:34)
s27e137 - Refactoring our big example to hooks (30:09)
Powerful animation with transitions and game loops combined
s28e138 - Merging transitions and game loops (2:53)
s28e139 - Understanding custom tweens (2:38)
s28e140 - Custom tweens in practice (8:42)
s28e141 - Use tweens to drive state – hybrid animation (6:42)
You finished! 🚀
s29e142 - You're the best
Cookbook: Various visualizations and how to build them
s30e143 - Intro to cookbook area
s30e144 - Christmas trees sold in USA - an emoji barchart
s30e145 - Money spent on Christmas - a line chart
s30e146 - Christmas movies at the box office - horizontal bar chart
s30e147 - What Americans want for Christmas - horizontal stack chart
s30e148 - Christmas carols and their words - a word cloud
s30e149 - Will you buy a christmas tree? - a pie chart
s30e150 - What goes in Chrstmas stockings - a piechart with tooltips
s30e151 - When Americans buy Christmas presents - a curved line chart
s30e152 - When people buy candy - animated barchart with easing
s30e153 - A responsive stack chart of smartphone market share
s30e154 - A Sankey diagram
s30e155 - Try Uber's WebGL dataviz library
s30e156 - Real-time WebGL map of all airplanes in the world
s30e157 - A compound arc chart
s30e158 - Which emails sparked joy – an animated timeline
Downloadable materials
PDF/epub/mobi
s20e101 - componentDidUpdate
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock