Mastering D3 JS
2.8 (16 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.
572 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.8 (16 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.
572 students enrolled
Last updated 5/2015
English
Current price: $10 Original price: $95 Discount: 89% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
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
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.
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.

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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 27 Lectures Collapse All 27 Lectures 02:42:26
+
Layouts
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
04:29

Layouts remove our need to compute positions manually.

Using a Layout
03:01

Explore the default layouts, what they're useful for, and how they're organized.
Default D3JS Layouts
04:48
+
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
08:27

Once you've turned your sketch into a layout, all you have to do is make the sample visualization look good.
Final Tweaks
03:54
+
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
07:25

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
08:13
+
Geography
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
06:35

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
11:09
+
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
07:35

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

When you don't need to control everything about an animation, using a transition is easier.
Transitions and Easing
07:49
+
Interactivity
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
08:26

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

More Interactions
05:27

There are a couple of things you should take into account to embrace mobile users.
Making the Visualization Responsive
08:59
+
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
06:39

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
04:54
+
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
05:49

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
06:24
About the Instructor
Packt Publishing
3.9 Average rating
4,028 Reviews
32,364 Students
318 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.