Development In Progress , Planning and Design Complete, Testing Pending Figure 38.1 , Development In Progress , Planning and Design Complete, Testing Pending

A Gantt chart encodes a project schedule as a two-dimensional table: tasks on the y-axis (categorical), time on the x-axis (ordinal or continuous date scale). Each task is a horizontal bar whose position encodes start date, whose length encodes duration, and whose fill encodes phase membership. A partial fill within the bar encodes completion percentage , a fourth variable layered on the same visual element. The perceptual mechanisms exploited are position along a common scale for date alignment, and length for duration comparison.

Tasks are listed top-to-bottom on the left axis. The horizontal date scale runs left to right. Each bar spans from the task's start date to its end date , bar length equals duration. Darker fill (high opacity) shows the completed portion; lighter fill (low opacity) shows remaining work. The completion percentage appears inside wide bars or to the right of the label column. Tasks with an obsidian stroke outline are on the critical path , any delay to these tasks delays the entire project end date.

The Gantt chart stacks four distinct encodings onto a single rectangular element , which is both its power and its complexity ceiling. Position (x) encodes start and end date against a shared timeline. Length encodes duration. Fill colour encodes phase category (with redundant stroke-width for the critical path , a WCAG-compliant second channel so the distinction works in monochrome). Partial fill encodes completion percentage: the complete portion renders at full opacity; the remaining portion at 0.28 opacity.

A timeline chart (single axis of events) handles dates but loses task duration and parallel execution , the critical signal that two tasks are running simultaneously disappears into a point. You cannot see overlap in a timeline; you can only see sequence. A table shows all data fields but destroys the spatial relationship between tasks: overlapping date ranges are invisible, and the critical path , which requires tracing the longest dependency chain , cannot be identified without computation.

This Gantt chart shows the Humanitarian Data Platform Phase 1 project schedule , a fictional 14-task project spanning approximately 12 weeks. Five phases are colour-coded: Planning (walnut), Design (blood-red), Development (dim-gray), Testing (mist), and Deployment (obsidian). Planning and Design phases are complete (100 percent fill). Development is in progress at approximately 55, 70 percent completion across its tasks. Testing and Deployment have not yet started (0 percent fill, bars shown in low-opacity outline only).

Paste this into Claude Code to generate a working version of this chart, plus its data file. The result will not be a perfect replica , the goal is that the reader can run the prompt, get a chart of this type, and read its source. Generate a complete, self-contained gantt chart in D3 v7. Two files:

The ideas in this chapter didn't appear from nowhere. Henry Gantt developed the chart bearing his name around 1910 , a horizontal bar layout of tasks against time, used first to schedule ammunition production for the US Army. It is now the default project-planning visualization. Henry Gantt, circa 1910. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

The ideas in this chapter didn't appear from nowhere. Henry Gantt developed the chart bearing his name around 1910 , a horizontal bar layout of tasks against time, used first to schedule ammunition production for the US Army. It is now the default project-planning visualization. Henry Gantt, circa 1910. AI-generated portrait based on a public domain photograph (Wikimedia Commons).