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
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/
Wow, the resources given in only first 40mins is huge, lots of joy to watch. I love the Internet <3
"alright"
4:43:18
7:28:00
From the offset, following a well known book is outstanding as an approach
skip to around 2:00:00 if you know react.
Also wish this guy wasn't so soy but whatever
Thanks a lot for sharing your knowledge with such a high quality <3
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 )=
I am watching in Taiwan. This video helps me a lot. Thank you.
Call me a senior engineer from today
01:09:39 is that JFX . do i write it correct?
1:26:49
Oh thank you, this is exactly what I need for my upcoming internship.
Can i code line chart with customize draggable dots?
Course starts at 4:26:43 if you know the basics.
Alrighhhttt…..
any body know how to set up rollup on VS code, so that it can convert from JSX to JS?
Gotta say, I love your voice, you could get rich just uploading videos reading books lol
do they use java for backend?
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
I'm watching this a 2x and I've only got today to learn it.
Its extremly useful 4 me))
Brilliant β€οΈ
YOU GUYS ARE LITERALLY THE BEST!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Thank you for the amazing free resource
Is the terminal you provide buggy? Because I a running into issues that are code related but not on my page
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!
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
How to hover, zoom on the world map
2:17:50 π€£π€£
If you already know react Skip first 3 hours !
hello
You should have taught how to do this locally.
F12 > Ctrl+Shift+I
4:56:09
Thank you so much! you guys rock, Curran, you are an amazing human being!
6:45:35
I really β€οΈ this course
i am remote from india
Can we get pdf of this course
cool