Data Visualization with D3, JavaScript, React - Full Course

Learn Data Visualization with D3, JavaScript, and React. Part 2: https://youtu.be/H2qPeJx1RDI Created by @currankelleher . ❤️ Try interactive JavaScript courses in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from Scrimba) ⭐️Sections/Code⭐️ 00:00 Intro 05:22 What is Data Visualization 14:30 Week 1 Q & A 22:49 Finding Visualizations 29:17 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 w/ 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 Part 2: https://youtu.be/H2qPeJx1RDI