Interactive Charts With D3 And Angular

Create highly interactive charts using the power of D3 and Angular

What you'll learn

Integrate D3 and Angular seamlessly from zero to pro

Add powerful interactive charts to you angular application

Learn D3 from scratch

Create basic and advanced interactive charts using D3js

Understand how SVG works and apply the knowledge to build more efficient visualizations

Reuse and simplify your code and charts by applying inheritance principles and extending base classes

Build your own chart library with line, area, bar and column, pie, doughnut, scatter charts, maps, bee swarms…

Expand your library with your own charts

Apply interactions to your visualizations

Create a dashboard using the charts developed in the course

Inject legends and tooltips in charts by using angular services

Requirements

Knowledge of javascript

Basic knowledge of Angular is an advantage. This is a beginner to intermediate course that will focus more on the integration of D3 into Angular.

Description

D3 is such a powerful language, however it can be difficult to start with. Angular is an amazing framework but it lacks in data visualizations.We will connect both worlds and create together amazing interactive charts that will bring your pages to another level.For the absolute beginners, we will start from zero, understanding the d3 library, how it works, and how to use it. We will go into a depth analysis of the d3 update pattern so you can master the library and avoid the most common mistakes beginners do.You will connect to api services and transform your data into the right format for each chart.You will learn the SVG format and standards and how you can use it to create your own customized data visualizations.We will use angular services and asynchronous data flows to inject data on the charts, If you already know d3, you will learn about more advanced concepts, using the different d3 libraries, like the d3-array, the d3-force, voronoi partitions and others. We will create legend and tooltip services, sending and receiving actions to charts and reacting to user inputs.We will move into reusable charts by creating basic charts and extending them using inheritance.Finally, you will end the course with a solid base to create your own reusable charts building upon the foundations of what you study here.Welcome to the world of d3 and angular!

Overview

Section 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

Section 2: An introduction to D3

Lecture 35 Introduction

Lecture 36 Adding the chart component

Lecture 37 The svg as a d3 selector

Lecture 38 D3 select and selectAll

Lecture 39 The d3 update pattern - data binding and enter

Lecture 40 D3 update pattern - possible issues with selections. Curent state

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

Lecture 42 Using functions on attributes and styles

Lecture 43 Styling d3 elements with angular css

Lecture 44 D3 update pattern: Updating data

Lecture 45 D3 update pattern: Exit

Lecture 46 Recreating the chart using d3

Lecture 47 D3 scales: The scaleLinear

Lecture 48 Using the scaleLinear

Lecture 49 The scaleBand

Lecture 50 Adding margins to the chart

Lecture 51 Fixing a bug

Lecture 52 SVG Elements - The g container

Lecture 53 Adding the data container

Lecture 54 Introduction to d3 Axis

Lecture 55 Adding a horizontal axis to chart 3

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

Lecture 57 D3 - post selection - customizing axis

Lecture 58 D3 axis - customizing tick size and tick format

Lecture 59 D3 axis - styling the grid and adding an axis label

Lecture 60 D3 axis - Replacing the ids by the employee names

Lecture 61 Completing the d3 update pattern - introduction

Lecture 62 Completing the d3 update pattern - Changing and filtering the data

Lecture 63 Completing the d3 update pattern - Exercises

Lecture 64 Completing the d3 update pattern - final

Lecture 65 Sorting data

Lecture 66 D3 transitions

Lecture 67 Transitioning the axis

Lecture 68 Fixing a bug

Section 3: Making a Scatterplot

Lecture 69 Introduction

Lecture 70 Adding the Iris dataset to the API

Lecture 71 Adding the iris data to the app component

Lecture 72 Adding dropdowns to chart 4

Lecture 73 Finishing the dropdowns

Lecture 74 Scatterplot - anatomy of the chart

Lecture 75 Adding d3 to the scatterplot

Lecture 76 Adding the methods

Lecture 77 Updating the scatterplot

Lecture 78 Implementing the setDimensions method

Lecture 79 Implementing the setElements method

Lecture 80 Data model: The scatterData method

Lecture 81 Implementing the setParams

Lecture 82 Implementing the setLabels

Lecture 83 Implementing the setAxis

Lecture 84 SVG elements - Basic shapes: Circle

Lecture 85 Implementing the draw method

Lecture 86 Fixing the max value bug

Lecture 87 Adding colors

