Building Data Visualizations with D3 and Angular 2 [Video]

Building Data Visualizations with D3 and Angular 2 [Video]

Matt Dionis

Create stunning data visualizations with D3.js and Angular 2
Mapt Subscription
FREE
$29.99/m after trial
Video
$106.25
RRP $124.99
Save 14%
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$106.25
$29.99p/m after trial
RRP $124.99
Subscription
Video
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Video Details

ISBN 139781786466693
Course Length3 hours 23 minutes

Video Description

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.

Table of Contents

Installation and Setup
The Course Overview
Node.js and npm
Installing Project Dependencies
Getting an Angular 2 app up and running
Building a Bar Graph
Importing JSON Data
Building and Styling a Bar Graph
Adding a Scale
Adding Axes and Labels
Building a Choropleth Map
Understanding GeoJSON and TopoJSON
Combining TopoJSON with Data
Styling a Map Based on Data
Making D3 Visualizations Interactive
Adding a Legend
Adding Zoom Functionality
Adding Custom Tooltips
Angular 2 overview
Modularity in Angular 2 Apps
Understanding Components
Data and Event Binding
Services in Angular 2
Unit Tests
Building an Angular 2 App
Angular CLI
Working with Structural Directives and Class Bindings
Adding Services
Working with Angular 2 Forms
Adding a Router
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
Creating D3 Components
Creating a TweetComponent
Creating a ScatterplotComponent
Creating a MapComponent
Adding Interactivity and Animations

What You Will 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

Authors

Table of Contents

Installation and Setup
The Course Overview
Node.js and npm
Installing Project Dependencies
Getting an Angular 2 app up and running
Building a Bar Graph
Importing JSON Data
Building and Styling a Bar Graph
Adding a Scale
Adding Axes and Labels
Building a Choropleth Map
Understanding GeoJSON and TopoJSON
Combining TopoJSON with Data
Styling a Map Based on Data
Making D3 Visualizations Interactive
Adding a Legend
Adding Zoom Functionality
Adding Custom Tooltips
Angular 2 overview
Modularity in Angular 2 Apps
Understanding Components
Data and Event Binding
Services in Angular 2
Unit Tests
Building an Angular 2 App
Angular CLI
Working with Structural Directives and Class Bindings
Adding Services
Working with Angular 2 Forms
Adding a Router
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
Creating D3 Components
Creating a TweetComponent
Creating a ScatterplotComponent
Creating a MapComponent
Adding Interactivity and Animations

Video Details

ISBN 139781786466693
Course Length3 hours 23 minutes
Read More

Read More Reviews

Recommended for You

Publish, Manage, and Consume Services Using ArcGIS Server [Video] Book Cover
Publish, Manage, and Consume Services Using ArcGIS Server [Video]
$ 124.99
$ 106.25
Reactive Programming With Java 9 Book Cover
Reactive Programming With Java 9
$ 39.99
$ 28.00
Windows Server 2016 Automation with PowerShell Cookbook - Second Edition Book Cover
Windows Server 2016 Automation with PowerShell Cookbook - Second Edition
$ 47.99
$ 33.60
Python Machine Learning - Second Edition Book Cover
Python Machine Learning - Second Edition
$ 31.99
$ 22.40
R Data Analysis Cookbook - Second Edition Book Cover
R Data Analysis Cookbook - Second Edition
$ 39.99
$ 28.00
Docker - A Better Way to Build Apps [Video] Book Cover
Docker - A Better Way to Build Apps [Video]
$ 124.99
$ 106.25