Course outline for D3.js

D3.js Course Objectives

By the end of this course, participants will have a good hold on visualization using D3.js and how it is conceptually different from other visualization frameworks

Pre-requisites for learning D3.js

Participants must have basic knowledge of JavaScript, CSS selectors, JSON/XML data formats, AJAX/XHR and visualization

Lab Setup

Every participant must have a laptop with full Internet connectivity the following software requirements:

Training Mode

Online training for D3.js

We provide:

  • Instructor led live training
  • Self-paced learning with access to expert coaches
  • 24x7 access to cloud labs with end to end working examples

All jnaapti sessions are 100% hands-on. All our instructors are engineers by heart. Activities are derived from real-life problems faced by our expert faculty. Self-paced hands-on sessions are delivered via Virtual Coach.

Classroom training for D3.js

Classroom sessions are conducted in client locations in:

  • Bengaluru
  • Chennai
  • Hyderabad
  • Mumbai
  • Delhi/Gurgaon/NCR

Note: Classroom training is for corporate clients only

Detailed Course Outline for D3.js

Functional programming

  • Anonymous Functions
  • Inner Functions
  • Function Scope
  • Functions as Objects


  • Adding event handlers
  • Asynchronous handling of events with callbacks
  • Event bubbling
  • Event capturing


  • Shape Elements
  • Graphics Elements
  • Text Elements
  • Structural Elements

D3 – Selections

  • CSS selectors
  • Selecting elements in D3
  • Operating on Selections
  • Data Joins
  • enter/exit/update

D3 – Events

  • Adding Event Listeners
  • Access current user event
  • Work with mouse and touch events

D3 – Transitions

  • Starting transitions
  • Operating on transitions
  • Easing

D3 – Arrays

  • Mutator methods
  • Accessor methods
  • Iteration methods
  • Associative Arrays
  • Maps
  • Sets

D3 – Working with Resources

  • Making XHR Requests
  • Working with JSON
  • Working with XML
  • Working with CSV/TSV

D3 – SVG

  • Working with SVG Elements
  • SVG Axes
  • Path Data Generators
  • Working with Lines, Areas, Arcs and Chords

D3 – Visualization Examples

  • Histogram
  • Pie Layout
  • Stack Layout
  • Tree Layout
  • Treemap Layout