Mapping and Styling in D3
1.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.
4 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mapping and Styling in D3 to your Wishlist.

Add to Wishlist

Mapping and Styling in D3

Find ways to work in the visual domain to perform transitions and animation.
1.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.
4 students enrolled
Created by Packt Publishing
Last updated 8/2017
English
Current price: $10 Original price: $125 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1 hour on-demand video
  • 1 Supplemental Resource
  • 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.

In this course, you will learn how to map values in your 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, you’ll see how to use and customize various D3 axes and master transition to add bells and whistles to otherwise dry visualizations. 

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?
  • 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
+
Tipping the Scales
7 Lectures 20:56

This video gives an overview of the entire course.     

Preview 01:46

Most commonly used scales are continuous scales that map a continuous quantitative domain to a continuous range, including linear, power, logarithmic, and time scales.

Preview 05:02

You will learn how to use the D3 time scale so as to create visualization on a dataset that has time and date dimensions.

Using the Time Scale
02:45

In some cases, we may need to map our data to some ordinal values, so, here you will learn how to do it.

Using the Ordinal Scale
03:12

In some cases, you might need to interpolate numbers embedded in a string; perhaps, a CSS style for font, so, here we will deal with this.

Interpolating a String
02:20

It is sometimes necessary to interpolate colors when you interpolate values that do not contain numbers but rather RGB or the HSL color code.

Interpolating Colors
02:44

There will be cases when what you need to interpolate in your visualization is not a simple value, but rather an object consisting of multiple and different values. D3 has built-in support for this type of compound object interpolation.

Interpolating Compound Objects
03:07
+
Playing with Axes
4 Lectures 12:18

We will focus on introducing the basic concepts and supports of the Axis component in D3 while we cover different types and features of Axis as well as their SVG structures.

Preview 04:22

We will cover some of the most common and useful ticks-related customizations with D3 axis.

Customizing Ticks
01:48

Quite often, we will need horizontal and vertical grid lines to be drawn in consistency with the ticks on both x and y axes. Let’s explore some useful techniques for drawing consistent grid lines on Axis without actually needing to know the tick values.

Drawing Grid Lines
03:23

In some cases, the scale used by axes might change when triggered by user interaction or changes from data feeds. For example, a user may change the time range for the visualization. This video shows how rescaling can be achieved dynamically while also redrawing the grid lines associated with each tick.

Dynamic Rescaling of Axes
02:45
+
Transition with Style
8 Lectures 23:28

In this video, we will first take a look at the simplest case of transition-interpolating attributes on a single element over time to produce a simple animation.

Preview 03:17

More elaborate data visualization requires animating multiple elements instead of a single element, as demonstrated in the previous video. Let’s see how a data-driven multi-element transition can be created to generate a moving bar chart.

Animating Multiple Elements
04:15

D3 provides support for different types of easing capabilities, and in this video, we will explore different built-in D3 easing functions, as well as how to implement custom easing functions with D3 transition.

Using Ease
03:30

This phrase is borrowed in modern computer-generated animation and refers to the technique or algorithm that controls how the in between frames are generated. In this video, we will examine how the D3 transition supports tweening.

Using Tweening
02:34

The first four videos in this section were focused on single transition controls in D3, including custom easing and tweening functions. However, sometimes, regardless of how much easing or tweening you do, a single transition is just not enough. This video shows exactly how transition chaining can be achieved using transition chaining.

Using Transition Chaining
01:54

Under some circumstances, you might find it necessary to selectively apply transition to a subset of a certain selection. In this video, we will explore this effect using data-driven transition filtering techniques.

Using Transition Filter
02:20

Transition chaining gives you the ability to trigger secondary transitions after the initial transition reach its completion state; however, sometimes you might need to trigger certain actions other than a transition, or maybe do something else during the transition. This is what transition event listeners are designed for.

Listening to Transitional Events
02:10

So far in this section, we discussed various topics on D3 transition. At this point, you might be asking the question, What is powering D3 transition that is generating the animated frames? This video shows a low-level D3 timer function that you can leverage to create your own custom animation from scratch.

Working with Timer
03:28
About the Instructor
Packt Publishing
3.9 Average rating
7,219 Reviews
51,628 Students
616 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.