Data Visualization in JavaScript with React and D3.js

Focused View

Caleb Diehl

3:02:22

93 View

1. Introduction

1. Introduction.mp4

03:27

2.1 Blog post outlining several approaches to combining React and D3.html

2. Why combine D3 and React.mp4

12:40

3.1 Course Github Repo (code for all lectures lives here).html

3. How the Course is Structured.mp4

02:36

2. Review of basic D3 concepts

1.1 Observable notebook to edit.html

1. Introduction to D3 and the Document Object Model (DOM).mp4

02:54

2.1 Introduction to D3 from the University of Washingtons Interactive Data Lab.html

2. Data binding with D3.mp4

05:51

3.1 Completed Observable Notebook.html

3. Scaling and styling data in D3.mp4

05:08

3. Integrating React and D3 A Declarative Approach

1. Introduction the quickest way to start integrating React and D3.mp4

02:34

2.1 How to use Create React App.html

2.2 Node.html

2. Setting up our React project environment.mp4

03:43

3.1 index.zip

3. Functional Components.mp4

06:22

4.1 Finished code for this lecture.html

4.2 sunshine.zip

4. Loading data from static files.mp4

05:01

5.1 Finished code for this lecture.html

5. Setting up scales using D3.mp4

05:03

6.1 Finished code for this lecture.html

6. Mapping over data elements to create JSX.mp4

12:48

7.1 Finished code for this lecture.html

7. Adding interactivity with useState.mp4

04:46

8. Pros and Cons of the declarative approach.mp4

03:27

4. Integrating React and D3 A hybrid approach

1. Introduction the best of both the React and D3 worlds.mp4

01:35

2.1 index.zip

2.2 utils.zip

2. Project setup and creating the general structure.mp4

05:27

3.1 Finished code for this lecture.html

3. Adding a useEffect hook with styling.mp4

09:07

4.1 Finished code for this lecture.html

4. Adding transitions and animation.mp4

06:20

5. Pros and Cons of this approach.mp4

03:09

5. Real-world Project Building the Gapminder scatterplot

1.1 gapminder setup instructions.docx

1. Introduction to the Gapminder chart.mp4

02:06

2.1 app.zip

2.2 Finished code from this lecture.html

2.3 gapminder setup instructions.docx

2.4 index.zip

2.5 legend.zip

2. Loading data and creating the chart components.mp4

01:58

3.1 Finished code.html

3. Adding scales using D3 and the useEffect hook.mp4

19:46

4.1 Finished code.html

4. Styling the chart using D3.mp4

07:05

5.1 Finished code.html

5. Building the chart axes.mp4

09:05

6.1 Finished code.html

6. Adding a crosshair to display averages.mp4

08:26

7.1 Finished code.html

7. Adding interactivity building the year slider.mp4

08:58

8.1 Finished chart code.html

8. Building the interactive Legend.mp4

19:48

6. Course Wrap-up

1. Publishing your work.mp4

01:57

2. Final thoughts on React and D3 for data visualization.mp4

01:15

Description

Build beautiful data visualizations and visualization tools with JavaScript

What You'll Learn?

Gain proficiency with two of the premier javascript libraries for data visualization
Understand the challenges of integrating React and D3 and how to overcome c
Build a fully interactive data visualization in D3 and React
Understand how to add fluid transitions and animations to charts

Who is this for?

Students learning software development who want to gain experience with data visualization

Data analysts or data scientists looking for more engaging and intuitive ways to present their work to general audiences

Journalists or others using data for storytelling and audience engagement

More details

Description
Part science, part art, data visualization is one of the most -in-demand skills in the data science and software industries. Taught by a full-time data visualization developer, this dataviz course gets you up and running quickly with a flexible and highly customizable method for building interactive visualizations and storytelling with data.
After this tutorial, you'll be able to produce beautiful data visualizations using your own graphic style that are performant and highly responsive to user input. The stack taught here includes the latest versions of React (v17) and D3.js (v7), two of the most popular modern JavaScript libraries mentioned in job postings. The course focuses on learning JavaScript through practical experience and examples, drawing on the author's experience to show you the tradeoffs of various methods of combining these powerful tools.
If you're looking to gain highly in-demand skills for business intelligence, building dashboards, or other visualization tools, this course will get you up and running quickly and give you a competitive edge in the job market.
Some prior knowledge of using React and D3 separately is recommended for this course. However, we will cover the necessary topics in brief review modules and provide plenty of data visualization examples, so a little independent study and a grasp of basic JavaScript should be enough to get you started.

Course Outline:
Introduction
Why learn React and D3
Part 1: D3 basics review
Binding data to the Document-Object Model (DOM) using D3
Adding data and styling it in D3
Part 2: A declarative approach to integrating React and D3
Translating D3 syntax into JSX
Pros and cons of this approach
Part 3: A hybrid approach to React and D3
Learn how toÂ balance D3's built-in transition capabilities and DOMÂ updates and React's render cycle
Build a fully functioning scatterplot that updates with new data
Part 4: Practical project - Gapminder scatterplot
Build a fully interactive data visualization of the popular gapminder dataset
Add user-defined filters and other controls
Bring all your knowledge together to create a fully immersive chart similar to what you would create for a business use case or publication
Who this course is for:
Students learning software development who want to gain experience with data visualization
Data analysts or data scientists looking for more engaging and intuitive ways to present their work to general audiences
Journalists or others using data for storytelling and audience engagement

User Reviews

Rating

average 0

Total votes0

Focused display

I am a full-time data visualization developer. I currently work at the Associated Press, where I design and build interactive graphics for one of the world's largest news organizations. My expertise is in front-end web development, html / css, javascript, React, and D3.js. I am also adept at geospatial data visualization with python and javascript. I earned a master's degree in urban planning, where I focused on urban informatics.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.