Introduction to D3
2.3 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
8 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Introduction to D3 to your Wishlist.

Add to Wishlist

Introduction to D3

Find solutions to strategize your visualizations to tackle tedious data
2.3 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
8 students enrolled
Created by Packt Publishing
Last updated 5/2017
English
Current price: $10 Original price: $125 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build a modern single-page web application
  • Understand the workflow of an Aurelia application
  • Design reusable web components, which can be shared and integrated into various frameworks and libraries
  • Write clean, modular, and testable code that will be easy to maintain and evolve
  • Use all the latest–and even future–web standards, so the application gathers minimal technical debt
View Curriculum
Requirements
  • This course is designed to provide you with all the guidance you need to get to grips with data visualization with D3. 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 can also serve as a desktop quick-reference guide for experienced data visualization developers.
  • The software requirements for this course are:
  • 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 file
  • Optionally, you will need a Git client if you would like to check out the source code directly from our Git repository
Description

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 on the market today. This course is completely updated to cover and leverage the D3 v4 API, modular data structure, as well as revamped force implemented.

This video gives you all the guidance you need to start creating modern data visualizations with D3 4.x that take advantage of the latest capabilities of JavaScript. The video starts with the basic D3 structure and building blocks and quickly moves on to writing idiomatic D3-style JavaScript code. 

About The Author

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 Yroocom - meta search engine for online shopping. He is also the creator of dc.js—a popular multidimensional charting library built on D3.

Who is the target audience?
  • This course is designed to provide you with all the guidance you need to get to grips with data visualization with D3. 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 can also serve as a desktop quick-reference guide for experienced data visualization developers.
Compare to Other D3.js Courses
Curriculum For This Course
20 Lectures
01:14:44
+
Getting Started with D3.js
4 Lectures 20:12

This video gives an overview of the entire course.

Preview 01:42

The first thing you will need when you start a D3-powered data visualization project is a working development environment. Let’s see how a simple D3 development environment can be set up.

Setting Up a Simple D3 Development Environment
03:56

When you work on a more complex data visualization project that requires the use of a number of JavaScript libraries, the simple solution we discussed before might become a bit clumsy and unwieldy. This video will demonstrate an improved setup using Node Packaged Modules (NPM).

Setting Up an NPM-Based Development Environment
06:25

D3 is designed and built using functional style JavaScript, which might come as a bit unfamiliar or even alien to someone who is more comfortable with the procedural or object-oriented JavaScript styles. This video is designed to cover some of the most fundamental concepts in functional JavaScript.

Understanding D3-Style JavaScript
08:09
+
Be Selective
7 Lectures 23:01

Selector support is standardized by W3C, so all modern web browsers have built-in support for the selector API. In this video, we will cover how D3's selection API works and some of its powerful features.

Preview 04:04

It is very common that at times you will need to select a single element on a page to perform some visual manipulation. Let’s see how to perform a targeted single element selection in D3 using a CSS selector.

Selecting a Single Element
03:10

Often selecting a single element is not good enough, but rather you want to apply a certain change to a set of elements on the page simultaneously. Let’s play with the D3 multi-element selector and its selection API.

Selecting Multiple Elements
02:04

Sometimes it is handy to be able to iterate through each element within a selection and modify each element differently according to their position. This video shows us how this can be achieved using D3 selection iteration API.

Iterating Through a Selection
03:17

It is quite common that you will need to perform scoped selection when working on visualization. For example, selecting all div elements within a particular section element is one such use case of scoped selection. In this video, we will demonstrate how this can be achieved.

Performing Subselection
04:48

As we have seen so far, the D3 API is completely designed around the idea of function chaining. Therefore, it forms a DSL for building HTML/SVG elements dynamically. Let’s explore how the entire body structure can be constructed using D3 alone.

Function Chaining
02:51

Sometimes, having access to the D3 raw selection array might be beneficial in development whether it's for debugging purposes or for integrating with other JavaScript libraries, which require access to raw DOM elements. This video will show us ways to do that.

Manipulating the Raw Selection
02:47
+
Dealing with Data
9 Lectures 31:31

The task of matching each datum with its visual representation seems to be a complicated and tedious task. Let’s see how the enter-update-exit pattern helps us solve this.

Preview 06:06

One of the most common and popular ways to define data in D3 visualization is through the use of JavaScript arrays. This video shows how we can get visualization to reflect changes.

Binding an Array as Data
05:31

With a more complex visualization, each element we have in a data array might not be a primitive integer value or a string, but a JavaScript object itself. We’ll explore how this more complex data structure can drive visualization.

Binding Object Literals as Data
02:15

One of the benefits of D3's excellent support for functional-style JavaScript programming is that it allows functions to be treated as data as well. This is a more advanced video.

Binding Functions as Data
02:59

Most of our data is stored in arrays, and we spend a lot of our effort working with arrays to format and restructure data. This is why D3 provides a rich set of array-oriented utilities functions, making this task a lot easier.

Working with Arrays
03:17

Imagine you need to filter D3 selection based on the associated data elements so that you can hide or show different sub-datasets based on the user's input. D3 selection provides a filter function to perform this kind of data-driven filtering.

Filtering with Data
02:11

In many cases, it is desirable to sort your visual elements according to the data they represent so that you can highlight the significance of different elements visually. In this video, we will explore how this can be achieved in D3.

Sorting with Data
02:11

It is probably very rare that you will only be visualizing static local data. The power of data visualization usually lies in the ability to visualize dynamic data typically generated by a server-side program.

Loading Data from a Server
02:24

In this video, we will demonstrate another very useful technique commonly used to process or generate data in large data visualization projects. It is usually necessary in complex visualization projects to load and merge multiple datasets from different sources before proceeding to visualizing.

Asynchronous Data Loading Using Queue
04:37
About the Instructor
Packt Publishing
3.9 Average rating
8,197 Reviews
58,910 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.