D3.js in Action: Build 17 D3.js Data Visualization Projects

Name: D3.js in Action: Build 17 D3.js Data Visualization Projects
Rating: 4.5 (330 reviews)

D3.js (V 5) from Scratch! Build Useful D3.js Data Visualization Projects! D3.js for Beginners

Created byCrypters Infotech

Last updated 6/2021

English

What you'll learn

Learn D3 from beginner to professional level
Develop different types of data visualizations
Understand the core of D3 - enter, update and exit selections in depth
Develop 14 unique D3 data visualization projects
Make the best use of available data to represent it visually
Learn D3 scales to adjust the size of the visualizations
Learn how to add an axis for reference
Add life to visualizations using D3 transitions

Course content

12 sections • 145 lectures • 17h 22m total length

What is D3.js?1:48
General Instructions to Follow0:26
What Software You Need?0:22

Set Up D3.js Development Environment7:01
Set up the d3.js development environment by linking the latest d3.js file online or offline, using version 5.2.0, and verify with a simple script that colors squares.
Source Code: Set Up D3.js Development Environment0:11
Select the Required Elements - Part 16:57
Source Code: Select the Required Elements - Part 10:10
Select the Required Elements - Part 29:22
Source Code: Select the Required Elements - Part 20:19
Style the Selected Elements16:15
Source Code: Style the Selected Elements0:19
Add Class to the Selected Elements11:38
Learn to add or remove classes on D3 selections with the class method, using true, false, or function criteria to style circles.
Source Code: Add Class to the Selected Elements0:21
Set Attributes to the Selected Elements10:30
Learn to set attributes on selected elements with the d3.attr method, adjusting circle positions and radii with fixed values or functions, and compare attributes, properties, and a checkbox example.
Source Code: Set Attributes to the Selected Elements0:13
Set Content for the Selected Elements3:32
Source Code: Set Content for the Selected Elements0:07
Add New Elements5:42
Source Code: Add New Elements0:08
Hands-On: Create SVG on the Fly10:32
Source Code: Hands-On - Create SVG on the Fly0:09

Join an Array of Data with Selected Elements10:19
Source Code: Join an Array of Data with Selected Elements0:11
Join an Array of Objects with Selected Elements8:03
Source Code: Join an Array of Objects with Selected Elements0:14
Introduction to Data Joins: The Core of D3.js7:51
Explore the core concept of data joins in d3.js through enter, update, and exit selections, using a chairs-and-people analogy.
Enter, Update and Exit Selections in Version 314:59
D3.js version 3 uses enter, update, and exit selections in a data join. See how to align data with elements, add new nodes, and remove extras.
Source Code: Enter, Update and Exit Selections in Version 30:33
Enter, Update and Exit Selections in Version 511:50
Source Code: Enter, Update and Exit Selections in Version 50:37
The Real Magic of D39:08
Source Code: The Real Magic of D30:12
Project 1: Horizontal Bar Chart6:32
Create a horizontal bar chart from a numeric array to show weekly computer sales (Monday–Saturday) using plain HTML elements, with bars scaled by value and centered labels.
Project 2: Vertical Bar Chart12:18

Introduction to Scales in D3.js6:03
Linear Scales8:51
Source Code : Linear Scales0:16
Avoid Hardcoding with min and max4:41
Source Code : Avoid Hardcoding with min and max0:17
Color Scales10:51
Explore color scales in d3.js by mapping input values to colors via linear interpolation. Define domain and range, and interpolate outputs like strings or objects.
Source Code: Color Scales0:23
Power and Logarithmic Scales7:56
Learn to use power and log scales in d3.js, including setting an exponent and base, with domain and range guiding continuous data mapping.
Source Code: Power and Logarithmic Scales0:19
Time Scales: Part 111:27
Use time scales in d3.js to build a vertical bar chart of quarterly tax payments. Map dates to the x axis and tax amounts to the y axis.
Time Scales: Part 213:24
Source Code: Time Scales0:26
Sequential Scales15:09
Source Code: Sequential Scales0:14
Quantize Scales10:45
Quantile & Threshold Scales13:30
Source Code: Quantize, Quantile & Threshold Scales0:31
Ordinal Scales9:14
Source Code: Ordinal Scales0:19

Add X and Y Axis17:38
Source Code: Add X and Y Axis0:09
Style the Axis as You Want - Part 114:47
Style the Axis as You Want - Part 2 (Update to Part 1)7:16
Source Code: Style the Axis as You Want0:17
Hands-On: Display 4 Axes Based on User Input - Part 111:03
Explore interactive d3.js axis display by selecting horizontal and vertical orientations from dropdowns to render top, bottom, left, or right axes using scales and on change events.
Hands-On: Display 4 Axes Based on User Input - Part 212:12
Hands-On: Display 4 Axes Based on User Input - Part 3 (Update Lecture)6:59
Source Code - Hands-On: Display 4 Axes Based on User Input0:31
Project 3: Vertical Bar Chart with Axes - Part 119:18
Explore building a vertical bar chart with axes using d3.js by displaying yearly loss data (2010–2014) with x and y scales, bottom x-axis and left y-axis, and formatted dollar values.
Project 3: Vertical Bar Chart with Axes - Part 2 (Update to Part 1)5:34
Project 4: Scatterplot15:14

