Mastering D3 JS

Master the art of creating interesting and effective data visualizations with D3 JS
2.6 (14 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.
560 students enrolled
84% off
Take This Course
  • Lectures 27
  • Length 2.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 English

Course Description

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.

What are the requirements?

  • 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.

What am I going to get from this course?

  • 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

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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Layouts

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


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


Layouts remove our need to compute positions manually.

Explore the default layouts, what they're useful for, and how they're organized.
Section 2: Creating Layouts
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.
Once you have a one-off sketch, you can turn it into a reusable layout fairly easily.
Once you've turned your sketch into a layout, all you have to do is make the sample visualization look good.
Section 3: Data Manipulation
Working with remote data will slow you down in the initial stages of the project.
HTML isn't a great data format, so we transform it into the cleaner CSV format.
Functional style coding is important, but it is time to look at why it is important and how it helps.
Section 4: Geography
Every geographical visualization begins with a map. We're going to draw the US map in a few easy steps.
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.
There's geo data and then there's geo data. We will walk through some different formats while improving our UFO map further.
Section 5: Creating Animations
Our code has gotten messy and we'll have more fun working with it after some cleanup.

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

To create a more reliable animation, we have to take into account how long rendering a keyframe takes.
When you don't need to control everything about an animation, using a transition is easier.
Section 6: Interactivity
We want to give users control over the animation, but we have dug a few holes for ourselves.
Not everyone's got the patience to wait for our animation; give them the option to explore.

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

There are a couple of things you should take into account to embrace mobile users.
Section 7: Debugging and Best Practices
You spend 10 times more time reading code than writing it; you should optimize this.
A look at some strategies to debug code that isn't intuitively obvious to understand.
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.
Section 8: Visualization Design Primer

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

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

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, 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.

Ready to start learning?
Take This Course