Mastering D3 JS
2.6 (18 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.
606 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mastering D3 JS to your Wishlist.

Add to Wishlist

Mastering D3 JS

Master the art of creating interesting and effective data visualizations with D3 JS
2.6 (18 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.
606 students enrolled
Created by Packt Publishing
Last updated 5/2015
Current price: $10 Original price: $95 Discount: 89% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create your own D3.js code that you can use for your future projects
  • Use functional programming, time formatting, and parsing to transform data from HTML to a cleaner CSV
  • Scrape and process data from the Web for your app
  • Delve into the intricacies of D3.js to build geography-based visualizations
  • Implement animation like transitions, delays, and timers to make things move in a controlled way
  • Build upon animations to make you react to user input
  • Get some extra help from libraries built on top of D3.js to implement additional features to your app
View Curriculum
  • This video course will help you master D3.js while building a visualization from start to finish. You will learn to implement various features while understanding their value along the way.

Everyone collects data, but few ever understand their data. That's because they need a graph or a diagram to force them to notice what they never expected to see. Data is useless without a picture and D3JS is the workhorse of turning data into pictures. Most charting libraries on the Web rely on it.

Mastering D3JS will show you everything that goes into a data visualization from start to finish. You will learn about the details of using D3JS, structuring and debugging your code, and the logic behind data visualization.

You will start the course with some data and a goal. You will then be guided on the quest of turning that data into an interactive picture for the Web. Following the example, you will master D3 layouts, learn about adding animations and user interaction to make your visualization responsive, scrape more data when needed, and learn about making pretty maps. You will learn to use libraries such as Bootstrap, Figue, and Lo-dash to add those extra features. If an obstacle appears, you will conquer it. Finally you'll learn to debug your code and learn the best practices of this trade. You'll also see some interesting examples of good visualization and information design.

When you finish the course, you will have mastered data visualization with D3JS. You will be an expert!

About the Author

Swizec Teller is a digital nomad and full stack web engineer. He travels the world and helps startups win by setting up new teams, training juniors, and fixing spaghetti code or implementing new features. His code has been used by MasterCard, Commerzbank, Google, Mashable, Lyft, and many others. He previously published a book called Data Visualization with D3JS aimed at people learning D3JS from scratch. For the past few years he's also been working on a project to help programmers be more awesome, called Why Programmers Work at Night. Swizec's work has been featured in Business Insider, LifeHacker, Huffington Post, and several dead-tree magazines. He's spoken on BBC Radio, appeared on Slovenian national television, and given talks all over the world.

Who is the target audience?
  • This video course is for web developers who have built a simple graph or two with D3.js and want to create interesting visualizations with it. Just take out your JavaScript hat and you are good to go.
Compare to Other D3.js Courses
Curriculum For This Course
27 Lectures
4 Lectures 15:33

Layouts look like magic, but they're really not. We will go through what they actually give you.

Preview 03:15

Creating a pie chart involves a lot of calculation of angles that are error-prone and annoying to get right.

Pie Charting Manually

Layouts remove our need to compute positions manually.

Using a Layout

Explore the default layouts, what they're useful for, and how they're organized.
Default D3JS Layouts
Creating Layouts
3 Lectures 16:20
Writing specific code is easier than generalized solutions, so we begin with a sketch of our final idea that we're going to turn into a layout later.
Preview 03:59

Once you have a one-off sketch, you can turn it into a reusable layout fairly easily.
Making Our Code Reusable

Once you've turned your sketch into a layout, all you have to do is make the sample visualization look good.
Final Tweaks
Data Manipulation
3 Lectures 19:36
Working with remote data will slow you down in the initial stages of the project.
Preview 03:58

HTML isn't a great data format, so we transform it into the cleaner CSV format.
Parsing and Cleaning the Data

Functional style coding is important, but it is time to look at why it is important and how it helps.
Scope and Functional Style Coding
3 Lectures 23:21
Every geographical visualization begins with a map. We're going to draw the US map in a few easy steps.
Preview 05:37

We've got a nice map, now it just needs some data. We'll use our UFO dataset to show where sightings happen in the US.
Adding Data to a Map

There's geo data and then there's geo data. We will walk through some different formats while improving our UFO map further.
Geo Data
Creating Animations
4 Lectures 21:05
Our code has gotten messy and we'll have more fun working with it after some cleanup.
Preview 02:36

The basic way to animate is to change the drawing every couple of milliseconds.

Animating with Timers

To create a more reliable animation, we have to take into account how long rendering a keyframe takes.
Delta-based Animations

When you don't need to control everything about an animation, using a transition is easier.
Transitions and Easing
4 Lectures 30:59
We want to give users control over the animation, but we have dug a few holes for ourselves.
Preview 08:07

Not everyone's got the patience to wait for our animation; give them the option to explore.
User Animation Controls

It would be cool to see which sightings contribute to a particular centroid's size.

More Interactions

There are a couple of things you should take into account to embrace mobile users.
Making the Visualization Responsive
Debugging and Best Practices
3 Lectures 18:18
You spend 10 times more time reading code than writing it; you should optimize this.
Preview 06:45

A look at some strategies to debug code that isn't intuitively obvious to understand.
Debugging the D3.js Code

D3 is a great base library, but there's a lot that a normal project will use and it makes sense to get some extra help.
Helpful Libraries
Visualization Design Primer
3 Lectures 17:14

To create a great visualization, you have to understand why you're creating one.

Preview 05:01

A lot of great visualizations suffer from some pretty basic flaws that make them less shiny than they deserve to be.
Going from meh to wow

The best way to get good ideas is to see what others have done. We look at some awesome visualizations to find inspiration.

Some of My Favorite Visualizations
About the Instructor
Packt Publishing
3.9 Average rating
8,197 Reviews
58,896 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.