Building Data Visualizations with D3 and Angular 2

Watch Building Data Visualizations with D3 and Angular 2

  • 2017
  • 1 Season

Building Data Visualizations with D3 and Angular 2 is a comprehensive online course offered by Packt Publishing, featuring Matt Dionis as the instructor. This course is aimed at software developers who want to learn how to build and deploy interactive data visualizations using D3 and Angular 2.

The course is divided into several chapters, each covering different aspects of data visualization. In the first chapter, Matt Dionis provides an overview of D3 and Angular 2 and explains how they work together to create effective data visualizations. He explains the difference between traditional data visualization tools and D3, which provides greater flexibility and control over the visualization process.

The subsequent chapters dive deeper into specific D3 components, such as scales, axes, and layouts. Matt Dionis explains how each of these components works and how they can be manipulated to create different types of visualizations. He also provides examples of how to use D3 to access and process data from different sources, such as CSV files or APIs.

In the later chapters of the course, Matt Dionis shows how to integrate D3 visualizations into an Angular 2 application. He explains how to set up an Angular 2 application, create components for the visualizations, and pass data between components. He also demonstrates how to use Angular 2 directives to manipulate D3 visualizations dynamically.

Throughout the course, Matt Dionis provides practical examples and challenges to help students apply what they have learned to real-world scenarios. He also provides tips and best practices for optimizing D3 visualizations for performance and scalability.

Building Data Visualizations with D3 and Angular 2 is an excellent course for software developers who want to enhance their data visualization skills. The combination of D3 and Angular 2 provides a powerful framework for creating interactive, data-driven visualizations that can be deployed on a variety of platforms. Whether you are new to data visualization or have some experience, this course is sure to provide valuable insights and techniques for building effective visualizations.

Building Data Visualizations with D3 and Angular 2 is a series that is currently running and has 1 seasons (62 episodes). The series first aired on January 10, 2017.

Filter by Source

