zakruti.com » IT - Software » freeCodeCamp.org

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

video description

Rating: 4.0; Vote: 1

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
Date: 2022-03-14

← Data Analysis with Python Course - Numpy, Pandas, Data Visualization

Serverless Functions Course - Create a Serverless API →

Related videos

Nano Banana vs Photoshop: A Fair Comparison

• PiXimperfect

How to Create a Windows 11 Bootable USB Flash Drive Using Rufus

• Geeks Tutorial

Nano Banana Officially in Photoshop: 50 EPIC Uses!

• PiXimperfect

Der8auer Has Gone Mad with Power - Heatsink Manufacturing - Made in Germany

• Gamers Nexus

5 Photoshop Tricks to Improve Any Portrait FAST!

• PiXimperfect

Still Using Drop Shadow Fix This - Photoshop in Minutes

• PiXimperfect

Comments and reviews: 6

Sbonelo
Honestly, I loved the implementation at first as it promotes cleaner code however this is a terrible, terrible course if you want to understand the D3 library and create advanced charts. This course is overcomplicating the library, majority of the time he created the shapes from scratch instead of utilising the library (e.g. creating the Axis and Bars in the Bar Chart) and I haven't seen a single source code/youtube video that uses this style to create D3 Charts so good luck using this video as a point of reference.
.
The 2019 12hr course is way better than this one
reply

Christian
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 )=
reply

Ernest
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!
reply

freecodecamp
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- -
reply

Punith
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?
reply

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
reply

Add a review, comment