D3.js: Complete Developer Data Visualization Guide

Video description

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.

What You Will Learn

  • Get hands-on with HTML, CSS, and JavaScript
  • Build data-driven visualizations effectively
  • Develop D3.js projects with a Firebase backend
  • Apply inline CSS with JavaScript
  • Build a tip calculator
  • Understand local and let scope of variables
  • Employ sectioning elements on a page
  • Create a navigation page


This course is for anyone, from developers wanting to build data-driven UI diagrams with JavaScript to data scientists looking to learn D3.js. Mathematicians who want to learn D3.js and statisticians, analysts, and data scientists who want to build data-driven visualizations will also find this course useful.

About The Author

Paulo Dichone: Paulo Dichone is a highly skilled developer and teacher with a strong background in Computer Science. With his expertise in Android App Development for mobile and web platforms, Paulo founded Magadistudio, a successful mobile app development company.

Passionate about teaching, Paulo is dedicated to helping learners master Android app development. His goal is to empower students with the knowledge and skills needed to create impressive Android applications and experience the freedom of being an Android developer.

With his deep understanding of the subject matter and a commitment to student success, Paulo Dichone is a trusted instructor who can guide learners on their journey to becoming proficient Android developers.

Table of contents

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

Product information

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