Data Visualization with D3, JavaScript, React – Full Course [2021]

Wordpress sites

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:

32 thoughts on “Data Visualization with D3, JavaScript, React – Full Course [2021]”

  1. 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.

    1. 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

    2. Amateur question but is this tutorial useful for non-techies (non coders)?
      Or do we need proficiency in HTML CSS Java?

  2. 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

  3. This is freaking outstanding!!!
    So much information, and brilliant wisdom.
    Thank you so much

  4. 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!

  5. You are Awesome! I really like your step by step approach from HTML to React then to complex animation, events, optimization …

  6. Frogs'n'Grandmothers

    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

  7. Felipe Villegas

    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.

  8. No io non finisco sennò questi dicono che

    What are the advantages of using D3 rather than vega-lite?

  9. 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” 😁

  10. Punith Ujwal Nayak

    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?

  11. CHITUS💖⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

    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” 😁

  12. 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

  13. 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!

  14. 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.

Comments are closed.