D3.js Essential Training

Course details

Unlock the power of data visualization with this comprehensive D3.js course. Learn how to build responsive, interactive, and visually stunning charts and graphics step by step. Whether you're working with CSV, JSON, or real-time data, you'll master the tools to import, transform, and visualize complex datasets, including advanced data manipulation techniques like d3.stack() and d3.rollup(). From scales and axes to responsive design to dynamic transitions and event triggers, this course equips you with everything you need to bring your data to life. It’s an ideal fit for web developers looking to elevate their skills to professional, informative visualizations—or wanting to learn D3 as a foundation for use in other tools, such as Highcharts, Observable, or building Power BI custom visuals. Jump in and discover how D3.js can transform the way you present data.

Learning objectives
Understand the core principles of data visualization in the browser, including DOM manipulation, SVG elements, data binding, and scales.
Import and transform data using D3.js, preparing it for effective visual representation.
Create responsive, interactive graphics using D3, incorporating event listeners, transitions, and SVG manipulation.
Apply D3 layout modules, scales, and axes to build structured, professional data visualizations.
Evaluate and choose appropriate D3 techniques for different data types and communication goals.

Concepts

Introduction

Transform your data visuals with D3.js
Explaining D3
What you need to know
Using the exercise files

Foundational Web Knowledge Refresher

How browsers make sense of HTML
Introducing SVG
Unlearning CSS - Why HTML CSS doesn't work with SVG
Responsive design
Pulling the D3 library into your HTML page
Understanding the DOM and console

Making a Simple Bar Chart with D3

Adding an SVG with D3
Adding data-driven rectangles
Dynamic attributes for shapes
Seeing the code how the browser sees it
Challenge - Add circles for each datapoint
Solution - Add circles for each datapoint

Introducing All of SVG's Basic Shapes

Drawing circles and ellipses
Drawing lines and styling them
Adding text
Challenge - Create a traffic light
Solution - Create a traffic light

Advanced Shapes with D3's Path Element

Introducing path
Using line and area generators
Using group elements to organize your elements
Dealing with NaNs using defined()
Challenge - Line chart with missing data
Solution - Line chart with missing data

Scales and Axes

Introducing scales
Position elements with a linear scale
Creating a linear axis
Positioning and formatting our axis
Creating a time scale
Creating a time series axis
Creating an ordinal scale and axis
Using color scales
Challenge - Add Fahrenheit scale
Solution - Add Fahrenheit scale

Importing Data into D3

Parsing a CSV file using promises()
Drawing a line chart from CSV data
Parsing and displaying nested JSON with nested selections
Understanding and using D3 fetch
Challenge - Line chart from scratch scales and generators
Solution - Line chart from scratch scales and generators

Layout Modules

Making a tree from JSON using D3-hierarchy
Powering a treemap from D3-hierarchy
Pie charts and arcs with D3-shape
Leveraging community plugins - Using D3-hexbin
Challenge - Create a donut chart
Solution - Create a donut chart

Advancing Data and Selections

Drawing a stack area with D3.stack() and D3.area()
Drawing a stack area chart
Handling data changes with enter and exit selections
Streamline enter and exit selections with merge() and join()
Manipulating data with. group() and .rollup()
Mastering merge(), map(), sort() and .filter()
Challenge - Create a stack chart
Solution - Create a stack chart

Interactivity

Making your graphic responsive
Using CSS to create transitions
Making sense of D3 transitions
D3 events and the data they expose
Introducing zooming, dragging, and brushing with D3
Challenge - Hovering and tool tips
Solution - Hovering and tool tips

Conclusion

Leveling up in D3