Skip to content
UdemyWeb DevelopmentPaid courseIntermediate levelCertificate

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

icon
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

icon
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.

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

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.


icon
More courses by Adam Janes

$11.99

icon
More Web Development courses

$19.99

$89.99

$89.99

$79.99

$10.99

$84.99

icon
Reviews

4.2

506 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

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).

Showing all 10 reviews on CourseDuck

Read all 506 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 84 / 100