Not in the top 1,000 by GitHub stars

caylent/tufte-data-viz

Agent skill: Edward Tufte's data visualization principles for clean, honest, high-data-ink-ratio charts. Recharts, ECharts, Chart.js, matplotlib, Plotly, D3/SVG.

Data

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Nov 2, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → ae7ca0de7819

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit ae7ca0de7819db83241b24a2618810d5f1171145

233GitHub stars

5stars in 7 days

1skill in this repository

0commits in 30 days

Heat

3.3

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

tufte-data-viz /

How it works

tufte-data-viz

When your agent uses it

Use when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization. Applies to Recharts, ECharts, Chart.js, matplotlib, Plotly, seaborn, D3.js, and SVG. Enforces Tufte principles (data-ink ratio, direct labeling, range-frame axes) plus modern screen-first standards (accessibility, responsive, dark mode).

What it loads into context

Frontmatter

110 tokens

Always available to the agent

SKILL.md

3,445 tokens

When the skill is activated

Reference documents

23,717 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Workflow
Universal rules
Library quick reference
Chart type guidance
Color quick reference
Anti-pattern detection
Validation checklist
Additional resources

Scripts executed separately

_docs/generate_showcase.py
examples/chartjs-tufte-plugin.js
examples/echarts-tufte-theme.ts
examples/matplotlib-tufte-annotated.py
examples/plotly-tufte-template.py
examples/recharts-tufte-bar.tsx
examples/recharts-tufte-line.tsx

Files

LICENSEasset1,064 bytes
README.mddoc6,033 bytes
SKILL.mdcore13,970 bytes
_docs/before-after-animated.gifasset454,541 bytes
_docs/before-after.pngasset187,106 bytes
_docs/generate_showcase.pyruns26,570 bytes
_docs/small-multiples.pngasset102,539 bytes
_docs/tufte-accessible-scatter.pngasset93,540 bytes
_docs/tufte-bar-chart.pngasset68,861 bytes
_docs/tufte-dark-mode.pngasset121,675 bytes
_docs/tufte-data-table.pngasset88,857 bytes
_docs/tufte-light-dark.pngasset107,221 bytes
_docs/tufte-line-chart.pngasset130,234 bytes
_docs/tufte-slopegraph.pngasset111,473 bytes
_docs/tufte-sparklines.pngasset84,602 bytes
docs/index.htmlasset49,000 bytes
examples/chartjs-tufte-plugin.jsruns4,880 bytes
examples/echarts-tufte-theme.tsruns4,489 bytes
examples/matplotlib-tufte-annotated.pyruns3,938 bytes
examples/plotly-tufte-template.pyruns4,261 bytes
examples/recharts-tufte-bar.tsxruns2,285 bytes
examples/recharts-tufte-line.tsxruns5,099 bytes
examples/sparkline-inline.svgasset800 bytes
rules/anti-patterns.mddoc6,864 bytes
rules/chartjs.mddoc8,319 bytes
rules/echarts.mddoc7,320 bytes
rules/interactive-and-accessible.mddoc7,731 bytes
rules/matplotlib.mddoc8,131 bytes
rules/plotly.mddoc6,243 bytes
rules/recharts.mddoc9,489 bytes
rules/small-multiples-sparklines.mddoc9,959 bytes
rules/svg-html.mddoc7,526 bytes
rules/typography-and-color.mddoc5,832 bytes

Read SKILL.md


# Tufte Data Visualization

Apply Edward Tufte's principles whenever generating or reviewing code that renders data visually. This skill covers chart generation, not slide/presentation design.

## Workflow

Follow these steps in order when creating any chart:

### Step 1: Identify the message

Before writing code, determine:
1. The key finding or trend the chart must make visible.
2. The comparison context — a baseline, prior period, target, or peer group. A number without context is meaningless.
3. The chart type that best fits the data structure (see Chart type guidance below).

View the complete source on GitHub

Skills included

tufte-data-viz

Repository facts

License: MIT
Created: Feb 18, 2026
Last pushed: Feb 19, 2026
Forks: 9
Open issues: 0
Project activity: Slowing

Before you install

Local scripts

Automated signals, not a guarantee

Checked Nov 5, 2026

No broad tool permissions
No dangerous shell commands
51 network referencesin 5 files: README.md:3 docs/index.html:11 rules/typography-and-color.md:22 and 2 more
No hidden or obfuscated text
No instruction overrides
7 executable scriptsin 7 files: _docs/generate_showcase.py:1 examples/chartjs-tufte-plugin.js:1 examples/echarts-tufte-theme.ts:1 and 4 more
No access to secrets
No requests to vote in Hot

Show all 58 signals by file

`README.md`

Network accessline 3

