Interactive Charts With D3 And Angular

Free Download Interactive Charts With D3 And Angular
Published 6/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 12.61 GB | Duration: 24h 52m
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 jаvascript
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

Homepage

https://www.udemy.com/course/interactive-charts-with-d3-and-angular/

Links are Interchangeable - Single Extraction

Вернуться назад

Навигация

Рекомендуем

Статистика

Interactive Charts With D3 And Angular

Коментарии

Рекомендуем

Популярное