D3 4.X: Mastering Data Visualization

Create fantastic looking data visualizations using the latest version of D3

What you'll learn

Use D3 to load, manipulate, and map data to any kind of visual representation on the Web

Create data-driven dynamic visualizations that update as the data does

Leverage the various modules provided by D3 to create sophisticated, dynamic, and interactive charts and graphics

Create data-driven transitions and animations within your visualizations

Understand and leverage more advanced concepts such as force and touch

Create a data dashboard with Angular 2

Requirements

A text editor to edit and create HTML, CSS, and JavaScript files

A modern web browser (Firefox 3, IE 9, Chrome, Safari 3.2, and later)

A local HTTP server to host data files for some of the more advanced examples in this course. We will cover how to set up a Node-based and Python-based simple HTTP server in the first section

Optionally, you will need a Git client if you would like to check out the example source code directly from the Git repository

Description

Hi there! If you’re proficient in HTML, CSS, and JavaScript, and want to figure out data visualization for the web, then you’ve come to the right place.
This course is a blend of text, videos, code examples, and assessments, which together makes your learning journey all the more exciting and truly rewarding. It includes sections that form a sequential flow of concepts covering a focused learning path presented in a modular manner. This helps you learn a range of topics at your own speed and also move towards your goal of mastering data visualization with D3.
D3.js is a JavaScript library designed to display digital data in dynamic graphical form. It helps you bring data to life using HTML, SVG, and CSS. D3 allows greater control over the final visual result, and it is the hottest and most powerful web-based data visualization technology in the market today.
This course has been prepared using extensive research and curation skills. Each section adds to the skills learned and helps us to achieve mastery in solving data visualization problems using D3. Every section is modular and can be used as a standalone resource too.
This course has been designed to teach you D3 through the use of practical recipes, a do-as-you-learn approach, to provide you with skills to develop your own cool, neat-looking visualizations.
This course starts with the basic D3 structure and building blocks and quickly moves on to writing idiomatic D3-style JavaScript code. We will learn how to work with selections to target certain visual elements on the page, then we will see techniques to represent data both in programming constructs and its visual metaphor. We will learn how to map values in our data domain to the visual domain using scales, and use the various shape functions supported by D3 to create SVG shapes in visualizations. Moving on, we’ll see how to use and customize various D3 axes and master transitions to add bells and whistles to otherwise dry visualizations. We’ll also learn to work with charts, hierarchy, graphs, and build interactive visualizations. Next we’ll work with force, which is one of the most awe-inspiring techniques we can add to our visualizations. We'll then see how to create a basic Angular 2 application complete with components, services, data and event binding, and a testing infrastructure. We will learn how to integrate D3 into an Angular 2 application. We will build a data dashboard out of flexible Angular 2 components. Finally, we will learn to leverage a few advanced features and functionalities such as incorporating real-time data streams, and adding interactivity and animations.
This course will take you through the most common to the not-so-common techniques to build data visualizations using D3.
This course has been authored by some of the best in their fields:
Nick Zhu
Nick Zhu is a professional programmer and data engineer with more than a decade experience in software development, Big Data, and machine learning. Currently, he is one of the founders and CTO of Yroo - a meta search engine for online shopping. He is also the creator of dc.js — a popular multidimensional charting library built on D3.
Matt Dionis
Matt Dionis has over three years of experience with both Angular and D3.js. He uses D3.js frequently and Angular on a daily basis while building internal tools for a rapidly growing financial technology start-up.

Overview

Section 1: Getting Started with D3.js

Lecture 1 Course Overview

Lecture 2 Setting up a simple D3 development environment

Lecture 3 Setting up an NPM-based D3 development environment

Lecture 4 Understanding D3-style functional JavaScript

Section 2: Be Selective

Lecture 5 Introducing selection

Lecture 6 Selecting a single element

Lecture 7 Selecting multiple elements

Lecture 8 Iterating through a selection

Lecture 9 Performing subselection

Lecture 10 Function chaining

Lecture 11 Manipulating the raw selection

Section 3: Dealing with Data

Lecture 12 The enter-update-exit pattern

Lecture 13 Binding an array as data

Lecture 14 Binding object literals as data

Lecture 15 Binding functions as data

Lecture 16 Working with arrays

Lecture 17 Filtering with data

Lecture 18 Sorting with data

Lecture 19 Loading data from a server

Lecture 20 Asynchronous data loading using queue

Section 4: Tipping the Scales

Lecture 21 Using continuous scales

Lecture 22 Using the time scale

Lecture 23 Using the ordinal scale

Lecture 24 Interpolating a string

Lecture 25 Interpolating colors

Lecture 26 Interpolating compound objects

Section 5: Playing with Axes

Lecture 27 Working with basic axes

Lecture 28 Customizing ticks

Lecture 29 Drawing grid lines

Lecture 30 Dynamic rescaling of axes

Section 6: Transition with Style

Lecture 31 Animating a single element

Lecture 32 Animating multiple elements

Lecture 33 Using ease

Lecture 34 Using tweening

Lecture 35 Using transition chaining

Lecture 36 Using transition filter

Lecture 37 Listening to transitional events

Lecture 38 Working with timers

Section 7: Getting into Shape

Lecture 39 Creating simple shapes

Lecture 40 Using a line generator

Lecture 41 Using a line curve

Lecture 42 Changing the line tension

Lecture 43 Using an area generator

Lecture 44 Using an area curve

Lecture 45 Using an arc generator

Lecture 46 Implementing arc transition

Section 8: Chart Them Up

Lecture 47 Creating a line chart

Lecture 48 Creating an area chart

Lecture 49 Creating a scatterplot chart

Lecture 50 Creating a bubble chart

Lecture 51 Creating a bar chart

Section 9: Lay Them Out

Lecture 52 Building a pie chart

Lecture 53 Building a stacked area chart

Lecture 54 Building a treemap and a tree

Lecture 55 Building an enclosure diagram

Section 10: Interacting with Your Visualization

Lecture 56 Interacting with mouse events

Lecture 57 Interacting with a multi-touch device

Lecture 58 Implementing the zoom, pan, and drag behavior

Section 11: Using Force

Lecture 59 Using gravity and charge

Lecture 60 Customizing velocity

Lecture 61 Setting the link constraint

Lecture 62 Using force to assist visualization

Lecture 63 Manipulating force

Lecture 64 Building a force-directed graph

Section 12: Angular 2 Overview

Lecture 65 Installing project dependencies

Lecture 66 Getting an Angular 2 app up and running

Lecture 67 Modularity in Angular 2 apps

Lecture 68 Understanding components

Lecture 69 Data and event binding

Lecture 70 Services in Angular 2

Lecture 71 Unit tests

Section 13: Building an Angular 2 App

Lecture 72 Angular CLI

Lecture 73 Working with structural directives and class bindings

Lecture 74 Adding services

Lecture 75 Working with Angular 2 forms

Lecture 76 Adding a router

Section 14: Real-Time Data and D3 in Angular 2

Lecture 77 Accessing real-time data through an Express server

Lecture 78 Importing D3 into an Angular 2 project

Lecture 79 Using D3 to display data in real-time

Section 15: Creating D3 Components

Lecture 80 Creating a TweetComponent

Lecture 81 Creating a ScatterplotComponent

Lecture 82 Creating a MapComponent

Lecture 83 Adding interactivity and animations

If you are a developer or an analyst familiar with HTML, CSS, and JavaScript, and you wish to get the most out of D3, then this course is for you. This course is also for data science professionals looking for a web-based visualization toolkit. This course can also serve as a quick-reference guide for experienced data visualization developers.