tufte-data-viz

Edward Tufte's data visualization principles, applied across every major charting library.

npx skills add caylent/tufte-data-viz Click to copy
Dark

Each chart below starts in default library styling -- gridlines, legends, bright colors, borders. Toggle to Tufte styling to see the transformation: higher data-ink ratio, direct labels, range-frame axes, and honest use of color.

Revenue Grew Steadily, Surpassing Target by Q4

ECharts

Monthly revenue vs. annual target. Direct end-labels replace the legend, and the axis spans only the data range.

Before Tufte
Rule 2: Direct labels Rule 3: No gridlines Rule 4: Range-frame axes Rule 8: Gray + highlight Rule 14: Minimal tooltip

Product A Leads Revenue, 2.2x the Nearest Competitor

Chart.js

Five products ranked by revenue. The leader is highlighted; value labels replace the axis and legend entirely.

Before Tufte
Rule 1: No top/right borders Rule 6: Bars, not pie Rule 8: Highlight the leader Rule 21: Human numbers ($42K)

Enterprise Customers Drive Higher Revenue per Deal

Plotly

Three customer segments plotted by deal size and annual revenue. Annotations at segment centroids replace the legend.

Before Tufte
Rule 2: Annotation, not legend Rule 9: Off-white background Rule 16: Dual encoding (shape + color)

North America and Europe Grew Fastest in H2

D3.js

Four regional revenue panels sharing a y-scale. Hover links across all panels to compare the same month.

Before Tufte
Rule 11: No dual y-axes Rule 15: Linked hover Rule 17: Responsive grid