Interactive Data Visualization with D3.js

Interactive Data Visualization with D3.js

Год выпуска: 2013
Производитель: frontendmasters
производителя: frontendmasters/courses/interactive-data-visualization-d3-js/
Автор: Ian Johnson
Продолжительность: 5 hours, 30 min
Тип раздаваемого материала: Видеоклипы
Язык: Английский
Описание: We've updated this course to d3.js v4 with Shirley Wu! We recommend you go there. Ian Johnson, the organizer of Bay Area d3 (the largest d3 meetup in the world), starts with SVG and then dives deep into d3 including DOM manipulation, categorical and quantitative scales, axis, brushes, color schemes, events and histograms. Make sense of your data by exploring it visually with D3.js!
Presentation, Links and Examples -

Содержание
Table of Contents
Pre-Game
Introduction

00:00:00 - 00:11:45
Introduction
Ian begins the course by discussing a number of resources he's posted on his GitHub account. These include Tributary.io, Bl.ocks, and the use of reddit's data API. Both Tributary and Blocks are great places to post code when experimenting with D3. Ian also demonstrates the visualization project being built throughout this course
Course Topics

00:11:46 - 00:16:49
Course Topics
There will be six sections to this course. An SVG overview, a look at the binding and non-binding APIs, reusable charts, application patterns, and finally some useful links and resources.
Using Data

00:16:50 - 00:22:28
Using Data
In order to build a visualization project, you need data. Tributary allows you to include datasets without incorporating AJAX request. Ian looks a couple examples he's created that demonstrate the inclusion of Reddit's datasets.
SVG Overview
SVG Overview

00:22:29 - 00:32:09
SVG Overview
SVG is a declarative XML web standard for creating graphics. Ian walks through a brief overview of SVG. This includes circles, rectangles, paths, and groups. Hey also field a few questions about using D3 with libraries like Rafael.
Binding API
append(), select(), and selectAll()

00:32:10 - 00:39:20
append(), select(), and selectAll()
The append method will allows you to add D3 elements to DOM elements. The select method is similar to the jQuery '$'. It allows you to target specific DOM elements in the browser. The selectAll method is useful for data binding. It allows you to target multiple DOM elements at once and provide them with data.
enter() and exit()

00:39:21 - 00:45:50
enter() and exit()
The enter and exit methods are called DOM elements are added and removed from the dataset. Developers can use these methods to modify the DOM to reflect the change in data.
transition() and DOM events

00:45:06 - 00:50:37
transition() and DOM events
Transitions can be added to any selection by chaining the transition() method. Methods like delay() and duration() can also be added to adjust the transition. Using the on() method allows you to handle events like the click event. The handler is passed a reference to the individual element and it's dataset.
Code Demo: SVG Circles

00:49:27 - 00:56:20
Code Demo: SVG Circles
Ian codes an example that adds SVG circles for each Reddit post in the dataset. He also groups them so they can be moved together.
Non-Binding API
Quantitative Scales

00:56:21 - 01:07:25
Quantitative Scales
D3 contains helper methods like scale() that will preform mathematical operations on the dataset allowing the data to be scaled into a physical range. For example, taking a dataset consisting of values between 0-3000 and displaying them in a 500 pixel area.
Categorical Scales

01:07:26 - 01:20:36
Categorical Scales
Categorical scales adjust the positioning of items. They are useful when a certain number of items must spaced evenly in a region. Ian create a bar chart to demonstrate using these categorical scales.
Axis Generator

01:20:37 - 01:30:57
Axis Generator
An axis in D3 is a visual representation of a scale. The ticks included on the axis can be automatically included or hard-coded.
Line Generator

01:30:58 - 01:38:47
Line Generator
The line generator will generate an SVG path based on the dataset. To demonstrate this, Ian draws a line chart on top of the bar chart created in the previous example.
Brush Generator

01:38:48 - 01:49:36
Brush Generator
The brush generator highlights an area within the dataset. Similar to the axis, it uses a scale and range to define the region of coverage.
Brush Generator, cont.

01:49:37 - 02:02:27
Brush Generator, cont.
Ian continues his coding of the brush generator. His next task is to show when the posts happen on top of the brush. He'll add this additional context by drawing graphics on the brush.
Histogram Layout

02:02:28 - 02:08:00
Histogram Layout
Layouts are data processing tools that convert data into a more friendly format. The key concept is that they manipulate data and not DOM elements. The histogram layout organizing data into distributions.
Audience Questions and AJAX

02:08:01 - 02:14:51
Audience Questions and AJAX
Ian field a few questions from the audience regarding the brush generator example. During the process of answering the questions, Ian demonstrates a color scale and address D3's AJAX convenience methods.
Reusable Charts
Creating Tables

02:14:52 - 02:22:16
Creating Tables
D3 Tables can quickly create a customizable table of data. They can be used to create traditional HTML DOM elements.
Adding Columns

02:22:17 - 02:29:01
Adding Columns
Using the append() method, Ian adds columns to each row in they table. Each column will contain a different piece of data from the dataset.
Audience Questions

02:29:02 - 02:38:10
Audience Questions
Ian answers a few questions about the differences between Tributary and jsFiddle and working with image maps in D3.
Application Patterns
Moving Code from Tributary

02:38:11 - 02:42:50
Moving Code from Tributary
Ian begins by discussing how to move code from Tributary into a real-world project. Each data visualization element from Tributary will become a reusable component in the application. Ian begins bootstrapping the application and initializing the display object. He uses D3's json() method to access the Reddit service and populate the data object.
Creating the Table

02:42:51 - 02:53:21
Creating the Table
Each visualization is going to be moved into it's own component. Ian starts with the table.
Making a Chart Reusable

02:53:22 - 03:03:23
Making a Chart Reusable
While moving the table to an individual component, Ian discusses the process of making a completely reusable chart. The chart's constructor function returns a reference to it to enable chaining.
Moving to GitHub

03:03:24 - 03:11:11
Moving to GitHub
Ian takes a quick break from coding to move the project to a GitHub gist so each iteration can be committed.
Creating the Scatter Plot

03:11:12 - 03:21:45
Creating the Scatter Plot
Now that we have a reusable table chart, the next task is to recreate the scatter plot. Ian copies in his code from Tributary, replaces the bars with circles and makes the code reusable.
Creating the Brush

03:21:46 - 03:29:13
Creating the Brush
Ian ports the Brush code from Tributary into the application. During the port, he strips out any of the data calls and adjusts the sizing to be based on the chart's parameters.
Adjusting the layout

03:29:14 - 03:37:24
Adjusting the layout
Now that the table, scatter plot, and brush are in place, Ian does some tweaking of the layout. He also adds an axis to the brush.
Connecting the Charts
Event Dispatching

03:37:25 - 03:42:41
Event Dispatching
In order to update one chart when another is modified, the charts need to utilize custom events. Custom events encapsulate the functionality and all for greater reusability.
Connecting the Charts

03:42:42 - 03:52:03
Connecting the Charts
Ian begins binding the chart interactions with each other. The scatter plot should only show data for the range displayed in the brush. To do this, he sets up an event listener in the main application to listen for changes in the brush.
Creating a Rendering Function

03:52:04 - 04:02:32
Creating a Rendering Function
A better method for updating the vis