Seasons
Adding Interactivity and Animations
31. Adding Interactivity and Animations
January 10, 2017
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
31. Adding Interactivity and Animations
January 10, 2017
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.
Creating a MapComponent
30. Creating a MapComponent
January 10, 2017
We want to add a map that shows the location of any location-enabled tweets.
Creating a MapComponent
30. Creating a MapComponent
January 10, 2017
We want to add a map that shows the location of any location-enabled tweets.
Creating a ScatterplotComponent
29. Creating a ScatterplotComponent
January 10, 2017
We want to display data about the recent tweets in a scatterplot.
Creating a ScatterplotComponent
29. Creating a ScatterplotComponent
January 10, 2017
We want to display data about the recent tweets in a scatterplot.
Creating a TweetComponent
28. Creating a TweetComponent
January 10, 2017
We now have tweets hitting our app in real-time. We now want to visualize this tweet data using Angular 2 components and D3.
Creating a TweetComponent
28. Creating a TweetComponent
January 10, 2017
We now have tweets hitting our app in real-time. We now want to visualize this tweet data using Angular 2 components and D3.
Using D3 to Display Data in Real-time
27. Using D3 to Display Data in Real-time
January 10, 2017
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
27. Using D3 to Display Data in Real-time
January 10, 2017
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!
Importing D3 into an Angular 2 Project
26. Importing D3 into an Angular 2 Project
January 10, 2017
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
26. Importing D3 into an Angular 2 Project
January 10, 2017
In the previous sections we worked with either D3 or Angular 2 but never together. In this section we will finally combine them.
Accessing Real-time Data through an Express Server
25. Accessing Real-time Data through an Express Server
January 10, 2017
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.
Accessing Real-time Data through an Express Server
25. Accessing Real-time Data through an Express Server
January 10, 2017
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.
Adding a Router
24. Adding a Router
January 10, 2017
In order to build more complex apps, we will need to understand how to navigate between multiple views using a router.
Adding a Router
24. Adding a Router
January 10, 2017
In order to build more complex apps, we will need to understand how to navigate between multiple views using a router.
Working with Angular 2 Forms
23. Working with Angular 2 Forms
January 10, 2017
In order to build interesting applications, we will need to understand how to build forms that accept user input.
Working with Angular 2 Forms
23. Working with Angular 2 Forms
January 10, 2017
In order to build interesting applications, we will need to understand how to build forms that accept user input.
Adding Services
22. Adding Services
January 10, 2017
Our application will need a data service, which can be used by multiple components.
Adding Services
22. Adding Services
January 10, 2017
Our application will need a data service, which can be used by multiple components.
Working with Structural Directives and Class Bindings
21. Working with Structural Directives and Class Bindings
January 10, 2017
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
21. Working with Structural Directives and Class Bindings
January 10, 2017
We want to build dynamic templates that will alter the DOM based on the data passed in to our class.
Angular CLI
20. Angular CLI
January 10, 2017
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.
Angular CLI
20. Angular CLI
January 10, 2017
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.
Unit Tests
19. Unit Tests
January 10, 2017
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
19. Unit Tests
January 10, 2017
We want our Angular 2 applications to be well tested, so we'll discuss the setting up of a unit testing structure here.
Services in Angular 2
18. Services in Angular 2
January 10, 2017
Pulling data into an application from an external source is something handled in Angular 2 through services.
Services in Angular 2
18. Services in Angular 2
January 10, 2017
Pulling data into an application from an external source is something handled in Angular 2 through services.
Data and Event Binding
17. Data and Event Binding
January 10, 2017
Data binding is an extremely important aspect of Angular 2 and will be discussed in detail
Data and Event Binding
17. Data and Event Binding
January 10, 2017
Data binding is an extremely important aspect of Angular 2 and will be discussed in detail
Understanding Components
16. Understanding Components
January 10, 2017
Components are essential pieces to every Angular 2 application and will be discussed in detail
Understanding Components
16. Understanding Components
January 10, 2017
Components are essential pieces to every Angular 2 application and will be discussed in detail
Modularity in Angular 2 Apps
15. Modularity in Angular 2 Apps
January 10, 2017
This video discusses modularity in Angular 2 apps and why building modular apps is beneficial
Modularity in Angular 2 Apps
15. Modularity in Angular 2 Apps
January 10, 2017
This video discusses modularity in Angular 2 apps and why building modular apps is beneficial
Adding Custom Tooltips
14. Adding Custom Tooltips
January 10, 2017
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
14. Adding Custom Tooltips
January 10, 2017
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 Zoom Functionality
13. Adding Zoom Functionality
January 10, 2017
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
13. Adding Zoom Functionality
January 10, 2017
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 a Legend
12. Adding a Legend
January 10, 2017
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.
Adding a Legend
12. Adding a Legend
January 10, 2017
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.
Styling a Map Based on Data
11. Styling a Map Based on Data
January 10, 2017
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
11. Styling a Map Based on Data
January 10, 2017
Now that we have a topoJSON file, we need to use D3 to visualize the data and geographic features within this file
Combining TopoJSON with Data
10. Combining TopoJSON with Data
January 10, 2017
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
10. Combining TopoJSON with Data
January 10, 2017
In order to build a map with D3, we need geographic data along with a data set which we can visualize
Understanding GeoJSON and TopoJSON
9. Understanding GeoJSON and TopoJSON
January 10, 2017
D3 has powerful mapping capabilities, but requires one to understand several file types including shapefiles, geoJSON, and topoJSON.
Understanding GeoJSON and TopoJSON
9. Understanding GeoJSON and TopoJSON
January 10, 2017
D3 has powerful mapping capabilities, but requires one to understand several file types including shapefiles, geoJSON, and topoJSON.
Adding Axes and Labels
8. Adding Axes and Labels
January 10, 2017
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
8. Adding Axes and Labels
January 10, 2017
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 a Scale
7. Adding a Scale
January 10, 2017
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
7. Adding a Scale
January 10, 2017
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.
Building and Styling a Bar Graph
6. Building and Styling a Bar Graph
January 10, 2017
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
6. Building and Styling a Bar Graph
January 10, 2017
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.
Importing JSON Data
5. Importing JSON Data
January 10, 2017
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.
Importing JSON Data
5. Importing JSON Data
January 10, 2017
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.
Getting an Angular 2 app up and running
4. Getting an Angular 2 app up and running
January 10, 2017
We will get our App up and running in the browser.
Getting an Angular 2 app up and running
4. Getting an Angular 2 app up and running
January 10, 2017
We will get our App up and running in the browser.
Installing Project Dependencies
3. Installing Project Dependencies
January 10, 2017
We will be setting up our configuration files and using NPM to install necessary dependencies.
Installing Project Dependencies
3. Installing Project Dependencies
January 10, 2017
We will be setting up our configuration files and using NPM to install necessary dependencies.
Node.js and npm
2. Node.js and npm
January 10, 2017
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
2. Node.js and npm
January 10, 2017
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.
The Course Overview
1. The Course Overview
January 10, 2017
This video gives an overview of the entire course.
The Course Overview
1. The Course Overview
January 10, 2017
This video gives an overview of the entire course.
Description
Where to Watch Building Data Visualizations with D3 and Angular 2
Building Data Visualizations with D3 and Angular 2 is available for streaming on the Packt Publishing website, both individual episodes and full seasons. You can also watch Building Data Visualizations with D3 and Angular 2 on demand at Amazon.
  • Premiere Date
    January 10, 2017