by Matt Dionis | Publisher: Packt Publishing | Release Date: January 2017 | ISBN: 9781786466693

Create stunning data visualizations with D3.js and Angular 2About This VideoBuild a complete data visualization mapping app with Angular 2Integrate D3.js and Angular 2 to build several powerful data visualization componentsAdd event handlers and animations to your Angular 2 Mapping app using D3.js componentsIn DetailBrowser-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.

1. Chapter 1 : Installation and Setup
   • The Course Overview 00:04:10
   • Node.js and npm 00:03:27
   • Installing Project Dependencies 00:05:49
   • Getting an Angular 2 app up and running 00:05:32
2. Chapter 2 : Building a Bar Graph
   • Importing JSON Data 00:08:35
   • Building and Styling a Bar Graph 00:10:17
   • Adding a Scale 00:04:58
   • Adding Axes and Labels 00:03:20
3. Chapter 3 : Building a Choropleth Map
   • Understanding GeoJSON and TopoJSON 00:04:51
   • Combining TopoJSON with Data 00:08:09
   • Styling a Map Based on Data 00:11:46
4. Chapter 4 : Making D3 Visualizations Interactive
   • Adding a Legend 00:07:12
   • Adding Zoom Functionality 00:06:46
   • Adding Custom Tooltips 00:03:40
5. Chapter 5 : Angular 2 overview
   • Modularity in Angular 2 Apps 00:04:41
   • Understanding Components 00:09:17
   • Data and Event Binding 00:03:51
   • Services in Angular 2 00:13:52
   • Unit Tests 00:05:29
6. Chapter 6 : Building an Angular 2 App
   • Angular CLI 00:06:51
   • Working with Structural Directives and Class Bindings 00:05:27
   • Adding Services 00:08:45
   • Working with Angular 2 Forms 00:12:44
   • Adding a Router 00:06:28
7. Chapter 7 : Real-time Data and D3 in Angular 2
   • Accessing Real-time Data through an Express Server 00:04:51
   • Importing D3 into an Angular 2 Project 00:03:03
   • Using D3 to Display Data in Real-time 00:05:39
8. Chapter 8 : Creating D3 Components
   • Creating a TweetComponent 00:06:05
   • Creating a ScatterplotComponent 00:06:45
   • Creating a MapComponent 00:05:40
   • Adding Interactivity and Animations 00:05:07