Building Data Visualizations with D3 and Angular 2
3.0 (39 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.
345 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building Data Visualizations with D3 and Angular 2 to your Wishlist.

Add to Wishlist

Building Data Visualizations with D3 and Angular 2

Create stunning data visualizations with D3.js and Angular 2
3.0 (39 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.
345 students enrolled
Created by Packt Publishing
Last updated 2/2017
Current price: $10 Original price: $125 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Harness the power of D3.js to build bar graphs, choropleth maps, and scatterplots and add interactive legends to D3.js visualizations
  • Attach complex data sets to SVG and geospatial elements through the use of D3.js
  • Build a set of dynamic and interactive D3.js components in Angular 2
  • Combine D3.js and Angular 2
  • Create a data dashboard with Angular 2
  • Add advanced features and functionalities such as interactivity, animations, and real- time data streams
  • Work with new and exciting libraries such as Angular Material and Socketio
View Curriculum
  • This video uses a step-by-step tutorial approach and will explain all the steps involved in creating an Angular 2 app and integrating the latest D3.js library, D3 version 4. The individual steps will eventually help you to create a fully functional application in the form of a data dashboard complete with a scatterplot, live map, and live visual data stream.

Browser-based visualization has been revolutionized by D3.js, the most flexible and powerful data visualization library available today. Angular 2 will power many of the most interesting and innovative websites and apps in years to come. This practical tutorial gives real-world solutions to how your data can be brought to life by harnessing the power of D3.js and using it in tandem with Angular 2.

The course begins by showing you how to connect data effectively to SVG elements using D3.js and provides an introduction to making D3 data visualizations interactive.

It then moves on to creating a basic Angular 2 application complete with components, services, data and event binding, and a testing infrastructure.

Finally, you will learn how to integrate D3.js into an Angular 2 application. You will build a data dashboard out of flexible Angular 2 components. Towards the end of this volume you will learn to leverage a few advanced features and functionalities such as incorporating real-time data streams, and adding interactivity and animations.

This course will provide you with the knowledge base and skill set to visualize virtually any data set and allow your audience to interact with these visualizations to gain deeper insight.

About The Author

The author has three years expertise with both Angular and D3.js. He uses D3.js frequently and Angular on a daily basis while building internal tools for a rapidly growing financial technology startup.

Over a three-month period last year he assisted in rebuilding one of their most complex internal tools (a combination of JavaScript, jQuery, and Angular at the time) as a tested, semantic Angular app.

He followed up this project by introducing the business to D3.js and building out several data visualization features within their internal tools.

He also enjoys building Angular 2 applications on his own time.

Who is the target audience?
  • JavaScript developers who want to create powerful, reusable data visualization components using D3.js and Angular 2.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
31 Lectures
Installation and Setup
4 Lectures 18:57

This video gives an overview of the entire course

Preview 04:10

The aim of this video is to introduce us to Node.js and install it, and to install npm and make us aware of its features

Node.js and npm

We will be setting up our configuration files and using NPM to install necessary dependencies 

Installing Project Dependencies

We will get our App up and running in the browser

Getting an Angular 2 app up and running
Building a Bar Graph
4 Lectures 27:09

In order to build interesting visualizations, the viewer will need to know how to import data sets. The most common data used with D3 is JSON, so that is what this video will focus on.

Preview 08:35

We will build a very basic bar graph and would like to customize it by adding our own styling. We will customize the color, add a transition, and add basic interactivity.

Building and Styling a Bar Graph

We have created a bar graph with data that maps nicely to pixels. However, when working with real world data sets we will often be working with numbers in the thousands, millions, or even more. We need a way to map this data to a set number of pixels on our screen.

Adding a Scale

Our bar graph has improved greatly over the last several videos but is still missing vital information. It's time to add axes and labels.

Adding Axes and Labels
Building a Choropleth Map
3 Lectures 24:44

D3 has powerful mapping capabilities, but requires one to understand several file types including shapefiles, geoJSON, and topoJSON.

Preview 04:50

In order to build a map with D3, we need geographic data along with a data set which we can visualize

Combining topoJSON with Data

Now that we have a topoJSON file, we need to use D3 to visualize the data and geographic features within this file

Styling a Map Based on Data
Making D3 Visualizations Interactive
3 Lectures 17:37

Our choropleth map looks great, but there's not currently a way to determine what range of values each color corresponds to. We need to add a legend which equates colors to values.

Preview 07:11

We have built an informative choropleth map, but some of the smaller counties are difficult to find within this map. We need to add some basic zooming functionality.

Adding Zoom Functionality

We would like to be able to access information about each county simply by hovering over it. We can accomplish this with custom tooltips.

Adding Custom Tooltips
Angular 2 Overview
5 Lectures 37:09

This video discusses modularity in Angular 2 apps and why building modular apps is beneficial

Preview 04:41

Components are essential pieces to every Angular 2 application and will be discussed in detail

Understanding Components

Data binding is an extremely important aspect of Angular 2 and will be discussed in detail

Data and Event Binding

Pulling data into an application from an external source is something handled in Angular 2 through services

Services in Angular 2

We want our Angular 2 applications to be well tested, so we’ll discuss the setting up of a unit testing structure here.

Unit Tests
Building an Angular 2 App
5 Lectures 40:14

In Installation and Setup we learned how to manually setup an Angular 2 application. Manually creating and configuring multiple files for systemjs, typings, and testing can get tedious. The Angular CLI solves this problem.

Preview 06:50

We want to build dynamic templates that will alter the DOM based on the data passed in to our class.

Working with Structural Directives and Class Bindings

Our application will need a data service, which can be used by multiple components.

Adding Services

In order to build interesting applications, we will need to understand how to build forms that accept user input.

Working with Angular 2 Forms

In order to build more complex apps, we will need to understand how to navigate between multiple views using a router.

Adding a Router
Real-time Data and D3 in Angular 2
3 Lectures 13:31

In the previous sections, we worked with mock data in our Angular 2 apps. We now want to get our data from a server in real-time.

Preview 04:50

In the previous sections we worked with either D3 or Angular 2 but never together. In this section we will finally combine them.

Importing D3 into an Angular 2 Project

Data is hitting our server in real-time as well as D3 is available within our client code. It's time to hook them up!

Using D3 to Display Data in Real-time
Creating D3 Components
4 Lectures 23:36

We now have tweets hitting our app in real-time. We now want to visualize this tweet data using Angular 2 components and D3.

Preview 06:04

We want to display data about the recent tweets in a scatterplot.

Creating a ScatterplotComponent

We want to add a map that shows the location of any location-enabled tweets.

Creating a MapComponent

We would like to be able to interact with our data dashboard to reveal details about each data point. We would also like to briefly introduce Angular 2 animations.

Adding Interactivity and Animations
About the Instructor
Packt Publishing
3.9 Average rating
8,175 Reviews
58,763 Students
686 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.