Interactive charts with D3 and Angular

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Our project: The Charts Library

Lecture 3: Setting up the working environment

Lecture 4: Setting the environment – adding node and angular

Lecture 5: Creating our first Angular application: DashboardOne

Lecture 6: Serving the angular project

Lecture 7: Adding the bootstrap navbar

Lecture 8: DashboardOne – creating the framework

Lecture 9: Anatomy of a chart

Lecture 10: Why SVG?

Lecture 11: Creating a chart component

Lecture 12: Adding rectangles to the svg

Lecture 13: SVG positioning system. Inverting the y

Lecture 14: Binding data to the chart with Angular ngFor

Lecture 15: Scaling the chart – part 1

Lecture 16: Scaling the chart – part 2

Lecture 17: Scaling the chart – part 3 – vertical scaling

Lecture 18: Adding a padding between rectangles

Lecture 19: Why do we need margins?

Lecture 20: Adding margins to the chart

Lecture 21: SVG elements – Basic shapes: Line

Lecture 22: SVG Elements – Basic shapes: Path

Lecture 23: SVG Path – Tutorial

Lecture 24: SVG Path – creating the project and adding a grid

Lecture 25: SVG Path – polygons

Lecture 26: SVG Path – The [Q] Quadratic and [C] Cubic Bezier curves

Lecture 27: SVG Paths – A command – arcs

Lecture 28: SVG Elements – Basic shapes: Text

Lecture 29: Adding labels – the x label

Lecture 30: Adding axis to the chart – Horizontal axis

Lecture 31: Receiving data as input

Lecture 32: Data from API – the API service

Lecture 33: Api update: Important!!

Lecture 34: Data from API – getting and displaying data

Chapter 2: An introduction to D3

Lecture 1: Introduction

Lecture 2: Adding the chart component

Lecture 3: The svg as a d3 selector

Lecture 4: D3 select and selectAll

Lecture 5: The d3 update pattern – data binding and enter

Lecture 6: D3 update pattern – possible issues with selections. Curent state

Lecture 7: Setting attributes and styles: .attr() and .style()

Lecture 8: Using functions on attributes and styles

Lecture 9: Styling d3 elements with angular css

Lecture 10: D3 update pattern: Updating data

Lecture 11: D3 update pattern: Exit

Lecture 12: Recreating the chart using d3

Lecture 13: D3 scales: The scaleLinear

Lecture 14: Using the scaleLinear

Lecture 15: The scaleBand

Lecture 16: Adding margins to the chart

Lecture 17: Fixing a bug

Lecture 18: SVG Elements – The g container

Lecture 19: Adding the data container

Lecture 20: Introduction to d3 Axis

Lecture 21: Adding a horizontal axis to chart 3

Lecture 22: d3 exercise: Adding a vertical axis to chart 3

Lecture 23: D3 – post selection – customizing axis

Lecture 24: D3 axis – customizing tick size and tick format

Lecture 25: D3 axis – styling the grid and adding an axis label

Lecture 26: D3 axis – Replacing the ids by the employee names

Lecture 27: Completing the d3 update pattern – introduction

Lecture 28: Completing the d3 update pattern – Changing and filtering the data

Lecture 29: Completing the d3 update pattern – Exercises

Lecture 30: Completing the d3 update pattern – final

Lecture 31: Sorting data

Lecture 32: D3 transitions

Lecture 33: Transitioning the axis

Lecture 34: Fixing a bug

Chapter 3: Making a Scatterplot

Lecture 1: Introduction

Lecture 2: Adding the Iris dataset to the API

Lecture 3: Adding the iris data to the app component

Lecture 4: Adding dropdowns to chart 4

Lecture 5: Finishing the dropdowns

Lecture 6: Scatterplot – anatomy of the chart

Lecture 7: Adding d3 to the scatterplot

Lecture 8: Adding the methods

Lecture 9: Updating the scatterplot

Lecture 10: Implementing the setDimensions method

Lecture 11: Implementing the setElements method

Lecture 12: Data model: The scatterData method

Lecture 13: Implementing the setParams

Lecture 14: Implementing the setLabels

Lecture 15: Implementing the setAxis

Lecture 16: SVG elements – Basic shapes: Circle

Lecture 17: Implementing the draw method

Lecture 18: Fixing the max value bug

Lecture 19: Adding colors

Lecture 20: Colors by category

Chapter 4: Making a line chart

Lecture 1: Introduction

Lecture 2: Adding the covid data api

Lecture 3: Adding the chart component

Lecture 4: Anatomy of the line chart

Lecture 5: About the covid data

Lecture 6: Adding d3 to the chart

Lecture 7: Adding the methods