Lecture 88 Colors by category

Section 4: Making a line chart

Lecture 89 Introduction

Lecture 90 Adding the covid data api

Lecture 91 Adding the chart component

Lecture 92 Anatomy of the line chart

Lecture 93 About the covid data

Lecture 94 Adding d3 to the chart

Lecture 95 Adding the methods

Lecture 96 Implementing the setDimensions method

Lecture 97 Implementing the setElements

Lecture 98 d3 concepts: The timeFormat

Lecture 99 d3 concepts: timeParse

Lecture 100 Implementing the setParams

Lecture 101 Data model: the line data format

Lecture 102 Defining the scales domains

Lecture 103 Implementing the setAxis

Lecture 104 Implementing the draw method

Lecture 105 Implementing the setLabels

Lecture 106 Legend: Introduction

Lecture 107 Legend: Adding the elements

Lecture 108 Legend: Repositioning the legend

Lecture 109 Legend: Simplifying the code

Lecture 110 Legend: onClick algorithm explained

Lecture 111 Legend: Setting the active element

Lecture 112 Legend: implementing the onClick method

Lecture 113 Legend: hovering the legend items

Lecture 114 Legend: disabling an item

Lecture 115 Finishing touches

Section 5: Pie/Donut chart

Lecture 116 Introduction

Lecture 117 Resources

Lecture 118 Adding the data / setting the api

Lecture 119 Adding the chart component

Lecture 120 Anatomy of the pie chart

Lecture 121 The pie data structure

Lecture 122 Converting data into a pie

Lecture 123 Adding a dropdown to the chart

Lecture 124 Adding the chart properties

Lecture 125 The config interface

Lecture 126 Adding the methods

Lecture 127 setDimensions

Lecture 128 setElements

Lecture 129 d3 concepts: d3.pie and d3.arc

Lecture 130 setParams

Lecture 131 setLabels

Lecture 132 draw method

Lecture 133 Fixing a bug

Lecture 134 Pie transitions: d3.attrTween and d3.interpolatrion

Lecture 135 Pie legend: Introduction

Lecture 136 setLegend

Lecture 137 Legend: analysis of the events

Lecture 138 Legend: implementing the events

Lecture 139 Improving the styling of the chart

Lecture 140 arcTween (2nd version): Analysis

Lecture 141 arcTween: Enter

Lecture 142 arcTween: Exit

Lecture 143 The arc hover event

Lecture 144 Adding a second pie with a different config

Lecture 145 ObjectHelper: Partially updating an object

Lecture 146 PieHelper: Outsourcing code from the chart into helpers

Section 6: Stacked and grouped bar chart

Lecture 147 Introduction

Lecture 148 Resources

Lecture 149 Adding the data / setting the api

Lecture 150 Adding the chart component

Lecture 151 The data interfaces

Lecture 152 d3 concepts: the d3-array library

Lecture 153 StackHelper: Setting the methods to convert data from the api

Lecture 154 StackHelper: Setting the interfaces and getting the data

Lecture 155 Anatomy of the chart

Lecture 156 Adding d3 to the chart

Lecture 157 Adding the methods

Lecture 158 Implementing the config input

Lecture 159 ChartDimensions: analysis of the structure

Lecture 160 ChartDimensions: Implementing the methods and properties

Lecture 161 setDimensions

Lecture 162 setElements

Lecture 163 setParams: analysis

Lecture 164 DashboardOne: reordering the charts

Lecture 165 adding the setScales methods

Lecture 166 setXScale

Lecture 167 setYScale

Lecture 168 setGroupScale

Lecture 169 setColorScale

Lecture 170 setLabels + inline styling

Lecture 171 setAxis

Lecture 172 StackHelper: Adding a value formatter to SetStacks

Lecture 173 Styling the axis

Lecture 174 d3 concepts: Stacking data with d3.stack

Lecture 175 Stacking data with examples (d3.stack in practice)

Lecture 176 setStackedData

Lecture 177 Sorting the stacks

Lecture 178 setLegend: Analysis

Lecture 179 setLegend: Implementation

Lecture 180 setTooltip: Analysis

Lecture 181 Tooltip: Adding the tooltip template

Lecture 182 Tooltip: Handling the tooltip events

Lecture 183 Simplifying the stacked data

Lecture 184 drawRectangles: Refactoring the method to use the simplified stacked data

Lecture 185 Tooltip: data interface