Line Generator - Part 112:12
Line Generator - Part 212:45
Source Code: Line Generator0:23
Project 5: Line Chart - Part 115:13
Create a two-line line chart in D3.js using scales, axes, and a line generator, then refine colors and padding for accurate data representation.
Project 5: Line Chart - Part 2 (Update to Part 1)3:12
Area Generator14:23
Source Code: Area Generator0:19
Project 6: Area Chart - Part 110:35
Project 6: Area Chart - Part 211:34
Build an area chart from scratch in D3.js by defining data and profit and rendering the area path. Set up x and y scales, domains, and axes with ticks.
Stack Generator16:04
Source Code: Stack Generator0:26
Project 7: Stacked Area Chart - Part 110:30
Project 7: Stacked Area Chart - Part 29:03
Project 7: Stacked Area Chart - Part 311:46
Arc Generator - Part 113:30
Source Code: Arc Generator - Part 10:13
Arc Generator - Part 212:05
Learn to configure the D3.js arc generator for annulus segments and pie charts by setting start and end angles, inner and outer radii, and padding, with optional corner radius.
Source Code: Arc Generator - Part 20:14
Arc Generator - Part 311:35
Source Code: Arc Generator - Part 30:20
Pie Generator8:31
Source Code: Pie Generator0:17
Symbol Generator10:30
Source Code: Symbol Generator0:14
Project 8: Pie Chart with Legend - Part 115:22
Project 8: Pie Chart with Legend - Part 212:12
Build a pie chart with a legend in D3 by creating nested g elements, appending rectangles and labels, mapping colors with an ordinal scale, and positioning items.

Introduction to Transitions10:33
Explore how to animate D3.js visualizations with transitions, using interpolation-based animation, the transition method, and options like delay and duration to control color changes across multiple elements.
Source Code: Introduction to Transitions0:10
Control the Speed of Your Animations15:13
Source Code: Control the Speed of Your Animations0:13
Project 9: Animated Bar Chart7:49
Transition Chaining9:34
Source Code: Transition Chaining0:13
Tweening15:42
Learn how tweening controls in-between values during d3.js transitions. Override default interpolation with custom tweens, using interpolate round for integers and style tween for font-size changes.
Source Code: Tweening0:14
Project 10: Moving Stars20:34
Project 11: Make Me Laugh - Part 110:28
Project 11: Make Me Laugh - Part 210:53

Interact using Mouse - Part 113:38
Interact using Mouse - Part 210:50
Build an interactive D3.js pie chart that shows tooltips on mouse down, calculates the percentage, positions the tooltip with absolute left and top, and hides it on mouse up.
Source Code: Interact using Mouse0:40
Make Visualizations Draggable16:13
Source Code: Make Visualizations Draggable0:22
Zoom In and Zoom Out Visualization at Individual Level9:10
Source Code: Zoom In and Zoom Out Visualization at Individual Level0:18
Zoom In and Zoom Out Visualization as a Whole7:25
Apply d3 zoom to the whole visualization by wrapping circles in a g element, overlaying a rectangle, and routing zoom events to the group transform for unified zoom.
Source Code: Zoom In and Zoom Out Visualization as a Whole0:20

Requirements

Basic understanding of HTML, CSS and JavaScript
A text editor and web browser

Description

*** 17 hours of content ***

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

"A picture is worth a thousand words". It is true that concepts are easily understood when explained with the help of diagrams. In today's data-driven world, it is very important to make the best use of available data in such a way that useful insights are derived from it. Data visualization is the easiest and fastest way to make it possible. D3.js is a popular JavaScript library for manipulating documents in the context of data data. D3 stands for Data Driven Documents. D3 helps you bring data to life using HTML, SVG, and CSS.

D3 allows you to bind data to a Document Object Model, and then apply data-driven transformations to the document. Elements can be added, removed, or modified according to the contents of the data set. For example, you can use D3 to generate an HTML table from an array of numbers or even use the same data to create a horizontal bar chart using SVG. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation.

"D3.js in Action: Build 17 D3.js Data Visualization Projects" is a 100% practical hands-on course that teaches you D3.js from scratch using the latest available version V5. All concepts are explained in a very detailed and easily understandable manner. The instructor codes along instead of explaining the concepts with already prepared code samples. By completing this course, you will be confident enough to develop D3.js Data Visualizations on your own from scratch.

As of now, there are 17 projects included in this course that are developed from scratch. This will help you really boost your confidence in applying your D3.js knowledge to develop real-world data visualization projects. The projects developed as part of this course are:

Horizontal Bar Chart
Vertical Bar Chart
Vertical Bar Chart with Axes
Scatterplot
Line Chart
Area Chart
Stacked Area Chart
Pie Chart with Legend
Animated Bar Chart
Moving Stars
Make Me Laugh
Family Tree
Classic Family Tree
Tree with Images
Complete Family Tree
Zoomable Family Tree
Ancestry Chart

So join this wonderful D3.js course and have a great time learning D3.js (V5).

Who this course is for:

Anyone who wants to perform data visualization
Anyone who wants to learn D3 library from scratch
Anyone who wants to explain data with charts and diagrams

D3.js in Action: Build 17 D3.js Data Visualization Projects

What you'll learn

Explore related topics

Course content

Be Familiar with D3.js (Introduction to D3.js)3 lectures • 3min

Primer on Technology Fundamentals (D3.js Prerequisites)10 lectures • 1hr 13min

Be Ready to Start (Basics of D3.js)18 lectures • 1hr 23min

D3.js Data Joins (The Core of D3.js)13 lectures • 1hr 23min

Adjust the Size Up or Down (D3.js Scales)19 lectures • 1hr 55min

Have an Axis for Reference (D3.js Axes)12 lectures • 1hr 51min

Draw Different Shapes (D3.js Shapes)26 lectures • 3hr 33min

Animate Your Visualizations (D3.js Transitions)12 lectures • 1hr 42min

Make Your Visualizations Interactive (Dragging and Zooming)9 lectures • 59min

Deal with External Data in Different Formats3 lectures • 33min

Requirements

Description

Who this course is for: