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



Learn Data Visualization with D3, JavaScript, and React in this 17-hour course.
Part 2: https://youtu.be/H2qPeJx1RDI

πŸŽ₯ Created by Curran Kelleher. His channel: https://www.youtube.com/channel/UCSwd_9jyX4YtDYm9p9MxQqw

⭐️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)
πŸ’» https://vizhub.com/curran/e54aba86481147a482f339763d4fc598
πŸ’» https://vizhub.com/curran/fbf0dfea4bcc41f898f3ab9f10c4a279
57:02 Let’s Make a Face Part II (React)
πŸ’» https://vizhub.com/curran/fbf0dfea4bcc41f898f3ab9f10c4a279
πŸ’» https://vizhub.com/curran/3a00f5c877ac4e30b7269c17f29d2e4d
1:14:57 Let’s Make a Face Part III (React & D3)
πŸ’» https://vizhub.com/curran/3a00f5c877ac4e30b7269c17f29d2e4d
πŸ’» https://vizhub.com/curran/4297411eba0a4287a70f5da9dab5fd87
1:26:53 Let’s Make a Face Part IV (React Components & ES6)
πŸ’» https://vizhub.com/curran/4297411eba0a4287a70f5da9dab5fd87
πŸ’» https://vizhub.com/curran/e6714750d49b4158868b08e8e19d7060
1:37:05 Let’s Make a Face Part V multiple files with ES6 modules
πŸ’» https://vizhub.com/curran/4297411eba0a4287a70f5da9dab5fd87
πŸ’» https://vizhub.com/curran/be34ae5bb6ef438b9047b0c717d5315c
1:47:01 Let’s Make a Face Part VI (Compartmentalizing Complexity)
πŸ’» https://vizhub.com/curran/be34ae5bb6ef438b9047b0c717d5315c
πŸ’» https://vizhub.com/curran/7da62f462dfd42fd8784384264a28365
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
πŸ’» https://vizhub.com/curran/6ec4f3dd10ac4fcdb5f759d38e7ceefa
2:29:11 Interaction With React
πŸ’» https://vizhub.com/curran/3a00f5c877ac4e30b7269c17f29d2e4d?edit=files&file=index.js
πŸ’» https://vizhub.com/curran/9827ad65ee864431a94c95794b191cb2?edit=files&file=index.js
2:48:28 Parsing CSV Data with D3
πŸ’» https://vizhub.com/curran/6ec4f3dd10ac4fcdb5f759d38e7ceefa
2:57:18 Loading Data in React
πŸ’» https://vizhub.com/curran/f6b3cffc0c784b8bb9d6f758671b1be0
3:08:40 Inputs for Visualization: Data & Tasks
3:19:32 Iterating Fast with Vega Lite API
πŸ’» https://vizhub.com/curran/7392ee124c8249b884e735abf6da8df4
πŸ’» https://vizhub.com/curran/717a939bb09b4b3297b62c20d42ea6a3
3:50:33 Marks & Channels
4:26:43 Visualizing Data with React & D3
πŸ’» https://vizhub.com/curran/1e2e55a2c06b478586a7ea8e1403b13e
4:43:08 Making a Bar Chart with React & D3
πŸ’» https://vizhub.com/curran/72d56b59a206431090081f2b9ab14873
4:57:51 Margins and Axes
πŸ’» https://vizhub.com/curran/b9069ad0a02c4ab5b29f0b8dcb447396
5:17:23 Refactoring a Bar Chart
πŸ’» https://vizhub.com/curran/4624fb61b2e34c208bad8e211eea90e9
5:29:00 Stylized Bar Chart
πŸ’» https://vizhub.com/curran/32dfc8d2393844c6a5b9d199d9a35946
5:53:13 Making a Scatter Plot
πŸ’» https://vizhub.com/curran/3d631093c2334030a6b27fa979bb4a0d
6:15:29 Working with Time
πŸ’» https://vizhub.com/curran/73bcdb68be6b4500b03827c9d58defba
6:23:37 Making a Line Chart
πŸ’» https://vizhub.com/curran/f1c25845b6324832957d3bac6f10ba69
6:37:29 Preparing Geospatial Data
πŸ’» https://mapshaper.org/
6:45:35 Making a World Map with React & D3
πŸ’» https://vizhub.com/curran/295f06f6efd749f0acc19b69a37687a6
7:11:24 Menus with React
πŸ’» https://vizhub.com/curran/6d60bcc26780476f9169f1a39cfacbc5
7:27:40 Scatter Plot with Menus
πŸ’» https://vizhub.com/curran/f149be87d69e40d88d567d36c224fc04
7:45:57 Polished Scatter Plot with Menus
πŸ’» https://vizhub.com/curran/e3f5f029b82f44a084d73806feafc577
8:06:23 Scatter Plot with Color
πŸ’» https://vizhub.com/curran/9b881e62cb2442ea928eb89b42dda013
8:13:24 Making a Color Legend
πŸ’» https://vizhub.com/curran/16f7a618a7f84a5085b0fff6a78b4444
8:28:27 Interactive Color Legend
πŸ’» https://vizhub.com/curran/8b699c4000704216a709adfeb38f2411
8:46:49 Points on a Map
πŸ’» https://vizhub.com/curran/4a94ec9d1cd348d394e69e9083b86684
8:58:35 Using Size
πŸ’» https://vizhub.com/curran/118d7f70085246a58dc7a374fd957c20
9:12:02 Missing Migrants
πŸ’» https://vizhub.com/curran/73bcdb68be6b4500b03827c9d58defba
πŸ’» https://vizhub.com/curran/6a46b0e07499423a91eb72d46b7431f2
9:23:26 Missing Migrants Part II: Aggregation by Month
πŸ’» https://vizhub.com/curran/e1b252a7e4b0455093444008dfd968c1
9:47:34 Missing Migrants Part III: On a Map
πŸ’» https://vizhub.com/curran/2d82ff9133fa4b5c8cb3ccade8e8ab90
9:56:46 Multiple Views
πŸ’» https://vizhub.com/curran/018be07cf0a4435ba09c0d8b32d04b28
10:09:23 Why Use Modules
10:11:48 Multiple Views Cleanup
πŸ’» https://vizhub.com/curran/1c80f00843da4307b5e2f6d56db01011
10:32:17 Multiple Views with Brushing
πŸ’» https://vizhub.com/curran/88b33d525e7f494c85bfc39f5d4e2266
10:58:34 React Performance Optimization
πŸ’» https://vizhub.com/curran/a95f227912474d4a9bbe88a3c6c33ab9
11:20:10 Choropleth Map
πŸ’» https://vizhub.com/curran/ed32a7ae82e14e35aa38c9416740b38a
11:30:11 Log Scales
πŸ’» https://vizhub.com/curran/88bb1e7d70af4587991386a19acc2be9

