Introduction to D3.js
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
Shirley Wu introduces the course material, explains that D3 is going to be the main JavaScript library used in this course, and mentions that this course will give students a solid understanding of Scalable Vector Graphics (SVG).
D3.js Ecosystem & Resources
Shirley gives an overview of the main lessons and takeaways of the course, and outlines a few resources for working with the D3.js library used in the course.
SVG
SVG vs HTML5 Canvas
Shirley discusses the main differences between Scalable Vector Graphic (SVG) and Canvas HTML, explains when it is best practice to use each, and answers a student question regarding transforming illustrator files into SVG files.
SVG Viewport & Coordinates
Shirley defines the SVG viewport as a window that has a width and a height, explains that x coordinate value increases going right and y value increases going down, and covers a few examples of the most popular SVG elements and their attributes.
SVG Path Commands
Shirley breaks down drawing a flower petal in SVG into a step by step process, and explains the different commands contained within the SVG attributes, namely move to, line to, and curve to.
Draw an SVG Shape by Hand Practice
Shirley demonstrates how to create an SVG path using the example of a smiley face, and utilizing the move to, line to, and curve to attributes.
SVG Shape Exercise
Students are instructed to create a flower petal by first sketching it on paper, and then writing down an SVG path.
SVG Shape Solution
Shirley shares a possible solution to the SVG Shape exercise created by one of the students.
API
API Overview
Shirley explains that D3 is a comprehensive library for manipulating documents based on data and shares three main sections of the library the course focuses on: DOM manipulation, forces, and finishing touches.
Selections
Shirley explores two different D3 selections, select() and selectAll(), and demonstrates what a D3 selection looks like under the hood, which is useful to know when debugging an SVG. A few selection methods that either take in a selector string or a DOM element and returns a D3.js selection are reviewed in this segment.
Data Binding
Shirley demonstrates how to bind data to selectors, explores different ways to bind data to selectors, and explains how that changes the SVG.
attr & style
Shirley explains that once data bounds have been selected, developers can use them within a DOM element using the .attr() and .style() methods that set either the attribute or the CSS styles on elements. How to add attributes and styles to an SVG is also demonstrated.
attr & style Practice
Shirley demonstrates how to use attribute and style methods along with data binding to modify or create an SVG.
attr & style Exercise
Students are instructed to add colors to the petals created in a previous segment by modifying the attributes and styles of the SVG.
attr & style Solution
Shirley live codes the solution to the attr & style exercise.
Creating DOM Elements from Data
Shirley reminds students that D3.js stands for data-driven documents because data drives what is created in the DOM. Covered in this segment is why the selector in selectAll(selector) must match what is appended, a breakdown of how D3 returns .data(data), and an explanation of how .enter() contains five
Creating DOM Elements from Data Exercise
Students are instructed to create a flower petal for each movie, color the petals by movie genre, and select the type of petal by parental rating.
Creating DOM Elements from Data Solution
Shirley live codes the solution to the previous exercise after answering questions about the type of data passed into the DOM within the array, and about the width and height that are set up when creating an SVG.
Translate & Position
Shirley explores the translate() method of transformation, and explains that using translate() modifies the coordinates of that element, and adds that translate is useful when positioning an element with precision.
Specifications
Data Types & Visual Channels
Shirley explains that D3.js scale functions can be used to translate raw data into visual channels, and shares some examples of visual channels such as position, size, color, and shape. Examples of data types are also shared in this segment, namely quantitative, temporal, spacial, nominal, and ordinal data types.
Scales
Shirley shares examples of the most commonly used scales that translate data types into visual channels, and explains when and how to use them.
Using D3.js Scales
Shirley breaks down the process of adding scale to an element using the select, selectAll, data, enter, and append methods. Scales transform data values into visual variables.
Scales Exercise
Students are instructed to render movies into the visual channels by converting the raw movies data including genre, ratings, and votes into the visual channels.
Scales Solution
Shirley live codes the solution to the Scales exercise.
Translate & Scale
Shirley explains that it is best practice to first translate the element and then scale afterwards, and adds that the order in which translate and scale are used within transforms is important. The order of the coordinates is important when using scales, because it determines where an element is placed.
Group Elements
What Are Group Elements
Shirley explains that group elements are used to amass other elements together, making them easier to manipulate, and demonstrates how to build a group element.
Passing a Function to .data()
Shirley explains that each film flower has a different number of petals depending on the data used to generate that flower, and adds that to create the correct number of paths, developers can use the selection pattern shared in examples from the previous lesson. The fact that .data() accepts functions and that functions return an array of objects is also discussed in this section.
Group Elements Practice
Shirley live codes an example of a group element within an SVG, uses the .select().selectAll().data().enter().append(g) pattern, and adds a path and colors to the SVG.
Using .data() to Draw Text
Shirley continues to live code the previous SVG example by adding a text element to the code to render movie titles, and modifies some of the styles to make the titles more readable.
Rotate
Shirley explorers rotate, one of the SVG transform methods, and demonstrates how to rotate around an SVG by changing the x and y coordinates.
DOM Manipulation
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
Transitions
Shirley explains that D3 transitions are how attributes and styles are animated from one state to the next, adds that transitions are important in data visualization because they maintain object constancy, meaning they record all of the visual updates happening from the first data set to the last one.
Animate with Transitions Exercise
Students are instructed to add transitions to animate the bar chart started in the previous lesson so that entering bars animate up, updating bars animate to their new positions, and exiting bars animate back down.
Animate with Transitions Solution
Shirley live codes the solution to the animate with transitions exercise.
Filtering & Updating Data Exercise
Students are instructed to use .join() to update the flower display every time the movies are filtered, and to add animations so that on every update, the entering flowers fade in, the updating flowers animate to their new positions, the exiting flowers fade out.
Filtering & Updating Data Solution: Filter & Update
Shirley live codes the solution to the Filtering & Updating data exercise.
Filtering & Updating Data Solution: Animate
Shirley continues live coding the solution to the Filtering and Updating Data exercise by adding animation to the list of flowers filtered by parental guidance ratings.
Positioning Functions
Shape
Shirley introduces D3 shape functions, which help calculate the path strings that are needed to draw line charts, area charts, and pie charts. Shapes take in raw data and return path strings.
Hierarchy
Shirley explains that D3 hierarchy is a nested data structure that helps calculate the x, y-positions and, when applicable, the width, height, radius for trees, tree maps, and circle maps. D3 hierarchy takes in raw data and return new objects using functions without mutating the original data.
Force Layout
Shirley explains that the D3 force layout is a layout module that is different from other modules because it mutates the data that is passed in, and requires thousands of calculations instead of a single one.
Force Examples
Shirley explores various force layout examples, such as data visualization of the Hamilton musical that uses the force layout to group lyrics from the same song together, and a data visualization of how a pandemic might spread through a community. The example uses D3 force to link dots to specific houses within a community.
Force Practice: Graph Calculation
Shirley demonstrates how raw data is translated into flowers that represent movies, with titles, genres, and links between movies with similar genres.
Force Practice: Using D3 Force & Position
Shirley demonstrates how to add animation to the graph developed in the first part of the Force Practice segment by using the D3 force layout.
D3 & HTML
Bar Chart Visualization & HTML
Shirley copies the D3 bar chart code written in a previous segment, moves it into an HTML file, and demonstrates how to refactor the file so that the D3 bar chart is rendered.
Flower Visualization & HTML: Refactoring the Code
Shirley copies the D3 movie visualizations code representing movies as flowers within an HTML file, and refactors the code to render the visualization.
Flower Visualization & HTML: Adding the Width & Height
Shirley refactors the code by adding the proper width and height to the D3 data visualization example started in the previous segment.
