Learn D3, Mongodb and Ngrx-store

MongoDB has a quite powerful aggregation framework that allows you to write data processing pipelines. Documents in the MongoDB collection go through a series of stages or a pipeline that transforms them into an aggregated result. In this short video series, you will learn how to write aggregations in MongoDB.

mongodb

MongoDB Aggregation Framework

As your Angular application grows, it becomes more difficult to manage application state.

NgRx can help with that!

In this course, we will learn how to convert an Angular application from using stateful services into using NgRx.

We will accomplish this by adding a new feature, including building a reducer and actions. We'll also touch on using selectors to query our state, managing collections with NgRx entity, async operations, and hiding implementation details with the facade pattern.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Reactive State Management in Angular with ngrx

In this course we will learn and demonstrate the fundamental concepts and APIs of D3, on our way to building several common chart types. We’ll start with the building blocks upon which all D3 visualizations are built; things like scales, interpolators, and selections. We’ll see how to load data with D3, and how to put its full name, Data Driven Documents, into action. We’ll build column and bar charts, scatter plots, and area charts. Most importantly, we’ll gain an understanding of the conventions and patterns that underlie all D3 projects and examples, enabling you to dissect, understand, and build virtually any D3 visualization on the internet.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Build Interactive JavaScript Charts with D3 v4

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.**

Angular has many built-in features for working closely with RxJS to help you build entirely reactive applications. This course will teach you how to use Angular with RxJS. We will learn how to use the ngrx/store library to manage state in a clean, reactive "Redux style."

