skills.rest
caylent
caylentOFFICIAL
Explore all skills by this author →
Website𝕏@caylentincGitHub

tufte-data-viz

Apply Edward Tufte's principles to create and review charts across multiple libraries.

196|7|Updated Feb 18, 2026
Search Tags:#accessibility#charting#data-visualization#tufte#direct-labels#range-frame
One-click install
npx skills add https://github.com/caylent/tufte-data-viz --skill tufte-data-viz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tufte-data-viz
Source: https://github.com/caylent/tufte-data-viz/tree/main
Command: npx skills add https://github.com/caylent/tufte-data-viz --skill tufte-data-viz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data visualization teams struggle to apply Edward Tufte's principles consistently across multiple libraries. This skill codifies a reusable standard to enforce high data-ink ratios, direct labeling, and range-frame axes, while integrating accessibility, responsiveness, and dark mode.

Core Features & Use Cases

  • Library-agnostic guidelines that apply across ECharts, Chart.js, Plotly, D3, matplotlib, seaborn, and SVG.
  • Rule-based templates and examples to accelerate consistent, high-quality chart production.
  • Accessibility and responsiveness baked in, including contrast, keyboard navigation, and dark-mode support.

Quick Start

Start by rendering a simple revenue vs. target line using any supported library with Tufte defaults.

Frequently Asked Questions about tufte-data-viz

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Tufte visualization principles to charts in ECharts or Chart.js?▼

This skill enforces Tufte visualization principles across ECharts, Chart.js, Plotly, D3, matplotlib, and seaborn by applying library-specific rules for high data-ink ratios, direct labeling, and range-frame axes.

What is the best way to create accessible data visualizations with dark mode support?▼

Build accessible data visualizations with dark-mode support using rule-based templates that enforce contrast, keyboard navigation, responsive behavior, and off-white backgrounds with serif typography across supported charting libraries.

Does this Tufte data visualization approach work with Python libraries like matplotlib and seaborn?▼

Yes, Tufte data visualization standards work with matplotlib and seaborn, applying consistent guidelines for sparklines, data tables, and range-frame axes alongside JavaScript libraries like ECharts, Chart.js, Plotly, and D3.

How do I add direct labels and range-frame axes to a Plotly or D3 chart?▼

Add direct labels and range-frame axes to Plotly or D3 charts by using library-specific rule overrides that enforce these Tufte defaults automatically during chart creation, review, and styling.

Can I review existing dashboards and sparklines for Tufte compliance?▼

Yes, review existing dashboards and sparklines for Tufte compliance by checking them against codified standards for honest, legible charts, high data-ink ratios, direct labeling, and accessibility integration.

Related Skills

Explore More Data & Analytics Skills→
marktantongcomarktantongco
2

charts

Generate customizable chart and diagram templates for Python, JavaScript, and CSS workflows.

Community
Advanced
coopersimson96coopersimson96
12

blog-chart

Generate inline SVG bar, donut, line, radar, and area charts for blog posts.

Community
Intermediate
lamm-mitlamm-mit
38

d3-viz

Create custom interactive SVG data visualizations with d3.js.

Community
Intermediate
jpoindexterjpoindexter

tufte

Route data visualization tasks to Edward Tufte design principles.

Community
Advanced