Data Visualization with D3.js

D3.js Training Overview

D3.js is a powerful tool used to create data driven documents and interactive data visualizations in modern web browsers.

Takeaways:

  • Start programming in D3.js.

  • Create visual data elements using D3.js.

  • Place visual data elements using D3.js.

  • Get and use data from the server using D3.js.

  • Create basic chart examples with Tooltips.

Prerequisites:

Students should have a basic understanding of web fundamentals (HTML, CSS, DOM, SVG, HTML5 Canvas, etc.) and JavaScript knowledge (functions, control statements, basic data types and structures), as well as an awareness of data visualization and its benefits.

Course Outline:

D3 Training Part 1 – Using Data to Create Data Visualizations

  1. Why Data Visualizations

    • A picture is worth 1000 words

    • A Famous Data Visualization

    • Data – now and in the future

    • Data is the new Oil

  2. Why build Data Visualizations with D3.js

    • What is D3.js

    • Who develops D3.js

    • Why use D3.js

    • When you should use D3.js

    • Where is D3.js used

  3. The Data Visualization Process

    • The Ben Fry Visualizing Data Process

    • Acquire

    • Parse

    • Filter

    • Mine

    • Represent

    • Refine

    • Interact

  4. Basic Building Blocks

    • Modern Browsers

    • HTML

    • CSS

    • JavaScript

    • Document Object Model (DOM)

    • Scalable Vector Graphics (SVG)

    • Web Inspector

  5. D3.js First Steps

    • HTML Setup

    • D3.js Setup

    • Source File Setup Test

    • JavaScript Console Setup Test

  6. Adding a DOM element

    • Basic Example

    • D3.js Select Method

    • D3.js Append Operator

  7. Adding an SVG element

    • Basic Example

    • D3.js Legibility

    • D3.js Style Operator

    • D3.js Chain Syntax

    • Selections as JavaScript Variables

  8. Binding Data to DOM Elements

    • Basic Example

    • D3.js SelectAll Method

    • D3.js Data Operator

    • D3.js Virtual Selections (Thinking with Joins)

    • D3.js Enter Method

    • D3.js Append Operator Revisited

    • D3.js Text Operator

    • Where did the Data go?

    • D3.js Data Operator Revisited

    • Basic Example Revisited

  9. Using Data Bound to DOM Elements

    • Basic Example

    • D3.js Text Operator Revisited

    • JavaScript Functions in D3.js Operators

    • Variables Available inside D3.js Operators

 

D3 Tutorial Part 2 – Using Data to Create Data Visualizations

  1. Creating SVG Elements Based on Data

    • The Goal

    • Create an SVG Element to Hold SVG Elements

    • SVG Circle Elements

    • Bind Data to SVG Circles

    • Use Bound Data to Alter SVG Circles

    • Styling SVG Elements Based on Data

  2. Using the SVG Coordinate Space

    • The Goal

    • Mathematical / Graph Coordinate Space

    • SVG Coordinate Space

    • .append(‘svg’) as a Coordinate Space

    • Position SVG Elements in the SVG Coordinate Space

    • Create an SVG Element to Hold SVG Elements

    • Bind Data to SVG Circles

    • Use Bound Data to Alter SVG Circle Coordinates

    • Styling SVG Elements Based on Data Revisited

  3. Data Structures D3.js Accepts

    • The Goal

    • What we have seen thus far

    • D3.js Selections are Arrays

    • Loading External Data Resources

    • JSON

    • Array of JSON Objects

  4. Using JSON to Simplify Code

    • The Goal

    • Previous Example of Three Circles

    • Bind JSON Objects to the __data__ Attribute

    • Use Bound JSON Objects to Alter SVG Elements

  5. SVG Basic Shapes and D3.js

    • The Goal

    • Drawing an SVG Circle using D3.js

    • Drawing an SVG Rectangle using D3.js

    • Drawing an SVG Ellipse using D3.js

    • Drawing an SVG Straight Line using D3.js

    • Drawing Polyline & Polygon SVG Basic Shapes using D3.js

  6. SVG Paths and D3.js

    • The Goal

    • The Shape to Make All Shapes

    • SVG Path Example

    • SVG Path Mini-Language

    • D3.js Path Data Generator Line Example

    • D3.js Path Data Generators

  7. Dynamic SVG Coordinate Space

    • The Goal

    • Three SVG Rectangle Example

    • Manually Adjusting SVG Container Space

    • Dynamically Adjusting SVG Container Space

    • The Finished Product

  8. D3.js Scales

    • The Goal

    • D3.js Scales

    • A Numerical Example

    • D3.js Scale Linear

    • D3.max

    • D3.min

    • Other D3.js Scales

  1. SVG Group Element and D3.js

    • The Goal

    • SVG Group Element

    • Grouping SVG Elements Together

    • Transforming SVG Elements Together (Part 1)

    • SVG Transform Attribute

    • Transforming SVG Elements Together (Part 2)

    • SVG Transform as a Coordinate Space Transformation

    • Grouping SVG Elements with D3.js

    • Transforming SVG Elements Together with D3.js

  1. SVG Text Element

    • The Goal

    • SVG Text Element

    • Adding an SVG Text Element

    • SVG Text Element and D3.js

  1. D3.js Axes

    • The Goal

    • D3.js Axis Component

    • Why We Add Axes

    • Horizontal Axis and Vertical Axis

    • Scale of Axis

    • Generating a D3.js Axis

    • Calling the D3.js Axis Function

Contact us

Mail: info@bigdatatraining.inCall:

+91 9789968765 / 044 – 42645495