Lecture 186 Tooltip: setting the data

Lecture 187 Tooltip: setting the position

Lecture 188 Tooltip: setting the config

Lecture 189 Tooltip: finishing the implementation of the design

Lecture 190 Tooltip: show and hide methods

Lecture 191 Tooltip: improving the tooltip movement

Lecture 192 Tooltip: Improving show and hide

Lecture 193 Highlighting a rectangle

Lecture 194 Legend: Item hover event

Lecture 195 Legend: Item toggle event

Lecture 196 Legend: Updating the code with hiddenIds

Lecture 197 Improving the bars transitions on toggle event

Lecture 198 Legend: Improving the active/inactive styling

Lecture 199 Adding a transition to the yAxis

Lecture 200 Improving the design

Lecture 201 Grouping and stacking bar states: Analysis

Lecture 202 Adding a grouped/stacked dropdown

Lecture 203 Fixing the group and stack

Lecture 204 Fixing the tooltip

Lecture 205 Fixing the legend highlight

Section 7: Map

Lecture 206 Introduction

Lecture 207 Resources

Lecture 208 Adding the chart component

Lecture 209 The geojson and topojson formats

Lecture 210 Adding the geodata / setting api

Lecture 211 Adding the map data

Lecture 212 Combining data files

Lecture 213 MapHelper: Setting methods to convert the data to the map format

Lecture 214 Setting the map data interfaces

Lecture 215 Adding the methods - part I

Lecture 216 The dimension service

Lecture 217 setElements

Lecture 218 setParams: Analysis

Lecture 219 Map projections and d3-geo-projection

Lecture 220 d3 concepts: d3-geo library

Lecture 221 Setting the projection and the path

Lecture 222 Solving an issue with topojson

Lecture 223 Adding the topojson package to angular and to the chart

Lecture 224 Adding methods and setting the updateChart

Lecture 225 d3 concepts: d3.geoPath and d3.projection. Scale and translate the projection

Lecture 226 d3.projection: Rotating the map

Lecture 227 d3.projection: fitSize

Lecture 228 Colors: Introduction

Lecture 229 One path vs multiple paths

Lecture 230 setColors

Lecture 231 drawDataLayers

Lecture 232 setLabels

Lecture 233 setLegend

Lecture 234 Highlights: Description

Lecture 235 Legend highlights: Setting the events and methods

Lecture 236 Legend highlights: highlight and reset features

Lecture 237 Highlighting a feature

Lecture 238 Tooltip: Show and hide methods

Lecture 239 Timeline tooltip: Overview

Lecture 240 Timeline tooltip: Actions

Lecture 241 Tooltip event flow

Lecture 242 Adding the timeline tooltip component

Lecture 243 Anatomy of the timeline tooltip

Lecture 244 Timeline tooltip: setting up methods and properties

Lecture 245 Timeline tooltip: defining the interfaces

Lecture 246 Timeline tooltip: adding the tooltip methods to MapHelper

Lecture 247 Timeline tooltip: applying the interfaces to the tooltip component

Lecture 248 Timeline tooltip: setting the svg elements

Lecture 249 Timeline tooltip: setting the positions of the svg elements

Lecture 250 Timeline tooltip: fixing the overflow hidden

Lecture 251 Timeline tooltip: the active and max values

Lecture 252 Timeline tooltip: setScales

Lecture 253 Timeline tooltip: setArea and setLine

Lecture 254 Timeline tooltip: setLabels

Lecture 255 Timeline tooltip: applying the styles

Lecture 256 Timeline tooltip: setLines

Lecture 257 Timeline tooltip: drawLine and drawArea

Lecture 258 Timeline tooltip: updating the config object

Lecture 259 Timeline tooltip: setting the asctive elements

Lecture 260 Fixing the tooltip position

Lecture 261 Play slider: Overview

Lecture 262 Adding the bootstrap-icons package to angular

Lecture 263 Play slider: Adding the component

Lecture 264 Play slider: Adding properties and methods

Lecture 265 Play slider: setting the view and the styles

Lecture 266 Play slider: implementing the methods

Lecture 267 Play slider: adding the state to MapHelper

Lecture 268 Timeline tooltip: Fixing the current date position

Lecture 269 Update the map config

Lecture 270 Resizing the chart: Setting the subscritpion

Lecture 271 Resizing the chart: implementing the resizeChart

