This video is available to students only

Using d3 with Angular.js

We take a look at how to combine d3 + Angular, with a complete codebase.

Using D3 with Angular.js#

Angular is a framework for building modern, component-based user interfaces in HTML and Typescript. Typescript is a superset of Javascript: it looks very similar to Javascript and gets compiled to Javascript, but it has extra features like static typing, classes, and interfaces.

While the codebase looks very different to the React codebase, the chart library structure is largely the same.

If you're not interested in developing Angular applications, I'd recommend poking around and noticing how similar the code is to the React code. If you are interested in developing d3 + Angular apps, the best route would be:

  1. Run through the previous lessons with the React code

  2. Try to fill out the /src/app/timeline/timeline.component.ts component (including the nested chart, line, & axis components), following our steps

  3. Check out the completed code in /src/app/completed after, or if you get stuck. You can switch these out if you change the imports in src/app/app.module.ts


This page is a preview of Fullstack D3 Masterclass

No discussions yet