Introduction to D3.js

Shirley Wu

Shirley Wu

Data Sketches
5 hours, 59 minutes CC
Introduction to D3.js

Course Description

Learn D3.js, a JavaScript library for producing dynamic, interactive data visualizations on the web. D3.js can be intimidating, so this is a fun, approachable introduction to SVG and D3! In this course, you'll get hands-on experience with data binding and learn how it works with the enter-update-exit pattern, build a full chart with scales, and learn to animate between different D3 layouts for truly interactive visualizations – bring your data to life!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: September 25, 2020

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 18 minutes

SVG

Section Duration: 45 minutes

API

Section Duration: 1 hour, 1 minute

Specifications

Section Duration: 37 minutes

Group Elements

Section Duration: 35 minutes

DOM Manipulation

Section Duration: 25 minutes
  • Enter-Update-Exit Pattern
    Shirley explains that the .data() function not only binds data to a selection and calculates the enter selection, it also calculates the update and exit selection, with the help of a key function. How to use the enter-update-exit pattern when modifying an SVG element is also discussed in this segment.
  • Join vs Enter-Update
    Shirley explains that there are two valid ways to update the DOM that lead to the same result. There is an old way that consists in using the .exit() method and removing elements that are no longer needed, and creating new elements. The new way uses the .join() method, which is the equivalent of running both enter and exit methods, and therefore saves lines of code.
  • Enter-Update Exercise
    Students are instructed to use the enter-update pattern to create a simple bar chart using both the old way and new way of updating data discussed in the previous segment.
  • Enter-Update Solution
    Shirley live codes the solution to the Enter Update exercise, and explains that the enter-update pattern is a powerful tool when combined with transitions that are discussed in the next section.

Transitions

Section Duration: 52 minutes

Positioning Functions

Section Duration: 41 minutes

D3 & HTML

Section Duration: 27 minutes

Wrapping Up

Section Duration: 12 minutes
  • Wrapping Up
    Shirley answers questions from the audience about available sites to find open data, how to use canvas with SVG, and shares other courses available on Frontend Masters for students to further their knowledge in D3, and thanks the students.
If you're like me and struggling with the basics of D3.js I strongly advise you to consider taking this course Introduction to D3.js by Shirley Wu. I lost count of the amount of "aha moments" I had.
Justin

Justin

JFrazierDev

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now