This course assumes you've got a working knowledge of Angular and reactive programming with RxJS. If you don't, you might want to watch the following courses to get you up to speed! 
- [Get Started with Angular](https://egghead.io/courses/get-started-with-angular) 
- [Introduction to Reactive Programming with RxJS](
https://egghead.io/series/introduction-to-reactive-programming). 
- [Step by Step Async Programming with RxJS](https://egghead.io/series/step-by-step-async-javascript-with-rxjs) 
- [Getting Started With Redux](https://egghead.io/series/getting-started-with-redux), a course by Redux's, Dan Abramov.

We also have Intermediary Angular courses if you'd like to acquire more in-depth knowledge. 
- [Dependency Injection](https://egghead.io/courses/angular-2-dependency-injection-di-explained
- [Components, Directives](https://egghead.io/courses/building-angular-components)
- [Forms](https://egghead.io/courses/intro-to-angular-forms)
- [Router](https://egghead.io/courses/intro-to-angular-router)
- [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)



Build Redux Style Applications with Angular, RxJS, and ngrx/store

This course covers D3 v3. If you'd like to learn about v4 of D3 (the latest version) [click here for the course on that](https://egghead.io/courses/build-interactive-javascript-charts-with-d3-v4).

This series will gently guide you through the first steps in getting to know D3. The curve can be steep, but with a few simple tools, you'll be charting your buns off in no time flat.

Use D3 (v3) to Build Interactive Charts with JavaScript

Aggregation in MongoDB is really powerful and allows you to create solid pipelines to extract and transform data. This is an introductory video that aims to demonstrate the basics of aggregation — we will see how to create some basic pipeline to extract data using `$match` and manipulate the output using `$project` stages.

The aggregation stages/operators covered in this video are:

* [`$match`](https://docs.mongodb.com/manual/reference/operator/aggregation/match/index.html)
* [`$project`](https://docs.mongodb.com/manual/reference/operator/aggregation/project/index.html)
* [`$concat`](https://docs.mongodb.com/manual/reference/operator/aggregation/concat/)

You can see the list of all the [available operators in the MongoDB docs](https://docs.mongodb.com/manual/reference/operator/aggregation/)


Find and Manipulate Data using Aggregation in MongoDB

In our last lesson, we learnt the basics of MongoDB aggregation and saw how we can [find and manipulate data](https://egghead.io/lessons/mongodb-find-and-manipulate-data-using-aggregation-in-mongodb). In this continuation, we will see how we can sort, skip and limit records during our aggregation stages.

The aggregation stages/operators covered in this video are:

* [`$sort`](https://docs.mongodb.com/manual/reference/operator/aggregation/sort/index.html)
* [`$skip`](https://docs.mongodb.com/manual/reference/operator/aggregation/skip/index.html)
* [`$limit`](https://docs.mongodb.com/manual/reference/operator/aggregation/limit/index.html)

You can see the list of all the [available operators in the MongoDB docs.](https://docs.mongodb.com/manual/reference/operator/aggregation/)

Sort, Skip and Limit Records in MongoDB Aggregation

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.

mongoose

One of the great things about NoSQL databases is that you do not have to decide on your data schema while developing. As you get closer to production though, you'll often want to more clearly define the shape of the data you are working with.

Enforce Schemas in MongoDB using Mongoose Models

Unlike the relational databases, MongoDB doesn't allow you to join collections using the simple `find` queries, but you can write the join queries using the aggregation framework. In this lesson, we learn how to join two collections to get the data in the format we want.

The aggregation operators that we cover in this video are:

- [`$lookup`](https://docs.mongodb.com/manual/reference/operator/aggregation/lookup/index.html)
- [`$project`](https://docs.mongodb.com/manual/reference/operator/aggregation/project/index.html)
- [`$arrayElemAt`](https://docs.mongodb.com/manual/reference/operator/aggregation/arrayElemAt/index.html)

You can see the list of all the [available operators in the MongoDB docs.](https://docs.mongodb.com/manual/reference/operator/aggregation/)

Write Joins in MongoDB

[In our last lesson](https://egghead.io/lessons/mongodb-group-by-and-sum-in-mongodb?pl=mongodb-aggregation-framework-3e5d), we saw how we can use `$group` operator to simulate `GROUP BY` operations that you might be aware from SQL. A minor gimmick with `$group` is that it only works with the scalar field values and not arrays. There might be times when you would want to group by some array fields; in this lesson, we learn how to do that using `$unwind` operator

Here is the list of operators that we cover in this lesson:

- [$unwind](https://docs.mongodb.com/manual/reference/operator/aggregation/unwind/index.html)
- [$group](https://docs.mongodb.com/manual/reference/operator/aggregation/group/index.html)
- [$sort](https://docs.mongodb.com/manual/reference/operator/aggregation/sort/index.html)
- [$limit](https://docs.mongodb.com/manual/reference/operator/aggregation/limit/index.html)

You can see the list of all the [available operators in the MongoDB docs](https://docs.mongodb.com/manual/reference/operator/aggregation/).


Perform Group Operations on Array Fields in MongoDB

In this lesson, we learn how to group documents in a collection using `$group` operator similar to `GROUP BY` in SQL. We also look at `$sum` operator and see how we can use it to count the number of documents as well as get sum of some field in our grouped results.

Here is the list of operators that we cover in this lesson:

* [`$group`](https://docs.mongodb.com/manual/reference/operator/aggregation/group/index.html)
* [`$sum`](https://docs.mongodb.com/manual/reference/operator/aggregation/sum/index.html)
* [`$sort`](https://docs.mongodb.com/manual/reference/operator/aggregation/sort/index.html)

You can see the list of all the [available operators in the MongoDB docs](https://docs.mongodb.com/manual/reference/operator/aggregation/).


Group By and Sum in MongoDB

Reducers are also often used for changing a single property inside of other reducers. This lesson shows how a type can enter the people reducer, but then the people reducer can use a different type to call the clock reducer and get a value back.

Use a Reducer to Change an Object's Property Inside an Array

Most of D3’s native selection APIs also return the selection (or a new selection), to enable multiple method calls to be chained together. Since the code you write isn’t on the selection prototype, chaining your methods would take some extra work. `selection.call()` will call any function reference you give it, providing the selection as the first parameter, and then it returns the selection for you to ensure chaining is supported.

Better Code Organization with selection.call() with D3 v4

Making SVGs responsive is unfortunately not as simple as adding some media queries. This lesson introduces the `viewBox` attribute, which is used to control how SVGs scale. We’ll also examine a reusable function that can be used to make nearly any visualization responsive.

Make D3 v4 Charts Responsive with the viewBox attribute

In D3, the General Update Pattern is the name given to what happens when a data join is followed by operations on the enter, update, and exit selections. When a chart's data changes over time and each update can both create new elements and destroy existing ones, the General Update pattern can help convey meaning to users. This lesson demonstrates the pattern using animated transitions on a column chart.

Animate with the General Update Pattern in D3 v4

Ensuring your charts are responsive is essential if you want them to work regardless of the user's device and screen size. In this lesson we'll learn how the viewBox attribute of SVG elements works, and apply that knowledge to make a future-proof D3 chart.

Responsive D3 charts with the viewBox attribute

Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visualizations. In this lesson we’ll look at how to use Chrome Dev Tools to examine the data associated with your generated markup and experiment with styles to speed up the development process.

Debug D3 v4 with Dev Tools

D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in new items or tweening existing shapes to display new values, adding transitions is easy. This lesson shows you how to add animations while building on your existing knowledge of D3 selections.

Animate Transitions in D3 v4

Create a line chart, then easily convert it to an area chart

Line and Area Charts with D3

Mapping abstract values to visual representations is what data visualization is all about, and that’s exactly what D3 scales do. This is usually done using pretty straightforward algorithms, but nothing is straightforward when you’re working with Date objects in JavaScript. If you’re plotting temporal data, you need to use a time scale.

Convert Dates to Numeric Values with Time Scales in D3 v4

Sometimes data needs to be converted from a continuous range, like test scores, to a discrete set of output values, like letter grades. In this lesson we’ll see how to use `d3.scaleQuantize()` to do exactly that.

Topics

Instructors

Content Type