Building Data Visualizations with D3 and Angular 2 [Video]

More Information
  • 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

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.

Style and Approach

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.

  • Build a complete data visualization mapping app with Angular 2
  • Integrate D3.js and Angular 2 to build several powerful data visualization components
  • Add event handlers and animations to your Angular 2 Mapping app using D3.js components
Course Length 3 hours 23 minutes
ISBN 9781786466693
Date Of Publication 11 Jan 2017


Matt Dionis

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.