Building Interactive Data Visualizations with D3JS

Create engaging data-driven and interactive visualizations to display complex data using D3JS
4.4 (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.
292 students enrolled
$19
$85
78% off
Take This Course
  • Lectures 31
  • Length 3.5 hours
  • Skill Level Beginner Level
  • 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 9/2015 English

Course Description

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.

What are the requirements?

  • For this course you will require basic knowledge of HTML, CSS, and JavaScript. It is not a prerequisite to have formal training in programming.

What am I going to get from this course?

  • 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

What is the target audience?

  • If you are interested in presenting your data with aesthetically appealing visualizations, this course is for you.

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.

Curriculum

Section 1: Getting Started
04:57
This video will offer the overview of the course.
04:56

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.

06:55

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.

07:01

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.

Section 2: Binding Data to HTML Elements
05:56

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.

06:01

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.

05:10

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

Section 3: Using SVG
06:34

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

06:59

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.

05:29

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

Section 4: Entering, Updating, and Exiting with Data and SVG Shapes
06:54

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.

03:03

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.

04:25

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.

03:41

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.

Section 5: Building Our First Visualization – A Scatter-plot
08:04

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.

06:24

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

07:53

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.

Section 6: Adding Interactivity
04:12

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.

07:19

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.

05:33

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.

08:37

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.

Section 7: Adding Transitions
08:58

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.

04:45

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.

05:14

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.

Section 8: Building a GeoMap
06:21

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.

08:03

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.

10:07

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.

09:25

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.

Section 9: Putting It All Together - Geo-scatter
10:12

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.

07:19

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.

09:09

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course