More in Part 2: https://youtu.be/H2qPeJx1RDI

source

This Post Has 41 Comments

  1. Wow, the resources given in only first 40mins is huge, lots of joy to watch. I love the Internet <3

  2. system2

    From the offset, following a well known book is outstanding as an approach

  3. avfr

    skip to around 2:00:00 if you know react.
    Also wish this guy wasn't so soy but whatever

  4. YouDJeuR

    Thanks a lot for sharing your knowledge with such a high quality <3

  5. I am looking through the comments to figure out, if anyone has the same issue: I tried to tag along the course (wich seems great btw thx!) but as soon as I reach the point with the first fetch / promise I run into a runtime error ( promise not defined). It happens when writing in vizhub as well as in Atom. I even set up an express-server and installed all required modules and defined "promise". Anyone with the same issue? It feels like an enviromental thing )=

  6. BEK ROZ

    Call me a senior engineer from today

  7. Sum Abich

    Oh thank you, this is exactly what I need for my upcoming internship.

  8. Aamir Sahil

    any body know how to set up rollup on VS code, so that it can convert from JSX to JS?

  9. Adrian Beria

    Gotta say, I love your voice, you could get rich just uploading videos reading books lol

  10. Elanur

    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

  11. 0000oooo100

    I'm watching this a 2x and I've only got today to learn it.

  12. Bhargav Patel

    YOU GUYS ARE LITERALLY THE BEST!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  13. Ernest J

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

    How can you implement hover, zoom etc on the world map? I watched one of his videos on the matter but the code is completely different

Leave a Reply