Data Visualization Tutorial

From Pixels to Dashboards to Custom Visualizations

A 13-module progressive tutorial that takes you from raw Canvas drawing through declarative Chart.js to imperative D3.js, and finishes with interactive data tables. Each module builds on the last — by the end, you will know how to render any chart your dashboard needs, build custom visualizations, and create the tables that complement them.

Prerequisites: Data Visualization Overview (encoding, perception, chart types) and basic JavaScript.

Running the Demos: Most modules use CDN-hosted Chart.js or D3.js — no npm install needed. Simply open the HTML files in a browser. Module 04 (Server-Side Charts) requires Node.js with canvas and chartjs-node-canvas packages, or a PHP server with the GD extension.

Tutorial Modules

Act I: Canvas Fundamentals

01. Hello Canvas

Draw your first chart at the pixel level:

  • Canvas 2D context & coordinate system
  • fillRect, lineTo, fillText
  • Hand-drawn bar chart (pageviews by page)
Start Module →

02. Line Charts & Scales

Build a time-series line chart:

  • Linear scale functions (domain → range)
  • Grid lines and axis ticks
  • Hover tooltips via mouse events
Start Module →

03. Data Shaping

From API response to chart-ready data:

  • fetch() + async/await
  • Array.reduce() for grouping
  • Hybrid architecture (SQL aggregation + client rendering)
Start Module →
Act II: Server-Side Rendering

04. Server-Side Charts

Generate chart images on the server:

  • Node.js: node-canvas + Chart.js
  • PHP: GD library
  • Email reports, PDF exports, OG images
Start Module →
Act III: Chart.js for Dashboards

05. Hello Chart.js

Your first declarative chart:

  • Config object: type / data / options
  • Bar, line, and doughnut charts
  • Declarative vs imperative side-by-side
Start Module →

06. Options & Styling

Production-quality chart styling:

  • Colors, fonts, scale configuration
  • Tooltip callbacks & formatting
  • Responsive + accessible charts
Start Module →

07. Live Data

Wire Chart.js to your reporting API:

  • Chart lifecycle: create / update / destroy
  • Date-range filtering
  • KPI cards with sparklines
Start Module →

08. Advanced Chart.js

Mixed charts, annotations, and export:

  • Mixed bar + line charts
  • Stacked bars & CWV threshold bands
  • PNG export via toDataURL()
Start Module →
Interlude: The Rendering Landscape

09. The Rendering Landscape

Five rendering surfaces and when to choose each:

  • Immediate vs retained mode rendering
  • SVG vs Canvas stress test (100–50K points)
  • CSS-only bar chart (progressive enhancement)
  • Hit-testing comparison (Canvas vs SVG interactivity)
Start Module →
Act IV: D3.js — Custom Visualization

10. Hello D3

Selections, scales, and data binding:

  • Select → bind → join mental model
  • SVG elements and D3 scales
  • Bar chart in D3 (three approaches compared)
Start Module →

11. D3 Transitions

Animation and interactivity:

  • Animated data updates
  • Sortable bar chart
  • Cursor-following tooltips
Start Module →

12. Force-Directed Graph

Custom visualization capstone:

  • D3 force simulation
  • Referral network visualization
  • Zoom, pan, and drag interaction
Start Module →
Act V: Data Tables & Grids

13. Data Tables & Grids

The other half of the dashboard:

  • Sortable, filterable, paginated tables
  • Chart-to-table drill-down pattern
  • CWV conditional cell styling
  • Vanilla JS vs. ZingGrid comparison
Start Module →

Companion Resources