Building Responsive Data Visualizations with D3 JS
3.9 (69 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.
961 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building Responsive Data Visualizations with D3 JS to your Wishlist.

Add to Wishlist

Building Responsive Data Visualizations with D3 JS

Create stunning D3 data visualizations and render them as part of a responsive design
3.9 (69 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.
961 students enrolled
Created by Packt Publishing
Last updated 2/2016
Price: $85
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn the basic structure of data binding in D3JS
  • Construct a number of D3 visualizations, including bar chart, line chart, scatter plot, pie chart, tree chart, and maps
  • Master D3 visualization features such as tooltips, axes, and scales
  • Understand the importance of interactivity, and transitioning between two states of a visualization for enhanced, responsive experience
  • Find, prepare, load, and use external data sources such as CSV, TSV, JSON, and Geo Data
  • Explore the world of responsive design using data visualization libraries, such as Bootstrap and Pym, to enhance your web designing skills
View Curriculum
  • This video course is aimed at front end developers or anyone with a strong grasp of HTML, CSS, and JavaScript.

As part of the user interface, it is important that data visualizations are context aware and should adjust according to screen size, media type, and other similar aspects. To tackle this, it is essential for web developers to ace at both D3 and responsive design using Bootstrap to make visualizations responsive across different viewing platforms. D3 is currently the go-to data visualization library, offering greater integration with web standards, and better customizability than other data visualization libraries available.

This video course starts out by describing ways in which D3JS fits into existing web standards to provide data visualization solutions that can be easily integrated. After working through the basic flow of simple visualizations, we'll start adding features: tooltips, axes, and scales. We'll take a look at interactivity and transitions. Then we'll walk through the use of external data sources, including CSV, TSV, JSON, and GeoJSON, which will prepare us for more in-depth visualizations.

Further on we'll tackle responsive design, covering all the basic concepts, and then work our way through a site mockup the old fashioned way, looking for breakpoints and using media queries to provide smooth screen size transitions. Our work with responsive design will then be applied to a number of our early data visualizations.

We'll resume our focus on responsive design later in the course when we'll cover using Bootstrap and PymJS, a JavaScript library that enables the embedding of responsive iFrames. The data visualizations we'll tackle in the final sections of the course will include mapping with Topo and GeoJSON.

By the end of this course, you will have an armoury full of tools to create feature-rich data visualizations with D3JS that are responsive on different platforms.

About the Author

Merrill Cook is currently a freelance data journalist, who has helped to strategize, implement, and market infographics, interactive graphics, interactive maps, scrolling story pages, and a variety of other online media types. He is also the manager of an independent online course and online course platform ranking site.

Who is the target audience?
  • This course is aimed at those who have tried learning D3 on their own, but would like more in-depth and step-by-step tutorials to master the art of visualization and responsive web design.
Compare to Other Data Visualization Courses
Curriculum For This Course
28 Lectures
Building Blocks 1 – Noninteractive, Reusable Charts
5 Lectures 21:14

A basic overview of the topics covered in this course.

Preview 04:15

You want to use the browser's native ability to render SVGs so that you can present some data to your site's visitors. In this case, you want a bar chart, so let's build a nondynamic bar chart with HTML.

Creating a Bar Chart with SVGs

It's burdensome and inefficient to maintain a bar chart hardcoded in HTML. So, let's make one that can dynamically adjust to new data in D3.

Creating a D3 Bar Chart

You have a progression of data points that you want plotted on a line.

Creating a D3 Line Chart

You have disorganized multidimensional data points, and you want to see whether there's any trend in the data. In this case, we'll use a simple D3 scatterplot to provide a dynamic way to visualize the data.

Creating a D3 Scatterplot
Building Blocks 2 – Adding Scales, Axes, and Labels
4 Lectures 17:09

There isn't much context for your visualisations varying in pixel values. Users can't even tell which object is which. Let's start by adding the simplest form of labels by appending a text element.

Preview 02:37

Traditional text labels can be unbecoming, and you aren't always interested in the value of every part of data visualization. Let's solve this problem by creating tooltips that appear on mouseover.

Creating Tooltips for Your Visualization

We need a way to uniformly deal with incoming data and output values that will plot well in our given visualization. Let's explore D3 scales so that we can dynamically deal with our growing datasets.

Utilizing D3 Scales

We need to be able to present labels that operate on the scales being presented in the graphic. So, let's learn ways in which we can visually show the scales we're using.
Adding Axes
Responsive Visual Strategies
5 Lectures 25:51

Even on fluid grid sites, there are times when the layout or content is out of sync. That's why you need to know how to use media queries to address the breakpoints.

Using Media Queries and Addressing Breakpoints

Sometimes, optimizing the page layout by page size isn't enough to share important, visualizable data. That's why we need to discern the best visualization styles by screen size.
Choosing a Visualization Style Based on the Media Type

Even if the overall site layout is optimized, it doesn't mean visualizations are clear. That's why we need to explore adjusting charts based on the screen size.
Matching the Chart Size with the Container Size

Even if you know the syntax and handlers to use to resize charts, it can be hard to know what to resize and when. So, let's look at some previous charts and strategize about making them responsive.
Scaling All Visualization Elements Based on Container Size
Building Blocks 3 – External Data Sources
3 Lectures 17:48

So far, we've used small datasets already stored in an array in our script. This is seldom the way data comes to us in the real world. So, let's use the d3.csv function to start exploring the visualization of external CSV files.

Preview 08:08

CSV data is great, but sometimes you'll have to navigate the often highly nested JSON format. Let's see how to load JSON data from an external source, and then wrangle it to create a dynamic bar chart.
Getting Data from JSON

You've learned a few external data sources, but nothing that relates to geographic data. Let's check out the intricacies of GeoJSON.

Building a Map with GeoJSON
Building Blocks 4 – Interactivity
3 Lectures 17:15

So far, we've only relied on hover and window resize events. This isn't enough for a truly interactive experience, so let's dive into transitions.

Preview 04:37

Oftentimes users will want to be provided with a subset of your data that is visually distinguished upon interaction. So, let's work through changing our visualization with D3's filter method.
Filtering Data

You need the right basic visualization type in order for interactivity to be effective. Let's work through some standard D3 layouts and expand your repertoire.
D3 Layouts
Mapping with GeoJSON
3 Lectures 12:24

While you can plot whatever you want on a map projection, most people are used to some form of base map giving context to the data. So, let's look at setting up a base map of populated regions in USA.

Preview 05:11

The shape of maps often isn't enough to tell the story you would like to tell with data. So, let's jump in and see how to create a chloropleth map using our American-county-based base map from the previous video.

While we can see some trends just by looking at the color grouping in our chloropleth, the colors need context. Let's add a legend and tooltips for additional usability.
Adding Tooltips and Legends to Our Map
Making It Mobile-first
3 Lectures 13:05
We need our map to redraw itself for usability on multiple screen sizes. Before we see what other frameworks can do, let's do it in the old fashioned way—with media queries.
Preview 04:49

Although what you've learned about responsive design and media queries is great, there are a number of powerful frameworks out there that can streamline our workflow. So, let's check out perhaps the best known responsive framework, that is, Bootstrap.
Throwing in Bootstrap

Particularly in CMS systems, or on sites where content can vary widely by size or format, you may want a one-size-fits-all way to embed your own content in pages. That's why you need PymJS, a tool developed by the NPR visualizations team for embedding.

Integrating Pym into Your Visualization
Moving Forward
2 Lectures 03:30
We've covered a lot, and you should probably try and cement it in your head for future use. There may be points at which you need some additional information to fully get the exercises we worked through, so we've included resources for future study.
Preview 02:18

A lot can be learned by keeping track of the field of data visualization as a whole, as well as knowledge of web standards in general. Let's look at a few people you should follow and things you should be reading.
What to Read and Whom to Follow
About the Instructor
Packt Publishing
3.9 Average rating
8,249 Reviews
59,099 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.