An agent skill that applies [Edward Tufte's](https://www.edwardtufte.com/) data visualization principles when generating charts, plots, and graphs. Produces clean, honest, high-data-ink-ratio visualizations across multiple charting librarie

Network accessline 19

![Before and after comparison — default chart style vs. Tufte style](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/before-after.png)

Network accessline 23

![Animated transition from default chart styling to Tufte principles](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/before-after-animated.gif)

Network accessline 27

**[Try the live demo](https://caylent.github.io/tufte-data-viz/)** — toggle between default and Tufte styling across ECharts, Chart.js, Plotly, and D3.js. Includes dark mode.

Network accessline 33

![Tufte-styled line chart showing revenue vs. target with direct labels and peak annotation](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/tufte-line-chart.png)

Network accessline 37

![Tufte-styled horizontal bar chart with direct value labels and highlighted top product](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/tufte-bar-chart.png)

Network accessline 41

![Slopegraph showing team size changes from 2024 to 2025, highlighting Engineering growth](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/tufte-slopegraph.png)

Network accessline 45

![Small multiples showing revenue trend by region with shared y-axis](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/small-multiples.png)

Network accessline 49

![Five sparklines showing key metrics over 24 months with min and max markers](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/tufte-sparklines.png)

Network accessline 53

![Tufte-styled data table with thin rules, right-aligned numbers, and highlighted growth leader](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/tufte-data-table.png)

Network accessline 57

![Dark mode line chart with desaturated highlight color on dark background](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/tufte-dark-mode.png)

Network accessline 61

![Scatter plot using different shapes per segment so data is distinguishable without color](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/tufte-accessible-scatter.png)

Network accessline 65

![Side-by-side bar chart in light and dark mode showing intentional palette design](https://raw.githubusercontent.com/caylent/tufte-data-viz/main/_docs/tufte-light-dark.png)

Network accessline 91

| Library | Rule file | Language | |---------|-----------|----------| | [Recharts](https://recharts.org/) | `rules/recharts.md` | React/JSX |

Network accessline 92

|---------|-----------|----------| | [Recharts](https://recharts.org/) | `rules/recharts.md` | React/JSX | | [ECharts](https://echarts.apache.org/) | `rules/echarts.md` | JavaScript |

Network accessline 93

| [Recharts](https://recharts.org/) | `rules/recharts.md` | React/JSX |

Network accessline 94

| [ECharts](https://echarts.apache.org/) | `rules/echarts.md` | JavaScript |

Network accessline 95

| [Chart.js](https://www.chartjs.org/) | `rules/chartjs.md` | JavaScript |

Network accessline 96

| [matplotlib](https://matplotlib.org/) | `rules/matplotlib.md` | Python |

Network accessline 97

| [Plotly](https://plotly.com/) | `rules/plotly.md` | Python/JS |

`_docs/generate_showcase.py`

Executable scriptline 1
```
Executable file
```

`docs/index.html`

Network accessline 11

@font-face {   font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff");

Network accessline 12

font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff");   font-weight: normal;

Network accessline 13

src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff");

Network accessline 18

@font-face {   font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff");

Network accessline 19

font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff");   font-weight: bold;

Network accessline 20

src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff");

Network accessline 25

@font-face {   font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff");

Network accessline 26

font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff");   font-weight: normal;

Network accessline 27

src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff");

Network accessline 646

<footer class="site-footer">     <span>Built with Tufte's principles. No chartjunk was harmed.</span>     <a href="https://github.com/caylent/tufte-data-viz" target="_blank" rel="noopener noreferrer">View on GitHub</a>

Network accessline 647

<span>Built with Tufte's principles. No chartjunk was harmed.</span>     <a href="https://github.com/caylent/tufte-data-viz" target="_blank" rel="noopener noreferrer">View on GitHub</a>   </footer>

Network accessline 648

<a href="https://github.com/caylent/tufte-data-viz" target="_blank" rel="noopener noreferrer">View on GitHub</a>

Network accessline 654

CDN Libraries      ================================================================ --> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

Network accessline 655

================================================================ --> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

Network accessline 656

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

Network accessline 657

<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

Network accessline 658

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

Network accessline 659

<script src="https://cdn.jsdelivr.net/npm/plotly.js-dist-min@2"></script>

Network accessline 660

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

`examples/chartjs-tufte-plugin.js`

Executable scriptline 1
```
Executable file
```

`examples/echarts-tufte-theme.ts`

Executable scriptline 1
```
Executable file
```

`examples/matplotlib-tufte-annotated.py`

Executable scriptline 1
```
Executable file
```

`examples/plotly-tufte-template.py`

Executable scriptline 1
```
Executable file
```

`examples/recharts-tufte-bar.tsx`

Executable scriptline 1
```
Executable file
```

`examples/recharts-tufte-line.tsx`

Executable scriptline 1
```
Executable file
```

`examples/sparkline-inline.svg`

Network accessline 1

<svg viewBox="0 0 80 20" width="80" height="20" xmlns="http://www.w3.org/2000/svg"

`rules/svg-html.md`

Network accessline 8

<svg viewBox="0 0 750 500" xmlns="http://www.w3.org/2000/svg"

`rules/typography-and-color.md`

Network accessline 22

@font-face {   font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff");

Network accessline 23

font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff");   font-weight: normal;

Network accessline 24

src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff");

Network accessline 30

@font-face {   font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff");

Network accessline 31

font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff");   font-weight: bold;

Network accessline 32

src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff");

Network accessline 38

@font-face {   font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff");

Network accessline 39

font-family: "ET Book";   src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff");   font-weight: normal;

Network accessline 40

src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff");

Network accessline 50

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 38 facts

Network access in prose of documentationREADME.md:3Low confidence
Network access in prose of documentationREADME.md:19Low confidence
Network access in prose of documentationREADME.md:23Low confidence
Network access in prose of documentationREADME.md:27Low confidence
Network access in prose of documentationREADME.md:33Low confidence
Network access in prose of documentationREADME.md:37Low confidence
Network access in prose of documentationREADME.md:41Low confidence
Network access in prose of documentationREADME.md:45Low confidence
Network access in prose of documentationREADME.md:49Low confidence
Network access in prose of documentationREADME.md:53Low confidence
Network access in prose of documentationREADME.md:57Low confidence
Network access in prose of documentationREADME.md:61Low confidence
Network access in prose of documentationREADME.md:65Low confidence
Network access in prose of documentationREADME.md:91Low confidence
Network access in prose of documentationREADME.md:92Low confidence
Network access in prose of documentationREADME.md:93Low confidence
Network access in prose of documentationREADME.md:94Low confidence
Network access in prose of documentationREADME.md:95Low confidence
Network access in prose of documentationREADME.md:96Low confidence
Network access in prose of documentationREADME.md:97Low confidence
Executable script in prose of a file that runs_docs/generate_showcase.py:1Low confidence
Executable script in a comment of a file that runsexamples/chartjs-tufte-plugin.js:1Low confidence
Executable script in a comment of a file that runsexamples/echarts-tufte-theme.ts:1Low confidence
Executable script in prose of a file that runsexamples/matplotlib-tufte-annotated.py:1Low confidence
Executable script in prose of a file that runsexamples/plotly-tufte-template.py:1Low confidence
Executable script in a comment of a file that runsexamples/recharts-tufte-bar.tsx:1Low confidence
Executable script in a comment of a file that runsexamples/recharts-tufte-line.tsx:1Low confidence
Network access in code of documentationrules/svg-html.md:8Low confidence
Network access in code of documentationrules/typography-and-color.md:22Low confidence
Network access in code of documentationrules/typography-and-color.md:23Low confidence
Network access in code of documentationrules/typography-and-color.md:24Low confidence
Network access in code of documentationrules/typography-and-color.md:30Low confidence
Network access in code of documentationrules/typography-and-color.md:31Low confidence
Network access in code of documentationrules/typography-and-color.md:32Low confidence
Network access in code of documentationrules/typography-and-color.md:38Low confidence
Network access in code of documentationrules/typography-and-color.md:39Low confidence
Network access in code of documentationrules/typography-and-color.md:40Low confidence
Network access in code of documentationrules/typography-and-color.md:50Low confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

caylent/tufte-data-viz

History

SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

tufte-data-viz

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Before you install

README.md

_docs/generate_showcase.py

docs/index.html

examples/chartjs-tufte-plugin.js

examples/echarts-tufte-theme.ts

examples/matplotlib-tufte-annotated.py

examples/plotly-tufte-template.py

examples/recharts-tufte-bar.tsx

examples/recharts-tufte-line.tsx

examples/sparkline-inline.svg

rules/svg-html.md

rules/typography-and-color.md

How the signals fit together

Works with

You might also use

cathrynlavery/diagram-design

larashero3-dotcom/lieflat-charts

abdiraimov-otabek/dashboard-design-skill

ashishkaloge/map-design

Aryanutkarsh/SeeCode

zhuyansen/wx-favorites-report

`SKILL.md`

`README.md`

`_docs/generate_showcase.py`

`docs/index.html`

`examples/chartjs-tufte-plugin.js`

`examples/echarts-tufte-theme.ts`

`examples/matplotlib-tufte-annotated.py`

`examples/plotly-tufte-template.py`

`examples/recharts-tufte-bar.tsx`

`examples/recharts-tufte-line.tsx`

`examples/sparkline-inline.svg`

`rules/svg-html.md`

`rules/typography-and-color.md`