Big Savings: Special offer Get FLAT 15% Instant Discount Get Details
Create stunning data visualizations with D3.js and Angular 2

Building Data Visualizations with D3 and Angular 2

     18 Learners       Add to wishlist

Create stunning data visualizations with D3.js and Angular 2

  • Video Duration:04 Hours
  • Cost: $ 124.99

Course Details

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.

Who all can attend

JavaScript developers who want to create powerful, reusable data visualization components using D3.js and Angular 2.

What you will learn from this course

  • 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

Course Content

  1. Installation and Setup
    • The Course Overview
    • Node.js and npm
    • Installing Project Dependencies
    • Getting an Angular 2 app up and running

  2. Building a Bar Graph
    • Importing JSON Data
    • Building and Styling a Bar Graph
    • Adding a Scale
    • Adding Axes and Labels

  3. Building a Choropleth Map
    • Understanding GeoJSON and TopoJSON
    • Combining TopoJSON with Data
    • Styling a Map Based on Data

  4. Making D3 Visualizations Interactive
    • Adding a Legend
    • Adding Zoom Functionality
    • Adding Custom Tooltips

  5. Angular 2 Overview
    • Modularity in Angular 2 Apps
    • Understanding Components
    • Data and Event Binding
    • Services in Angular 2
    • Unit Tests

  6. Building an Angular 2 App
    • Angular CLI
    • Working with Structural Directives and Class Bindings
    • Adding Services
    • Working with Angular 2 Forms
    • Adding a Router

  7. Real-time Data and D3 in Angular 2
    • Accessing Real-time Data through an Express Server
    • Importing D3 into an Angular 2 Project
    • Using D3 to Display Data in Real-time

  8. Creating D3 Components
    • Creating a TweetComponent
    • Creating a ScatterplotComponent
    • Creating a MapComponent
    • Adding Interactivity and Animations

Contact Us

Instructor-led online training is also available for the same course.

For more details, write to us at :

Call(+91) 8130666206/209

Send us a Query


I agree to be contacted via e-mail.

Get in Touch

Follow Us

We Accept Online Payments

Online Registration

Subscribe to our Newsletter

Contact Us


I agree to be contacted via e-mail.

  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP and SP are registered marks of the Project Management Institute, Inc.
  • PRINCE2® is a registered trade mark of AXELOS Limited
  • ITIL® is a registered trade mark of AXELOS Limited
  • MSP® is a registered trade mark of AXELOS Limited
  • The Swirl logoTM is a trade mark of AXELOS Limited, used under permission of AXELOS Limited. All rights reserved.

How can help you?