D3.js: Complete Developer Data Visualization Guide

Video description

Bring data to life with the D3.js data visualization library, and get up to speed with JavaScript, HTML, and CSS to build stunning data visuals

About This Video

  • Learn to create a bar chart that can move dynamically
  • Visualize earthquakes - both dynamically and as circles in the x-axis
  • Get to grips with using the getElementById selector

In Detail

Effective visualization of data helps users analyze and gather insights about data, making complex data more accessible, understandable, and easy on the eye. If you want to create incredible graphs and data-driven visualizations from raw data and communicate information clearly and efficiently within your organization, work, and school, then enroll in this complete data visualization course covering the D3.js library.

The course begins with an introduction to D3.js, and then teaches you how to create dynamic visualizations, scales, bar charts, and SVG paths. You’ll then perform hands-on tasks such as earthquake visualization, creating a pie chart, and building a navigation page. The course then takes you through JavaScript fundamentals, along with covering arrays, loops, functions, and objects. Toward the concluding chapters, you’ll get to grips with the document object model (DOM) and the browser object model (BOM).

By the end of this course, you'll have gained a solid understanding of the basics of HTML, CSS, and JavaScript - the three main technologies necessary for building amazing visualizations using the D3.js library.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Introduction
    1. Learning Path - How to Get the Most out of The Course 00:02:31
  2. Chapter 2 : Installing Development Tools
    1. Installing VSCode IDE and Helpful Extensions 00:10:15
    2. Using Chrome Browser 00:03:07
  3. Chapter 3 : Introduction to D3.JS
    1. D3 Brief Introduction 00:01:16
    2. D3 Website and Demos 00:03:47
    3. Setting Up Project with D3 00:08:02
    4. SVG - Introduction 00:02:10
    5. SVG Inline HTML - Creating a Circle 00:09:01
    6. SVG MDN Docs 00:02:48
    7. Creating D3 Canvas and Circle 00:11:10
    8. Double Quotes or Not for Attr 00:02:56
    9. Creating Lines with SVG in D3 00:07:21
    10. SVG Text 00:06:49
  4. Chapter 4 : Creating Visualizations Dynamically
    1. Creating a Bar and Move it Dynamically 00:08:12
    2. Showing Three Bars on Screen (Upside Down) 00:12:47
    3. Inverting the yAxis 00:02:01
    4. Understanding the "Enter()" function and Making it All Dynamically 00:09:04
    5. Cleaning up the Code 00:01:48
    6. Customizing Our Data Array with Objects 00:05:23
    7. Parsing Local and Remote JSON 00:17:42
  5. Chapter 5 : Earthquake Visualization Project
    1. Project Setup 00:10:11
    2. Showing Earthquakes - Circles in the X-Axis 00:13:14
    3. Showing Earthquakes - Dynamically 00:12:33
    4. Adding Event MouseOver 00:09:53
    5. Showing a Tooltip 00:10:57
    6. Showing Tooltip with Data 00:11:52
  6. Chapter 6 : Scales & BarCharts - Revisited
    1. Revisiting Barcharts and Introduction to Scales 00:09:22
    2. What is Linear Scale 00:02:25
    3. Creating and Implementing yScale 00:07:07
    4. Band Scale 00:02:44
    5. Finalizing Band Scale 00:08:29
    6. Margins and Groups 00:09:59
    7. Creating xAxis and yAxis 00:09:59
    8. Final xAxis and Graph Inverted 00:06:55
    9. Bonus - Adding Animation 00:05:05
    10. Fixing the Axis Issue 00:01:26
  7. Chapter 7 : SVG Paths
    1. SVG Paths Introduction 00:03:31
    2. Creating SVG Paths 00:07:36
    3. Creating SVG Paths with D3JS 00:11:16
    4. D3 Curves 00:05:53
    5. Creating an Area Chart - Part 1 00:07:53
    6. Setting Ranges and Domains - Part 2 00:15:20
    7. Adding Axis - Part 3 00:07:40
    8. CSS Customizations - Part 4 00:03:16
    9. Adding Line - Part 5 00:07:14
    10. Final Tweaks 00:09:03
  8. Chapter 8 : Creating a Pie Chart
    1. Setting Up DACA Project 00:08:57
    2. Pie Chart Concepts 00:02:41
    3. Creating Pie Angles 00:11:01
    4. Showing an Arc on Screen 00:09:54
    5. Dynamically Showing a Pie Chart on Screen 00:10:25
    6. Adding Dynamic Colors to Pie 00:08:11
    7. Adding a Tooltip 00:12:41
    8. Beautifying the Pie Chart 00:12:10
    9. Adding Tween Animation 00:07:37
  9. Chapter 9 : Final Project - U.S. Immigration Services
    1. Immigration Visualization - Demo 00:05:00
    2. Project Setup 00:08:47
    3. Pulling CSV Data 00:05:35
    4. Creating Clusters - Part 1 00:15:18
    5. Creating Clusters - Part 2 00:13:03
    6. Creating Clusters Circles - Part 3 00:12:18
    7. Showing Clusters on Screen 00:09:17
    8. Showing D3 Tip 00:07:01
    9. Color Legend 00:13:50
    10. Adding Size Legend 00:10:56
    11. Finished Project 00:04:20
  10. Chapter 10 : The Essentials of Web Development - HTML, CSS and JavaScript
    1. What's the World Wide Web (WWW) And How it Works 00:05:17
    2. Web Technologies and the Web 00:04:17
    3. JavaScript, HTML and CSS - The 3 Legged Stool 00:02:36
    4. Understanding the HTML Document Structure 00:05:40
    5. HTML Heading 00:04:23
    6. HTML Paragraph Tag 00:02:53
    7. The Break line Tag 00:02:52
    8. Formatting HTML - Bio Page 00:08:24
    9. Adding Address and Break line 00:01:27
    10. Emphasizing and Formatting Text 00:08:24
    11. Solution to Challenge 00:01:00
    12. More HTML Elements 00:01:00
    13. Finalizing HTML Formatting 00:04:16
  11. Chapter 11 : HTML Attributes
    1. HTML Attributes 00:02:21
    2. HTML Attribute - HREF and Style 00:04:30
    3. HTML Image Tag 00:08:41
    4. HTML Title and Lang Attribute 00:03:25
    5. List of More HTML Attributes 00:01:37
    6. Unordered List in HTML 00:07:38
    7. List Type Attributes and Nested Lists 00:08:17
    8. HTML Table - Introduction 00:01:22
    9. Creating an HTML Table 00:08:05
    10. Adding Border Style to Table - Inline CSS 00:07:08
  12. Chapter 12 : CSS - Styling HTML Pages
    1. Introduction to CSS 00:01:06
    2. Styling our Table with Internal Style Sheet 00:10:21
    3. CHALLENGE: Create a Simple HTML Page 00:01:41
    4. SOLUTION And More on CSS and Button 00:13:09
    5. CSS Rules - Font Styles 00:04:08
    6. The Class Attribute 00:05:08
    7. The ID Attribute 00:03:55
  13. Chapter 13 : Building a Navigation Page
    1. Creating a Navigation Page - Part1 00:09:17
    2. Navigation Page Creation - Adding Hover 00:08:45
    3. Understanding the Box Model 00:03:30
    4. Removing Margin and Padding 00:03:24
    5. Adding More HTML Pages 00:04:10
    6. Adding Correct Paths to HTML Pages 00:04:12
    7. External Style Sheets adn Linking 00:07:13
    8. Introduction to DIV 00:05:17
    9. DIVs and Float 00:08:09
    10. Structuring Content in a Web Page 00:04:33
    11. Manually Restructuring Pages 00:07:21
  14. Chapter 14 : Sectioning Elements
    1. Using Sectioning Elements 00:01:25
    2. Using Sectioning Elements on a Page 00:10:44
    3. Structuring our Footer 00:04:20
    4. Final Thoughts About HTML 00:06:03
  15. Chapter 15 : JavaScript Fundamentals
    1. 3 Legged Stool - Introduction to Javascript 00:00:43
    2. JavaScript in the Chrome Console 00:07:08
    3. More on JavaScript in the Console 00:07:33
    4. Understanding the DOM 00:03:34
    5. Location of the Script Tag and Why 00:07:22
    6. JavaScript Concatenation and Variables 00:09:41
    7. Null and Undefined and Boolean 00:05:10
    8. Arithmetic Operations 00:04:18
    9. Remainder 00:02:26
    10. The Plus Sign 00:02:58
    11. Introduction to If Statement 00:07:32
    12. Identicality Comparison 00:03:41
    13. Logical Operators with Conditional Operators 00:08:24
    14. The Ternary Operator 00:03:50
  16. Chapter 16 : JavaScript Arrays & Loops
    1. Introduction to Arrays 00:06:16
    2. Getting the Last Item of an Array 00:04:17
    3. For Loops 00:08:31
  17. Chapter 17 : JavaScript Functions and Objects
    1. Introduction to Functions 00:04:24
    2. Different Types of Functions 00:03:14
    3. Function Parameters and Returns 00:07:13
    4. Local and Global Variables 00:04:09
    5. Understanding Local and let Scope Variables 00:10:11
    6. Introduction to Objects 00:02:44
    7. Creating our First JS Object 00:06:12
    8. Instantiating our Own Objects - Constructors 00:14:16
  18. Chapter 18 : The DOM and The BOM
    1. The DOM and The BOM - Using JS to Access the DOM 00:01:50
    2. Using getElementById Selector 00:12:36
    3. Using the querySelectors 00:05:16
    4. Applying inline CSS with JavaScript 00:07:56
    5. OnClick Event 00:09:30
    6. Intercepting More Events 00:09:39
    7. EventListeners 00:04:17
    8. More on EventListeners 00:06:10
  19. Chapter 19 : Building a Tip Calculator
    1. Build a Tip Calculator - Part 1 00:11:01
    2. Tip Calculator - CSS - Part 2 00:11:21
    3. Build a Tip Calculator - Part 3 00:09:35
    4. Build a Tip Calculator - Part 4 - Grabbing Input Field Values 00:07:48
    5. Tip Calculator - Finalized UI 00:10:51
    6. Tip Calculator - Final 00:14:32
  20. Chapter 20 : Where to Go Next, from Here
    1. Where to Go Next, from Here? 00:10:30

Product information

  • Title: D3.js: Complete Developer Data Visualization Guide
  • Author(s): Paulo Dichone
  • Release date: May 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781800565692