Data Visualization in JavaScript with React and D3.js

Name: Data Visualization in JavaScript with React and D3.js
Rating: 4.5 (64 reviews)

Build beautiful data visualizations and visualization tools with JavaScript

Created byCaleb Diehl

Last updated 5/2023

English

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

Course content

6 sections • 29 lectures • 2h 57m total length

Introduction3:27
Why combine D3 and React?8:07
How the Course is Structured2:36

Introduction: the quickest way to start integrating React and D32:34
Setting up our React project environment3:43
Set up a React project environment with Create React App, Node.js, and npm to build a bar chart with React and D3.js, featuring a month filter and axis labels.
Functional Components6:22
Loading data from static files5:01
Setting up scales using D35:03
Set up x and y scales with d3 to map data values to pixel ranges, using a linear scale for x and a scaleBand for y in a bar chart.
Mapping over data elements to create JSX12:48
Adding interactivity with useState4:46
Pros and Cons of the declarative approach3:27

Introduction: the best of both the React and D3 worlds1:35
Project setup and creating the general structure5:27
Adding a useEffect hook with styling9:07
Learn how a useEffect hook in a React and D3.js setup styles and positions svg circles after render to create a dynamic scatterplot, with scales and data binding.
Adding transitions and animation6:20
Pros and Cons of this approach3:09
Adopt a hybrid React and D3 approach to build interactive data visualizations, with React handling state and structure and D3 delivering transitions and styling.

Introduction to the Gapminder chart2:06
Build a Gapminder chart with React and D3, encoding GDP per capita, life expectancy, and continent using size, color, and axes, with a year slider and filterable legend.
Loading data and creating the chart components1:58
Clone the Gapminder initial branch from the course GitHub to load the starter React and D3.js app, then explore the app, circles, and draw chart code with preloaded data.
Adding scales using D3 and the useEffect hook19:46
Styling the chart using D37:05
Building the chart axes9:05
Adding a crosshair to display averages8:26
Adding interactivity: building the year slider8:58
Add a year slider to the Gapminder chart using React and D3. It filters data by year, animates transitions, and uses five-year steps from 1957 to 2007.
Building the interactive Legend19:48

Requirements

Basic knowledge of html, css, and javascript. Some basic experience or exposure with d3 and React.

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

Data Visualization in JavaScript with React and D3.js

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 14min

Review of basic D3 concepts3 lectures • 14min

Integrating React and D3: A Declarative Approach8 lectures • 44min

Integrating React and D3: A hybrid approach5 lectures • 26min

Real-world Project: Building the Gapminder scatterplot8 lectures • 1hr 17min

Course Wrap-up2 lectures • 3min

Requirements

Description

Who this course is for: