Mastering data visualization in D3.js

Focused View

Adam Janes

6:22:42

99 View

1 - Introduction

1 - Introduction to the course.mp4

02:24

2 - What is a data visualization.mp4

02:59

3 - Activity Your favorite visualization.html

4 - The power of D3.mp4

04:30

5 - How this course is structured.mp4

03:03

6 - Section Summary.mp4

00:42

7 - Course GitHub Repository.html

2 - Getting started with D3

8 - Introduction Getting started with D3.mp4

00:51

9 - Setting up your environment.mp4

05:19

10 - Understanding SVGs.mp4

06:20

11 - Adding SVGs with D3.mp4

06:53

12 - 2.05.0.zip

12 - Activity Adding SVGs to the screen.html

13 - Selections and data joins.mp4

04:51

14 - Loading external data.mp4

07:43

15 - 2.08.0.zip

15 - Activity Your first visualization.html

16 - Section Summary.mp4

00:44

3 - Scales and Axes

1 - Scales in D3.html

17 - Introduction Scales and Axes.mp4

01:06

18 - Linear Scales.mp4

05:41

19 - Logarithmic Scales.mp4

03:17

20 - Time Scales.mp4

01:29

21 - Ordinal Scales.mp4

02:42

22 - Band Scales.mp4

06:07

23 - D3 min max and extent.mp4

04:23

24 - Margins and groups.mp4

06:37

25 - Axes and labels.mp4

06:54

26 - Making a bar chart.mp4

04:46

27 - Project 1 StarBreak Coffee.mp4

02:21

28 - 3.13.0.zip

28 - Activity Project 1.html

29 - Section Summary.mp4

00:52

4 - The basics of design

30 - Introduction The basics of design.mp4

01:03

31 - Designing for clarity.mp4

03:21

32 - Subjectivity in design.mp4

03:18

33 - Activity Critiquing visualizations.html

34 - The design toolkit.mp4

05:29

35 - An introduction to sketching.mp4

05:44

36 - Activity Making sketches.html

37 - The Bootstrap grid system.mp4

03:57

38 - Section Summary.mp4

00:43

5 - Make it dynamic

2 - Updates in D3.html

39 - Introduction Make it dynamic.mp4

01:29

40 - Looping with intervals.mp4

02:22

41 - Adding an update function.mp4

04:09

42 - The D3 update pattern.mp4

05:54

43 - Making our chart dynamic.mp4

03:09

44 - D3 Transitions.mp4

05:47

45 - Scatter plots in D3.mp4

01:49

46 - Project 2 Gapminder Clone.mp4

03:12

47 - 5.10.0.zip

47 - Activity Project 2.html

48 - Section Summary.mp4

01:07

6 - Make it interactive

49 - Introduction Make it interactive.mp4

01:03

50 - Adding a legend.mp4

03:11

51 - Formatting and parsing in D3.mp4

06:52

52 - Introducing Tooltips.mp4

08:15

53 - Event listeners and handlers in D3.mp4

10:16

54 - Adding a jQuery UI slider.mp4

04:38

55 - Line graphs in D3.mp4

08:07

56 - Project 3 CoinStats.mp4

02:43

57 - 6.10.0.zip

57 - Activity Project 3.html

58 - Section Summary.mp4

01:12

7 - Frequently used visualizations

3 - Layouts in D3.html

59 - Introduction Frequently used visualizations.mp4

01:29

60 - Using the D3 community.mp4

04:23

61 - Migrating code to version 5x.mp4

05:08

62 - D3 Layouts.mp4

05:19

63 - Area Charts.mp4

08:08

64 - Stacked Area Charts.mp4

13:32

65 - Data structures and D3 nests.mp4

07:00

66 - Pie and donut charts.mp4

17:01

67 - Wordclouds.mp4

05:51

68 - Section Summary.mp4

00:54

8 - Maps and Networks

4 - Maps and Networks.html

69 - Introduction Maps and Networks.mp4

01:12

70 - Visualization around the globe.mp4

07:57

71 - Loading multiple datasets with D3.mp4

05:04

72 - Choropleth Maps.mp4

09:03

73 - Forces in D3.mp4

08:24

74 - NodeLink Diagrams.mp4

08:45

75 - Section Summary.mp4

01:08

9 - Hierarchical Data

76 - Introduction Hierarchical Data.mp4

01:34

77 - Building hierarchies in D3.mp4

05:03

78 - Tree Diagrams.mp4

05:29

79 - Treemaps.mp4