Lecture 272 Angular project source code

Section 8: Enabling strict mode in angular

Lecture 273 Introduction

Lecture 274 Adding the types packages to angular

Lecture 275 Updating the app component

Lecture 276 Updating the charts components

Lecture 277 Updating the helpers

Lecture 278 Updating the services

Lecture 279 Debugging the application

Lecture 280 Fixing an error on map tooltip

Lecture 281 Some notes on the strict mode

Section 9: Bee swarm

Lecture 282 Introduction

Lecture 283 Resources

Lecture 284 Anatomy of the bee swarm

Lecture 285 Adding the chart component

Lecture 286 Adding demographics data / setting api

Lecture 287 Adding demographics data to the app component

Lecture 288 Interfaces and helper overview

Lecture 289 Adding the SwarmHelper

Lecture 290 Defining the interfaces

Lecture 291 Adding interfaces to helper

Lecture 292 Finishing the setData method

Lecture 293 Applying the SwarmHelper to the app component

Lecture 294 Chart inheritance overview

Lecture 295 Adding the abstract chart class

Lecture 296 Extending the chart

Lecture 297 Setting the chart methods - part I

Lecture 298 Setting the chart methods - part II

Lecture 299 setSVG

Lecture 300 Finishing the abstract chart

Lecture 301 Making the bee swarm compliant with the parent class

Lecture 302 setElements

Lecture 303 positionElements

Lecture 304 setParams

Lecture 305 setGroups

Lecture 306 Scales: overview

Lecture 307 setXScale

Lecture 308 setYScale

Lecture 309 setColorsScale

Lecture 310 draw - first version

Lecture 311 setAxis

Lecture 312 setLabels

Lecture 313 d3 concepts: d3.forceSimulation

Lecture 314 setScaledData

Lecture 315 Simulating data

Lecture 316 Running the simulation

Lecture 317 The simulated interface

Lecture 318 Legend services: overview

Lecture 319 Legend services: Creating the services

Lecture 320 Legend services: Adding properties and methods

Lecture 321 setLegendItems

Lecture 322 Legend services: adding items, setting the interfaces

Lecture 323 Legend services: position the legend

Lecture 324 Legend services: Repositioning the items

Lecture 325 Legend services: Actions and Events

Lecture 326 Legend services: Adding actions

Lecture 327 Subscribing to legend actions

Lecture 328 Legend services: onMouseClick

Lecture 329 Highlight methods

Lecture 330 Legend services: The reset action

Lecture 331 update chart with hiddenIds

Lecture 332 Restricting inactive items

Lecture 333 Legend services: onMouseClick - 2nd version: Overview

Lecture 334 Legend services - 2nd version: Implementing the method

Lecture 335 Legend services: the config object

Lecture 336 Circle highlights: overview

Lecture 337 Adding the circle events

Lecture 338 Highlighting circles

Lecture 339 Add the highlighted line

Lecture 340 Improving the styling

Lecture 341 Tooltip service: overview

Lecture 342 Tooltip service: Adding the service

Lecture 343 Tooltip service: moving the interfaces

Lecture 344 Tooltip service: data and config

Lecture 345 Tooltip service: Binding the template to the host

Lecture 346 setTooltip

Lecture 347 Tooltip service: setElements

Lecture 348 Tooltip service: setPosition

Lecture 349 Tooltip service: adjust for the background padding

Lecture 350 Tooltip service: setting the tooltip positions

Lecture 351 Tooltip service: adding x and y positions

Lecture 352 Tooltip service: adding offsets to the position

Lecture 353 Deciding on the tooltip alignment

Lecture 354 Tooltip service: show and hide

Lecture 355 Delaunay and Voronoi partitions

Lecture 356 Adding a Voronoi partition to the chart

Lecture 357 Fixing the legend onMouseClick

Lecture 358 Adding the Voronoi cells

Lecture 359 Updating the voronoi on legend actions

Lecture 360 Applying the tooltip service to chart 7 (stacked bar): description

Lecture 361 Injecting the tooltip service on chart 7

Lecture 362 Adding the onMouseLeave event and fixing the opacity transition

Angular developers that needs to build dashboards, visualize data or just enhance their apps with some nice charts,Developers who wants to create charts using d3,Beginners who want to learn d3 from scratch,Intermediate user who already know something about d3 but want to consolidade or expand their knowledge