Learn Data Visualization with D3, JavaScript, and React in this 17-hour course.
Part 2:
🎥 Created by Curran Kelleher. His channel:
⭐️Sections/Code⭐️
00:00 Datavis 2020 Introduction
05:22 What is Data Visualization
14:30 Week 1 Q & A
22:49 Finding Visualizations
29:17 Introduction to Web Technologies
39:11 Let's Make a Face Part I (HTML, CSS, SVG)
💻
💻
57:02 Let's Make a Face Part II (React)
💻
💻
1:14:57 Let's Make a Face Part III (React & D3)
💻
💻
1:26:53 Let's Make a Face Part IV (React Components & ES6)
💻
💻
1:37:05 Let's Make a Face Part V multiple files with ES6 modules
💻
💻
1:47:01 Let's Make a Face Part VI (Compartmentalizing Complexity)
💻
💻
1:58:57 Coronavirus Dataviz Hackathon Part I (Coronavirus Dataviz)
2:08:48 Preparing Data for Visualization
2:18:46 Loading Data with Fetch, Promises, Aync & Await
💻
2:29:11 Interaction With React
💻
💻
2:48:28 Parsing CSV Data with D3
💻
2:57:18 Loading Data in React
💻
3:08:40 Inputs for Visualization: Data & Tasks
3:19:32 Iterating Fast with Vega Lite API
💻
💻
3:50:33 Marks & Channels
4:26:43 Visualizing Data with React & D3
💻
4:43:08 Making a Bar Chart with React & D3
💻
4:57:51 Margins and Axes
💻
5:17:23 Refactoring a Bar Chart
💻
5:29:00 Stylized Bar Chart
💻
5:53:13 Making a Scatter Plot
💻
6:15:29 Working with Time
💻
6:23:37 Making a Line Chart
💻
6:37:29 Preparing Geospatial Data
💻
6:45:35 Making a World Map with React & D3
💻
7:11:24 Menus with React
💻
7:27:40 Scatter Plot with Menus
💻
7:45:57 Polished Scatter Plot with Menus
💻
8:06:23 Scatter Plot with Color
💻
8:13:24 Making a Color Legend
💻
8:28:27 Interactive Color Legend
💻
8:46:49 Points on a Map
💻
8:58:35 Using Size
💻
9:12:02 Missing Migrants
💻
💻
9:23:26 Missing Migrants Part II: Aggregation by Month
💻
9:47:34 Missing Migrants Part III: On a Map
💻
9:56:46 Multiple Views
💻
10:09:23 Why Use Modules
10:11:48 Multiple Views Cleanup
💻
10:32:17 Multiple Views with Brushing
💻
10:58:34 React Performance Optimization
💻
11:20:10 Choropleth Map
💻
11:30:11 Log Scales
💻
More in Part 2:
Ah, 2 weeks of new learning. This channel is a library for programmers
Ikr lol
I’m only 15 minutes in, and already I have a deeper appreciation for the power of data visualization as a tool for augmenting my own cognition. “Think on paper” indeed.
Noice
1hr into the course and I am already in love with Curran. What an amazing teacher !
He’s the Keanu of Data Science!! 😭
This has turned out to be both great tutorial on React and D3 js, amazing!
Curran will be starting a new livestream series on D3 Data Visualization on March 6th! Learn more here: https://vizhub.com/blog/2021/02/20/new-livestream-series-get-it-right-in-black-and-white/
WA wa d
it’d be greatly appreciated if he code do this the “proper way”—start from scratch. How setup ide, how to manage npm dependencies/packages & then run everything locally. That’s the only pain point about this course
@Curran Kelleher Hey could you do some moderate pie chart using the v7 of D3?…
D3 is a waste of time if you’re making charts. Use C3.
Amateur question but is this tutorial useful for non-techies (non coders)?
Or do we need proficiency in HTML CSS Java?
This course is great and very much appreciated.
I got to using vega-lite-api example and trying to make a boiler plate app locally on my machine and get started.
I was getting an error after importing the vega-lite-api and using it.
Attempted import error: ‘vl’ is not exported from ‘vega-lite-api’.
I have been desperately wanting to analyze some data with the learning so far but stuck because of this error. Any help will be very much appreciated
try,e.g: import * as vega from ‘vega’
This is freaking outstanding!!!
So much information, and brilliant wisdom.
Thank you so much
Thanks!
Curran, you’re an amazing teacher as well as an amazing human being. I can’t tell you how helpful this will be for those who need it. Thank you!
Thanks!
You are Awesome! I really like your step by step approach from HTML to React then to complex animation, events, optimization …
10:44:00 if your ‘event’ is not exported from d3, just use the event that’s passed directly to the listener, like this:
brush.on(“brush”, (event) => console.log(event.selection))
cheers
Ah yes, the API changed!
Who in their right mind would watch a 17-hour, 2-part YouTube course!? One week and many Codepens later, I am ever so glad I did. Thank you, Curran. I completed all my freeCodeCamp data visualization projects in React & D3 while following along with your fabulous tutorial.
What are the advantages of using D3 rather than vega-lite?
8:25:23 the “tickSize” prop is passed twice to the “ColorLegend” component, once with the literal value of 10, and a second time with the variable “circleRadius” 😁
Hi Curran, thanks for the amazing course. I had query. For the missing migrants on map project, how can we isolate a particular country and show circles on it?
Thanks a lot for sharing your knowledge with such a high quality <3
8:25:23 the “tickSize” prop is passed twice to the “ColorLegend” component, once with the literal value of 10, and a second time with the variable “circleRadius” 😁
Great Tutorial. Nice examples, well explained and works fine at x1.5 speed – helped me a lot to directly jump into d3.js for a project. Thanks for the efforts! Leaving one hint: https://youtu.be/2LhoCfjm8R4?t=8947 –> the await return is redundant, since you already use await in the const response
Incredibly helpful, thorough, and well explained! This is the best tutorial I have found from both paid and free sites! I have used Udemy and Oreilly Books and nothing comes close to the clarity and knoweldge displayed by this instructor!
Thank you so much! you guys rock, Curran, you are an amazing human being!
I love this course, Curran makes it so interesting! I love the theory part of the course, where he discusses the horsepower vs mpg example, and the difference between categorical, time and size values.