Introduction to D3.js with React (Udemy.com)
Learn how to use D3.js (version 6.x) in a React environment. Learn enough D3 to be dangerous, and get started ASAP.
Created by: Adam Janes
Last updated July 2020
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
How it compares
Against the other 815 rated Udemy courses in Web Development on CourseDuck:
- Rating4.2 out of 5higher than 13% of them
- Reviews506#281 of 816 by number of reviews
- Length5.7 hoursshorter than 58% of them
- Last updatedJuly 2020earlier than 84% of them
Course 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.
Instructor Details
- 4.2 Rating
506 Reviews
Adam Janes
Hi! My name is Adam and I'm a web developer from the UK. I studied Economics and Computer Science at Harvard University, and I have a passion for tinkering around with interesting sources of data.
My work involves helping companies to improve how they are displaying data to their users. From small SaaS companies to large NGOs, I leverage my expertise in data visualization to provide design direction and technical help to a range of clients.
I hope to see you in one of my courses soon.
More courses by Adam Janes
More Web Development courses
Python Fullstack Mastery: Build Modern Web Apps with Django (2025)
5.0 (165 Reviews)
Provider: Udemy
Time: 35h
$19.99
NgRx Signal store for Angular - The missing guide (2026)
4.9 (436 Reviews)
Provider: Udemy
Time: 11.3h
$89.99
Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia) (2024)
4.9 (177 Reviews)
Provider: Udemy
Time: 7.6h
$79.99
Build a URL Shortener App with ASP.NET: Step by Step (2026)
4.9 (100 Reviews)
Provider: Udemy
Time: 9.6h
$10.99
The Complete Elixir and Phoenix Bootcamp (2021)
4.8 (7,773 Reviews)
Provider: Udemy
Time: 17.4h
$84.99
Reviews
By Joan Alexis Córdoba Narváez on 3/30/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!!!!
By James Cook on 6/16/2021
I took off 1.5 stars not for the content, but for the production quality. The audio was heavily spliced together. I understand that things change, and sections might need to be rerecorded. However, this course sounded like some audio was recorded with a decently quality mic, but other sections were recorded in a bathroom on iPhone headphones. This made it hard to find a volume to watch at, and sections were jarring when the audio increased or decreased in volume. The content was fine as expected, but I wish a little more care was taken to make sure spliced sections gelled well with the original sections.
By Michael Tyler on 12/28/2020
First off, It's a great course and I am learning a ton. The program is written in old react. I only have minimal practice with class-based react components and more experience with functional-based components. Because of this, the way of passing props, setting state, and using hooks is much different now so it makes you have to kinda slow down and do some extra research. Now if you understand the old way of react and lifestyle methods, then you will have no issues. So besides being a bit outdated its really great at getting you started with d3 and react, and helped me build some custom scatterplots I used for a project.
By Saracha Tongkumpunt on 11/25/2020
Pros: -Well explanation, step by step, constructively. -Very easy to understand the concept. -The code is pretty clean, and it works well with React. Cons: -The code display is too small in section 5. -The voice is not normallised. It's a bit annoying, especially in section 5. -The course is pretty short. You need to buy his previous course to learn more about D3. In this course, there are only Bar chart and Scatter plot Anyway, I can say this course meets my expectation.
By Anthony Webster on 9/10/2020
Decent introduction. Some improvements that could be made for an eventual course update : - Ditch the explainations of basic React notions. This is an intermediate course for React developpers. We already know all this stuff. Cut to the chase. - Use the zoom feature whilst capturing. It's hard to see the code. Also, it isn't necessary to see the result update in real-time CodeSandbox-style. You would gain some screen real-estate by switching between the two. - Some microphone volume level fluctuation issues.
By James Chew on 4/10/2020
Good course overall. other comments were accurate: audio changes quality often (but is no issue with earphones on); code on-screen is TINY (even at full screen it was quite small), that said, a git repository is available which helps alleviate this problem a bit; the react implementations are based on soon to be deprecated lifestyle methods and the updating the ChartWrapper to more modern React Hooks took me additional support. Otherwise, great foundation for both d3 and integrating React with d3.
By Yishay Feldman on 2/24/2020
This has been a really good course that demonstrates how to combine D3 with React. I think it shows a good pattern of using those two libraries and it also teaches in detail how to update a D3 visualization with smooth transitions I personally think that an example project of D3 force layout would make this course more complete and I would appreciate if you can update the course with this idea in the future Thank you Adam
By Joe Schwehr on 1/14/2020
Adam is a good teacher, and overall this is a pretty good course for learning the basics. Perhaps another section could be added explaining how to use functional components instead of class-based ones... or at the very least another video could be added showing how to avoid using 'componentWillMount' and 'componentWillReceiveProps' since these lifecycle methods are no longer the recommended way of doing things. Other than that I have no complaints.
By Chiza Barber on 12/18/2019
It was a good intro course to D3 that also helped refresh my memory for React. The instructor was thorough and took the time to explain the concepts. I'll be going on to take Adam's other course on mastering D3. One suggestion to the instructor to improve user experience - please try zooming into your text editor/IDE while recording if you decide to make more courses. I spent this entire course squinting to see what you were typing... I almost removed a star out of annoyance.
By Graham Waterfield on 9/22/2019
Disclaimer - I was not new to React or D3, having completed a course in each. After this course I have developed a much better understanding of both and feel ready for my own challenges (my measure of a successful course). Although not a starter course Adams explanations really suit me and I do not just feel that I am rushing to complete code that I will need to investigate later. The only one slight downside is that although there is always a lot of context shown on the screen (good), however sometimes (for a couple of videos particularly) this makes the screen incredibly hard to read (and this was on a retina display).
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 84 / 100