07:54

80 - Circle Packing.mp4

05:59

81 - Sunburst Plots.mp4

08:43

82 - Activity Find your own visualization.html

83 - Section Summary.mp4

01:21

10 - File structure and linked views

84 - Introduction File structure and linked views.mp4

01:10

85 - File Separation.mp4

03:27

86 - Visualizations as Objects.mp4

07:27

87 - Converting our code to OOP.mp4

07:53

88 - Handling events across objects.mp4

06:49

89 - D3 Brushes.mp4

08:35

90 - Project 4 A corporate data dashboard.mp4

04:13

91 - 10.08.0.zip

91 - Activity Project 4.html

92 - Section Summary.mp4

01:01

11 - Wrapping up the course

93 - Introduction Wrapping up the course.mp4

00:54

94 - What you learned.mp4

01:58

95 - Concluding Thoughts.mp4

01:30

Description

Design and build beautiful data visualizations with d3.js. An intensive introduction to the D3 library (V6).

What You'll Learn?

Understand the fundamental building blocks of D3
Gain a wide breadth of knowledge, learning how to create 14 different visualizations
Critique existing visualizations and invent better designs for displaying data
Interpret open source code from the D3 community for use in your own projects
Master advanced tools in D3, building choropleth maps, brushes, tooltips, and layouts
Develop substantial web apps, with multiple visualizations on the page at once
Articulate original abstract ideas with compelling sketches

Who is this for?

Anyone who has a passion for working with data

Anyone who is curious about data visualization design

Anyone who wants to build complex interactive websites with D3js

More details

Description
Welcome to Mastering data visualization in D3.js!
This course will take you from a beginner level in D3Â to the point where you can build virtually any visualization that you can imagine. The course will teach you to program in the latest version ofÂ D3 - version 6.x.
Course Outline
In the first phase of the course, I will be building up your knowledge of D3 andÂ introducing you to some of the most foundational topics in data visualization. You will:
Understand whatÂ SVGs areÂ and how to they work with D3.
Discover howÂ D3 associatesÂ shapes with pieces of data.
Write scales, axes, and labels to make some basic visualizations.
Use the D3 update pattern to shift the position of SVGs as our data changes.
Handle user interactions by adding events to the page.
Add legends, tooltips, and sliders to your visualizations.
The course will also focus on data visualization design, helping you to make better decisions about how to structure your code, and teaching youÂ to justify the decisions that you make to others. You will learn how to select theÂ right visual channels for the data that you're working withÂ to create completely uniqueÂ visualizations.
In the second phase of the course, I will be taking you on a crash course throughÂ 12 new visualizations. You will gainÂ a wide breadth of knowledge in D3, as I will be walking you through pre-written code from members of the D3 community. I'll introduce you toÂ D3 layouts, andÂ I will be showing you how to build each of these visualizations in D3:
Line Charts
Area Charts
Stacked Area Charts
Pie Charts
Donut Charts
Wordclouds
Choropleth Maps
Node-Link Diagrams
Tree Diagrams
Treemaps
Circle Packs
Sunburst Plots
This part of the course will also teach you the skillÂ ofÂ finding new visualizations by yourself, adapting open source codeÂ to fitÂ with your own data.
In the final phase of the course, I will be showing you the proper file structure to use for managing multiple visualizations on the page at once. You will be able to create visualizations that can communicate with one another, allowing you to link user interactions between multiple different graphs. You'll also learn how to use brushes in D3 to select areas on the chart with the drag of a mouse.
Class Projects
The course will include 4 class projects for you to complete, which will give you the opportunity to practice your D3 skills with real data:
A simple bar chart to display the revenue growth of a small coffee chain.
An updating bubble chart,Â cloningÂ a famous visualization from Gapminder.
An interactive line chart, showing historical cryptocurrency prices over time.
A data dashboard for a large conglomerate company.
Each of the projects willÂ gradually become more complex as the course progresses.
Should I Take This Course?
D3 is an incredibly powerful library to use, with a strong community of developers which is growing every day.Â Students should take this class if they want to get a rigorous introduction to D3, which covers a wide range of different topics.

This course is not an introductory course to web development. Students are expected to have had experience coding in JavaScript, HTML, CSS, and jQuery before enrolling in this course.
Who this course is for:
Anyone who has a passion for working with data
Anyone who is curious about data visualization design
Anyone who wants to build complex interactive websites with D3js

User Reviews

Rating

average 0

Total votes0

Focused display

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.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.