Introduction to D3.js with React

Learn how to use D3.js (version 6.x) in a React environment. Learn enough D3 to be dangerous, and get started ASAP.

4.15 (497 reviews)
Udemy
platform
English
language
Web Development
category
instructor
2,821
students
5.5 hours
content
Jul 2020
last update
$54.99
regular price

What you will learn

Understand the fundamental building blocks of D3

Know how SVGs work, and how to manipulate them with D3

Set up a working file architecture for using React and D3 together

Pass events between React components and D3

Build updating charts that react to user input

Description

Welcome to Introduction to D3.js with React!

This course will help you to get up and running with D3.js in a React environment as quickly as possible. The course will teach you to program in the latest version of D3 - version 6.x.

Course Outline

The course is structured in a code-along format, gradually adding on to what you can do with the D3 library over the course of 5 sections.

Section 1:

  • Telling you why you should learn D3

  • Going over the structure of the course

  • Explaining course resources

Section 2:

  • Getting your environment setup

  • Creating a wrapper for using React and D3 together

  • Introducing SVGs

  • Taking your first steps in D3

Section 3:

  • Building a static bar chart with D3

  • How to add scales and axes to a chart

  • Introducing the D3 axis generators

  • Adding in the D3 margin convention

Section 4:

  • Building an updating bar chart with D3

  • Introduction to the D3 Interval method

  • Using the D3 transition suite

  • Understanding the D3 General Update Pattern

  • Updating the chart according to user input through React

Section 5:

  • Building a complete web app with React and D3

  • Building a scatterplot with D3

  • Handling events between React and D3

  • Practicing using the two libraries together


Should I Take This Course?

D3 is an incredibly powerful library to use, with a strong community of developers which is growing every day. The library famously doesn't play well together with React, as they both want total control over the DOM. Take this course if you want to learn the right way to get these two libraries together, and get up and running as quickly as possible.

This course is not an introductory course to web development. Students are expected to have had experience coding in JavaScript, HTML, CSS, and React before enrolling in this course.

Content

Introduction

Introduction to the course
Why you should learn D3
How this course is structured
Course resources explained
Course resources

Getting started with D3

Introduction
Setting up our environment
React recap
Integrating React and D3
Creating our React wrapper
Introducing SVGs
Getting to grips with SVGs
Adding SVGs with D3
Selections and data joins
Working with external data
Summary

Building a static bar chart

Introduction
Setting up our project
Writing our bars with scales
Fixing our bar heights
D3 axis generators
The D3 margin convention
Fixing our y-axis
Adding labels to our chart
Section summary

Making our bar chart update

Introduction
Looping with intervals
Adding updates to our visualization
The D3 general update pattern
Adding our other set of data
Flicking between datasets
Adding D3 transitions
Adding our dropdown with React
Tracking our dropdown in App.js
Connecting React and D3
Summary

Creating a complete application

Introduction
Setting up our project
Loading in our data
Starting our scatterplot: adding scales
Adding our circles
Adding axes and labels
Back to React - adding an input row
Building rows for our table
Removing fields from our table
Adding fields to our table
Connecting React and D3
Adding highlight functionality
Ideas for improving
Section summary

Wrapping up

Concluding thoughts

Screenshots

Introduction to D3.js with React - Screenshot_01Introduction to D3.js with React - Screenshot_02Introduction to D3.js with React - Screenshot_03Introduction to D3.js with React - Screenshot_04

Reviews

Emanuele
May 17, 2023
I learned a lot in this course, Adam is a great instructor and the course content is very useful. The only bad thing is that the videos are outdated in relation to most current versions of React and D3. Adam provided the updated code in GitHub, but sometimes following the videos is very confusing. I hope he gets the chance to update the videos because I think it will benefit many students.
Joan
March 31, 2023
A lot of knowledge! Even if it's a older react version, d3 topic was very clear. I appreciate that you explain Update Pattern because that is exactly what I was looking for. Thanks and a great material. You could consider to update the repo with a new react version for people that learn to develop in >= React 17. Or another course would be an optional idea because it's a great material. I really enjoyed it!!!!
Samantha
September 10, 2022
The React parts could be updated to use hooks but I really liked how everything related to D3 was explained in this course, and after finishing it I feel like I understand everything that was introduced.
Martin
August 3, 2022
If people want an update go read the docs, this course isn't a subscription. React 16 and D3-6 are perfectly adequate. Little things in the course were great: pace, english, explanations, etc.. The design pattern was fundamentally what I was looking for and it's basically covered in Ch. 5. A little more complexity would've been appreciated in that regard but got what I came for more or less.
Fabio
July 23, 2022
Looks like this course needs an update, for react > 16 and working with hooks it's necessary a different implementation.
Viktor
April 19, 2022
Well, this guy did lie. I really do feel prepared for working in the production environment. Thank you Adam.
Nishant
February 21, 2022
nice explanation, i was expected some more clear example but, as i'm new in this it helps to dive into it.
Phillip
December 9, 2021
Some things are outdated and/or changed, like React function components. But the course allowed me to have a start on d3.
Ivan
November 5, 2021
Excellent content. My only recomendation is to equalize the audio made on patching, and create a section using react functional components instead.
Gonçalo
September 30, 2021
Very good d3 explanation, good react with d3 overview, but only 1st part was adapted to the new react version with hooks.
Antonio
September 29, 2021
The teacher is clear and makes you understand the topics really fine. by the way, the topics are very interesting and hugely usable in real projects.
Marcus
September 23, 2021
The video content is obsolete. I'd ask for a refund if I hadn't waited too long to get started. The teacher is good, knowledgeable, and definitely offers value, but what is the point of purchasing a video course when the video content is out of date and doesn't reflect the files. If I get an alert that the video content has been modernized, I will change this rating immediately to 5 stars.
Paula
September 12, 2021
This was a really good course and I learned a lot. My only issue was a struggle seeing the code on the screen as I was coding along side the course. It was a little too small.
Sergii
July 15, 2021
Course is a little bit outdated in terms of React version used (new version of React only mentioned once in a write-up and in referenced a code on github for the last project). Videos do not cover new version of React at all. Sound levels jump up and down all the time, quality of sound might be better. Otherwise, a good short course teaching basics of D3 and its combination with React.
Steven
April 24, 2020
Great course, for d3 as well as React in general. Sound was alternating with different volumes. I have finished everything but there is no certificate...

Charts

Price

Introduction to D3.js with React - Price chart

Rating

Introduction to D3.js with React - Ratings chart

Enrollment distribution

Introduction to D3.js with React - Distribution chart

Related Topics

2521762
udemy ID
8/22/2019
course created date
10/5/2019
course indexed date
Bot
course submited by