Description

D3.js is extremely fast, and it encourages code reusability. It supports large datasets and provides an easy way of loading and transforming data.

Objectives :

a). Create stunning data visualizations using D3 and SVG

b). Understand selections to manipulate the DOM using D3

c). Learn about layouts to build various charts and graphs

d). Add transitions and animations to your graphs for a more interesting user experience

e). Use scales to help make your visuals work on any browser or device.

f). Understand the enter and exist modes in D3

g). Create responsive charts and graphs

Requirements

a). Have a basic understanding of HTML, CSS and JavaScript

b). A text editor of your choice

c). Knowledge of SVG would be beneficial, but not required.

1. D3 Overview :

a). Preparing a local Server

b). Understanding D3 & Digital Visualization.

2. Understanding SVG :

a). What is SVG ?

b). Creating SVG images

c). Basics SVG Shapes

d). SVG paths

3. D3 Fundamentals :

a). Adding D3

b). D3 Packages

c). Selections

d). Appending Elements

e). Transformation Methods

f). Classes and Styles

g). Joining Data

h). The Enter Selection

i). The Exit Selection

j). Displaying Data

k). Enter, Update, and Exit

l). The Update Pattern

m). JSON Requests

n). CSV Requests

4. Drawing A Scatterplot of D3

a). First Steps

b). Drawing the Image

c). Adding Margins

d). Accessor Functions

e). Understanding Scales

f). Writing Scales

g). Applying Scales to Visualizations

h). Refining Scales

i). Adding an Axis

j). Refining the x-axis

k). The y-axis

l). Flipping the y-axis

m). Refining the Axis Ticks

n). Summary

5. Scales

a). Continuous vs. Discrete

b). The scaleLinear() scale

c). Introduction to Heatmaps

d). Drawing the Heatmap

e). Colors with a Linear Scale

f). The scaleQuantize() Scale

g). The scaleQuantile() Scale

h). The scaleThreshold() Scale

i). Quantize vs. Quantile vs. Thresholdv

j). Color Scales

k). Understanding the Log Scale

l). The scaleLog() Scale

m). Summary

6. Animations and interactivity :

a). Introduction to Animations & Interactivity

b). What is a histogram

c). Preparing the Histogram

d). Understanding the Problem

e). Creating Bins

f). Histogram Finishing Touches

g). Changing Metrics with Events

h). Updating the Chart

i). Transitions

j). Understanding the Problem

k). Fixing the Transition

l). Fixing the Exit Transition

m). Tweaking the Bars and Labels

n). Adding the Mean

o). Adding a Tooltip

p). Mouse Events

q). Formatting

r). Understanding the Voronoi Diagram

s). Creating a Voronoi Diagram

t). Fixing the Voronoi Diagram

7. Even more charts

a). Preparing the Line Chart

b). Time Scales & Parsing

c). Line Generator

d). Adding an Axis

e). Preparing the Tooltip

f). Understanding Bisectors

g). Custom Bisectors

h). Finishing the Tooltip

i). Getting Started with Pie Charts

j). Drawing Arcs

k). Understanding Ordinal Scales

l). Using Ordinal Scales

m). Adding Labels

n). Fixing the Pie Chart

o). Preparing the Stacked Bar Chart

p). The Stack Function

q). Band Scales

r). Drawing the Stacked Bars

s). Drawing the Axis

t). Finishing Touches

8. Conclusion

a). Sketching

b). Responsive Charts

c). Conclusion

For more inputs on Learn and Understand D3.js for Data Visualization Training/staffing you can connect here.
Contact the L&D Specialist at Locus IT

Locus Academy has more than a decade experience in delivering the training/staffing on D3.js for Data Visualization for corporates across the globe. The participants for the training/staffing on D3.js for Data Visualization are extremely satisfied and are able to implement the learnings in their on going projects.