Building Interactive Data Visualizations with D3JS
3.7 (36 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.
424 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building Interactive Data Visualizations with D3JS to your Wishlist.

Add to Wishlist

Building Interactive Data Visualizations with D3JS

Create engaging data-driven and interactive visualizations to display complex data using D3JS
3.7 (36 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.
424 students enrolled
Created by Packt Publishing
Last updated 8/2016
Current price: $10 Original price: $85 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand the importance of using visual elements to simplify and derive meaning from data
  • Use the Enter/Update/Exit design pattern effectively
  • Learn to create custom visualizations
  • Incorporate user input for dynamic visualization engines.
  • Introduce transitions and animations to highlight changes when data is updated
  • Discover different techniques for visually encoding information in graphics
  • Master interactions with public APIs to pull in data from external sources
View Curriculum
  • For this course you will require basic knowledge of HTML, CSS, and JavaScript. It is not a prerequisite to have formal training in programming.

D3JS is a JavaScript library that enables data to drive interactive graphical forms and makes complex data analysis easier. Nowadays, big data, data deluge, and analytics are all trending buzzwords, so how does D3JS make sense of all this data? Simply by using visualizations and defining rules for dynamic graphics engines, which allows users to gain rich insights from large and complex datasets.

Building Interactive Data Visualization with D3JS showcases the D3 JavaScript library built specifically for the use of driving visual elements with data. This video course will walk you through the basics of the library by showing its core components and methodologies. By following along with the examples in this video you'll become proficient at creating dynamic visualizations driven by user interactivity.

This course starts with the very basics of frontend web development showing the challenges of incorporating dynamic graphics without using D3. Users learn to combine data with visual elements on the page to create informative visualizations. By the end of this section, viewers will be comfortable with using the D3 library to create their own custom concept of data-driven visualizations.

We'll see how to use real datasets via APIs to create custom visualizations. By leveraging the interactive nature of web programming we'll look at how to incorporate user input to add interactivity to our visualization. We'll start with basic scatter plots and slowly build upon this foundation to create more complicated forms of dynamic data visualizations. Eventually we'll end the video course by walking through the process of creating a completely novel form of visualization merging concepts of both a scatter plot and a geographic map.

Building Interactive Data Visualization with D3JS provides one with the foundation to continue on their journey of creating novel and highly impactful data visualizations.

About The Authors

Alex Simoes is a co-founder of the data visualization company Datawheel. He is a graduate at the MIT Media Lab where he worked to develop data decision making tools using visual techniques to explore big datasets. As part of his Master's thesis he developed The Observatory of Economic Development, a website used to visualize world trade flows with 50 years' worth of data from more than 200 countries and 2000 products. Alex is focused on using and contributing to open source projects including D3plus, an extension to the D3 library that allows for fast and easy creation of online data visualizations. He is focused on developing novel visualization techniques to aid decision-making in all fields.

Michael Westbay graduated from San Diego State University with a BS degree in computer science and a minor in Japanese studies. Upon graduation, he moved to Japan to work for a software company, mainly dealing with databases. After 15 years at that company, he started working independently, connecting databases and web technologies.

Most of what Michael has written has been about Japanese baseball. He started a blog (before blogs were common) in 1995. That eventually led to writing a column for a Japanese baseball magazine for a couple of years. He relied heavily on his own baseball database for the article.

He was an early adopter of Netscape Navigator 2.0's JavaScript, seeing the potential of dynamic pages early on. Unfortunately, his experience in dealing with IE 4 on a time card system in 1997 soured his opinion on JavaScript for a number of years. He then concentrated on server-side technologies and had a number of articles published in Japanese web and database periodicals.

As third-party JavaScript frameworks conquered the incompatibilities, Microsoft built their own version of ECMAScript. Michael slowly came back to the dynamic scripting scene. jQuery and its ecosystem of plugins won him back full time, but it doesn't compare to the power and elegance of D3JS. Crossfilter and dcJS look like the next step in his never-ending pursuit of knowledge. This is Michael's second video course about D3JS, following the success of his Rapid D3jscourse.

Who is the target audience?
  • If you are interested in presenting your data with aesthetically appealing visualizations, this course is for you.
Compare to Other D3.js Courses
Curriculum For This Course
31 Lectures
Getting Started
4 Lectures 23:49
This video will offer the overview of the course.
Preview 04:57

For much of D3's functionality, a web server is necessary for both developing and serving. We will get a simple HTTP server running to test and serve D3JS pages.

Downloading D3JS and Getting the Server Running

Debugging web applications can be complicated as one often needs to know the values of variables at certain times of execution. We can use console.log() to print statements to the browser's console to explore the changing state of our programs.

Console to the Rescue

The main functionality of D3JS is to manipulate the DOM (Document Object Model). So, we learn how to select elements and manipulate their styles and attributes both with low-level JavaScript and higher-level D3JS functions.

Raw JavaScript Versus D3JS
Binding Data to HTML Elements
3 Lectures 17:07

It's important to plan out how you expect your page to look and behave before you start to code it. We'll take a look at what our intentions are and plan accordingly.

Preview 05:56

It's a good practice to use static data before appending new elements to the page to help understand how your page will look. We do this by pasting multiple copies of the same static elements to test our design.

Entering Our Data

Color is an effective means of quickly representing data. We apply this to our dataset by color-coding our "ease of use" variable.

Dynamic Color Range
Using SVG
3 Lectures 19:02

SVG can be used in all modern browsers. We take a look at how to create SVGs by hand.

Preview 06:34

SVG graphics are powerful but take a bit of learning to understand how they work. We will look at how to use some of these advanced features.

Advanced SVG

We will need to manipulate our SVG shapes based on data. We can perform this task with JavaScript, specifically, the D3JS library.

Using D3JS to Render SVG
Entering, Updating, and Exiting with Data and SVG Shapes
4 Lectures 18:03

Oftentimes, we will need to add an undisclosed number of elements to a page. This section teaches us how to make our visualizations ready for dynamic datasets.

Preview 06:54

We want our visualization to take up as much room as we have available. We set our height and width dynamically based on the page's attributes.

Making Our Bar Chart Dynamic

Adding new data to a current chart can lead to wasted computation when only a few elements are actually changed. We use D3's enter/update paradigm to update our chart with new data.

Updating Our Bar Chart with New Data

We need to better separate the bars in our bar chart and devise a method to remove the leftover items that no longer exist in our dataset. We can do this using a dynamic padding between bars and using D3's .exit() function.

Styling Our Bar Chart and Adding New Data
Building Our First Visualization – A Scatter-plot
3 Lectures 22:21

Large datasets will often require you to make a background request to a server to fetch data. Using D3's AJAX methods, we can easily request data to use in our visualizations.

Preview 08:04

Comparing two values is a common task when analyzing datasets. Using a scatter-plot, we can easily spot differences and correlations between two values.

Plotting Data

In order to read our scatter plot visualization, we need to create axes to correspond to our data values. We can use D3's built-in axis method that works with our scales to easily create axes for our chart.

Creating Axes
Adding Interactivity
4 Lectures 25:41

Having the country codes displayed alongside their data points is useful, but it can be distracting. In this video, we will attach an event listener to a button to toggle the country code visibility on and off.

Preview 04:12

Having the data of the scatter-plot displayed relative to each other is a good representation of relative data but is light on the details. By presenting detailed information in a pop-up tooltip when moving the mouse over a data point, one can reveal relevant data when needed.

Creating a Mouse-over Tooltip

Our graph is currently restricted to displaying exports for 2010 and 2011. Using a form, we will update our visualization to specify which year each axis represents.

Updating Data with a Form (Part 1)

We now have a form to select the year each axis represents. We will implement the fetching of only the requested data and display it in our scatter-plot graph.

Updating Data with a Form (Part 2)
Adding Transitions
3 Lectures 18:57

Animations can help draw the eye of the user to specific data in a visualization that one wants to highlight. We will learn the basics of creating animations that can later be incorporated into our scatter-plot visualization.

Preview 08:58

Our scatter-plot allows users to change the dataset applied to the x and y axes, but each submission results in a flash change of the visualization. In this video, we will smoothly transition the dots and axes between old and new data.

Adding Transitions to Our Scatter-plot

Functionally, our scatter-plot is complete. However, there are still some lingering issues that can be addressed with some additional transitions that will be demonstrated.

Advanced Scatter-plot Transitions
Building a GeoMap
4 Lectures 33:56

Geographic maps tend to be encoded such that the shape, size, and position are fixed, but these variables are crucial to creating a good visualization. In this video, we shall convert raw geographic data to GeoJSON, a format that D3JS can then manipulate to our liking.

Preview 06:21

A choropleth allows one to take in information at a glance, being able to compare countries' values by how dark they are shaded relative to each other. In this video, we will display a map assigning a color scale based on a given country's export for a given product.

Creating a Choropleth with Data Values

Our map is currently very static and displays only a hardcoded year's exports for a hardcoded product. While an advanced user could tweak the values in the console and call for a redraw, we shall create a slider to select the year and a pull-down list to select the product.

Focusing on Reusability – Integrating User Input

Our map is now very functional, allowing the user to change the year and product being displayed. In this video, we shall implement zooming in on a given country, displaying details about the country the curser is over and showing a legend to complete the visualization.

Finishing Touches – Zooming, Tooltip, and Legend
Putting It All Together - Geo-scatter
3 Lectures 26:40

For the final visualization, merge the scatter-plot that you learned about in Section 7 with drawing maps, as learned in Section 8, to create a Geo-scatter.

Preview 10:12

Countries are currently displayed relative to each other in a two-dimensional plane according to their respective sizes. We want to use the shapes of the countries as points in our scatter-plot, so we will reduce each country to a single shape, all shrunken or enlarged to a uniform size and able to be placed anywhere on our scatter-plot grid.

Drawing Country Shapes as Points

We now have our Geo-scatter functioning, but it still lacks some finishing touches. Add the X and Y axes to the display, reinstall the tooltip functionality, and add the ability to select countries to be displayed, both independently and by continent.

Geo-scatter Finishing Touches
About the Instructor
Packt Publishing
3.9 Average rating
8,229 Reviews
59,023 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.