Introduction To D3.js with React

Video description

Learn how to use D3.js (version 6.x) effectively in a React environment

About This Video

  • Learn to integrate React and D3
  • Understand how to work with external data
  • Get up to speed with adding updates to visualizations

In Detail

This course will help you to get up and running with D3.js in a React environment quickly. It is designed to teach you how to program efficiently in the latest version of D3 - version 6.x.

To build on your knowledge, the course will gradually help you understand what you can do with the D3 library over the course of different sections. You'll start by exploring the importance of D3 and why you should learn it. Later sections will guide you on how to set up your environment and create a wrapper for using React and D3 together. You'll then wrap up the learning journey by working with the two libraries together to build a complete web app.

By the end of this course, you will have gained the skills you need to use D3.js confidently in a React environment.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Introduction
    1. Introduction to the course 00:02:16
    2. Why you should learn D3 00:05:13
    3. How this course is structured 00:03:28
  2. Chapter 2 : Getting started with D3
    1. Introduction 00:00:51
    2. Setting up our environment 00:02:38
    3. React recap 00:13:25
    4. Integrating React and D3 00:08:39
    5. Creating our React wrapper 00:07:45
    6. Introducing SVGs 00:06:54
    7. Adding SVGs with D3 00:10:42
    8. Selections and data joins 00:08:46
    9. Working with external data 00:09:26
    10. Summary 00:01:44
  3. Chapter 3 : Building a static bar chart
    1. Introduction 00:00:57
    2. Setting up our project 00:16:42
    3. Writing our bars with scales 00:12:55
    4. Fixing our bar heights 00:05:38
    5. D3 axis generators 00:04:43
    6. The D3 margin convention 00:09:20
    7. Fixing our y-axis 00:05:15
    8. Adding labels to our chart 00:08:29
    9. Section summary 00:00:50
  4. Chapter 4 : Making our bar chart update
    1. Introduction 00:01:16
    2. Looping with intervals 00:03:09
    3. Adding updates to our visualization 00:10:49
    4. The D3 general update pattern 00:08:24
    5. Adding our other set of data 00:04:34
    6. Flicking between datasets 00:07:02
    7. Adding D3 transitions 00:10:01
    8. Adding our dropdown with React 00:09:50
    9. Tracking our dropdown in App.js 00:07:00
    10. Connecting React and D3 00:09:36
    11. Summary 00:00:51
  5. Chapter 5 : Creating a complete application
    1. Introduction 00:01:10
    2. Setting up our project 00:06:22
    3. Loading in our data 00:10:44
    4. Starting our scatterplot: adding scales 00:13:31
    5. Adding our circles 00:07:15
    6. Adding axes and labels 00:09:33
    7. Back to React - adding an input row 00:10:21
    8. Building rows for our table 00:06:57
    9. Removing fields from our table 00:09:48
    10. Adding fields to our table 00:11:11
    11. Connecting React and D3 00:07:42
    12. Adding highlight functionality 00:09:40
    13. Ideas for improving 00:03:46
    14. Section summary 00:00:28
  6. Chapter 6 : Wrapping up
    1. Concluding thoughts 00:02:21

Product information

  • Title: Introduction To D3.js with React
  • Author(s): Adam Janes
  • Release date: April 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781800568259