Introduction to D3.js with React

Focused View

Adam Janes

5:24:55

7 View

1 - Introduction

01 - Introduction to the course.mp4

02:16

02 - Why you should learn D3.mp4

05:12

03 - How this course is structured.mp4

03:28

2 - Getting started with D3

04 - Introduction.mp4

00:51

05 - Setting up our environment.mp4

02:37

06 - React recap.mp4

13:25

07 - Integrating React and D3.mp4

08:39

08 - Creating our React wrapper.mp4

07:44

09 - Introducing SVGs.mp4

06:53

10 - Adding SVGs with D3.mp4

10:42

11 - Selections and data joins.mp4

08:45

12 - Working with external data.mp4

09:26

13 - Summary.mp4

01:44

3 - Building a static bar chart

14 - Introduction.mp4

00:56

15 - Setting up our project.mp4

16:42

16 - Writing our bars with scales.mp4

12:54

17 - Fixing our bar heights.mp4

05:38

18 - D3 axis generators.mp4

04:43

19 - The D3 margin convention.mp4

04:36

20 - Fixing our y-axis.mp4

05:14

21 - Adding labels to our chart.mp4

08:29

22 - Section summary.mp4

00:50

4 - Making our bar chart update

23 - Introduction.mp4

01:16

24 - Looping with intervals.mp4

03:09

25 - Adding updates to our visualization.mp4

10:49

26 - The D3 general update pattern.mp4

08:24

27 - Adding our other set of data.mp4

04:33

28 - Flicking between datasets.mp4

07:01

29 - Adding D3 transitions.mp4

10:01

30 - Adding our dropdown with React.mp4

09:49

31 - Tracking our dropdown in App.js.mp4

07:00

32 - Connecting React and D3.mp4

09:36

33 - Summary.mp4

00:51

5 - Creating a complete application

34 - Introduction.mp4

01:09

35 - Setting up our project.mp4

06:22

36 - Loading in our data.mp4

10:43

37 - Starting our scatterplot - adding scales.mp4

13:31

38 - Adding our circles.mp4

07:14

39 - Adding axes and labels.mp4

09:33

40 - Back to React - adding an input row.mp4

10:21

41 - Building rows for our table.mp4

06:56

42 - Removing fields from our table.mp4

09:48

43 - Adding fields to our table.mp4

11:11

44 - Connecting React and D3.mp4

07:41

45 - Adding highlight functionality.mp4

09:40

46 - Ideas for improving.mp4

03:46

47 - Section summary.mp4

00:27

6 - Wrapping up

48 - Concluding thoughts.mp4

02:20

Description

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. All the codes and supporting files for this course are available at - https://github.com/PacktPublishing/Introduction-To-D3.js-with-React

More details

User Reviews

Rating

average 0

Total votes0

Focused display

React

Adam Janes

Instructor's Courses

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.

PacktPub

View courses PacktPub

Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.