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

Показать описание

Learn Data Visualization with D3, JavaScript, and React in this 17-hour course.

⭐️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)
57:02 Let's Make a Face Part II (React)
1:14:57 Let's Make a Face Part III (React & D3)
1:26:53 Let's Make a Face Part IV (React Components & ES6)
1:37:05 Let's Make a Face Part V multiple files with ES6 modules
1:47:01 Let's Make a Face Part VI (Compartmentalizing Complexity)
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
2:29:11 Interaction With React
2:48:28 Parsing CSV Data with D3
2:57:18 Loading Data in React
3:08:40 Inputs for Visualization: Data & Tasks
3:19:32 Iterating Fast with Vega Lite API
3:50:33 Marks & Channels
4:26:43 Visualizing Data with React & D3
4:43:08 Making a Bar Chart with React & D3
4:57:51 Margins and Axes
5:17:23 Refactoring a Bar Chart
5:29:00 Stylized Bar Chart
5:53:13 Making a Scatter Plot
6:15:29 Working with Time
6:23:37 Making a Line Chart
6:37:29 Preparing Geospatial Data
6:45:35 Making a World Map with React & D3
7:11:24 Menus with React
7:27:40 Scatter Plot with Menus
7:45:57 Polished Scatter Plot with Menus
8:06:23 Scatter Plot with Color
8:13:24 Making a Color Legend
8:28:27 Interactive Color Legend
8:46:49 Points on a Map
8:58:35 Using Size
9:12:02 Missing Migrants
9:23:26 Missing Migrants Part II: Aggregation by Month
9:47:34 Missing Migrants Part III: On a Map
9:56:46 Multiple Views
10:09:23 Why Use Modules
10:11:48 Multiple Views Cleanup
10:32:17 Multiple Views with Brushing
10:58:34 React Performance Optimization
11:20:10 Choropleth Map
11:30:11 Log Scales

freeCodeCamp.org

Рекомендации по теме

Комментарии

After watching this 11 hours, I was able to visualize whole genome alignments of myself

hirok

Who in their right mind would watch a 17-hour, 2-part YouTube course!? One week and many Codepens later, I am ever so glad I did. Thank you, Curran. I completed all my freeCodeCamp data visualization projects in React & D3 while following along with your fabulous tutorial.

FelipeVillegas

1hr into the course and I am already in love with Curran. What an amazing teacher !

sanghvian

This is still relevant 2 years after it was made. I'm almost done watching and I've learned so much. Thanks for this!

bc

Curran is one of the best programming teacher IMO
It's been 3 hours and I'm still enjoying his teaching

basiccoder

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!

ernestj

10:44:00 if your 'event' is not exported from d3, just use the event that's passed directly to the listener, like this:
brush.on("brush", (event) => console.log(event.selection))
cheers

frogsngrandmothers

I'm only 15 minutes in, and already I have a deeper appreciation for the power of data visualization as a tool for augmenting my own cognition. "Think on paper" indeed.

quincylarsonmusic

This has turned out to be both great tutorial on React and D3 js, amazing!

jakedeng

Ah, 2 weeks of new learning. This channel is a library for programmers

severedghost

Curran, you're an amazing teacher as well as an amazing human being. I can't tell you how helpful this will be for those who need it. Thank you!

senelburak