via YouTube Free video
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/73bcdb68be6b4500b0…
Some points apply to every course of this kind; see how we rank.
freeCodeCamp is in Tier 3: good universities, respected companies, nonprofits and well-known teachers of our institution ranking (78/100). Free full courses and certifications; practical, but not university-level depth.
This is CS50W, CS50's Web Programming with Python and JavaScript. Register for free at https://cs50.edx.org/web. Slides and source code at https://cs50.harvard.edu/web. This course picks up where Harvard University’s CS50 leaves off, diving more deeply into the design and implementation of web apps…
Learning objectives This course picks up where Harvard University's CS50 leaves off, diving more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Flask, Django, and Bootstrap. Topics include database design, scalability, security, and user…
Harvard University
An introduction to the intellectual enterprises of computer science and the art of programming.
Learning objectives This course picks up where Harvard University's CS50 leaves off, transitioning from web development to mobile app development with React Native, a popular open-source framework maintained by Facebook that enables cross-platform native apps using JavaScript without Java or Swift.…
Harvard University
An introduction to programming using Python, a popular language for general-purpose programming, data science, web programming, and more.
Harvard University
This course picks up where CS50 leaves off, diving more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Django, React, and Bootstrap.
