EIEIOTECHNOVATION
← Training programmes

EIEIO / DATA SCIENCE

Data Visualization for Web Development using D3.js

Course outline

3 days
Discuss this programme →

Duration

Data Visualization for Web Development using D3.js

3 days

Overview

This course is a training on Data-Driven Documents also known as D3, a powerful JavaScript open-source library for creating dynamic and interactive data visualizations. Throughout the course, participants will learn essential concepts, techniques, and best practices for building stunning visualizations using real-world datasets.

Prerequisite

Knowledge of basic JavaScript is an added advantage

Course Objectives

  • Understand the fundamental principles of data visualization
  • Learn how to use D3.js to create a wide range of visualizations, including charts, graphs, maps, and more
  • Learn data binding and manipulation techniques in D3.js
  • Explore advanced features such as scales, axes, transitions, and layouts
  • Gain hands-on experience through practical exercises and projects.
  • Learn best practices for designing effective and engaging data visualizations

Target Audience

For prospect who which to learn to convert data to data visualization such:

  • Data Scientist
  • Statistical Analyst
  • UI/UX designers
  • Anyone interested in creating interactive data visualizations on the web

Methodology

Interactive Lecture and Practical Coding with PowerPoint slide and VS Code as IDE

Course Overview

  • Covering the Basics
  • What Is D3?
  • What's in It?

Understanding SVG

  • What is SVG?
  • Creating SVG images
  • Basic SVG Shapes
  • SVG Paths

Fundamentals lectures

  • Adding D3
  • D3 Packages
  • Selections
  • Reviewing the Project's Structure
  • Loading Data with D3
  • Converting Data Types
  • Transforming Data for Your Visual
  • Classes and Styles
  • Joining Data
  • The Enter Selection
  • The Exit Selection
  • Displaying Data
  • Enter, Update, and Exit
  • The Update Pattern
  • JSON Requests
  • CSV Requests

Drawing Basic

  • First Steps
  • Drawing the Image
  • Drawing with SVG
  • Drawing with D3 and SVG
  • Adding Margins
  • Drawing a Bar Chart with Data
  • Bar Chart Anatomy and Setup
  • The Data Join
  • Accessor Functions
  • Adding an Axis

Updating Data

  • From the Data Join to the General Update Pattern
  • The General Update Pattern in Code

Scales

  • Understanding Scales
  • Continuous vs. Discrete
  • Writing Scales
  • Applying Scales to Visualizations
  • Introduction to Heatmaps
  • Drawing the Heatmap
  • Colour Scales
  • Understanding the Log Scale

Animations & Interactivity

  • Introduction to Animations & Interactivity
  • Intro to histogram
  • Preparing the Histogram
  • Transitions

Additional Charts

  • Even More Charts
  • Preparing the Line Chart
  • Time Scales & Parsing
  • Line Generator
  • Pie Charts
  • Drawing Arcs
  • Understanding Ordinal Scales
  • Adding Labels
  • Stacked Bar Chart
  • Band Scales
  • Finishing Chart

Conclusion

  • List of All Chart Example
  • Conclusion

Programme scope, delivery arrangements and suitability are confirmed during enquiry.