{"id":"041c22f9-0d76-4ca3-871c-5ef5784f3671","shortId":"nYmG76","kind":"skill","title":"tufte-data-viz","tagline":">-","description":"# Tufte Data Visualization\n\nApply Edward Tufte's principles whenever generating or reviewing code that renders data visually. This skill covers chart generation, not slide/presentation design.\n\n## Workflow\n\nFollow these steps in order when creating any chart:\n\n### Step 1: Identify the message\n\nBefore writing code, determine:\n1. The key finding or trend the chart must make visible.\n2. The comparison context — a baseline, prior period, target, or peer group. A number without context is meaningless.\n3. The chart type that best fits the data structure (see Chart type guidance below).\n\n### Step 2: Apply universal rules\n\nReview the rules below. Every rule is a default — deviate only when the user explicitly requests otherwise.\n\n### Step 3: Apply library-specific config\n\nUse the Library quick reference table to find the essential overrides for the target library. For complete code examples and helper functions, read ONE rule file from `rules/` matching the library.\n\n### Step 4: Validate\n\nRun through the validation checklist at the bottom of this file before presenting the chart.\n\n---\n\n## Universal rules\n\nRules 1–14 cover static principles; 15–19 extend them for screens; 20–22 address content and formatting.\n\n### 1. Remove top and right borders\n\nNo chart should have top or right axis lines, borders, or spines. The bottom and left axes are sufficient. Top and right lines are pure chartjunk.\n\n### 2. Direct labels, not legends\n\nLabel each data series directly — at the endpoint of a line, on or beside a bar, next to a cluster. Remove the `<Legend>` component entirely. If there is only one series, the chart title provides that context; no label is needed.\n\n### 3. No gridlines by default\n\nThe default is zero gridlines. For static charts where users need to read precise values, add horizontal-only gridlines at very low opacity (0.08–0.12). For interactive charts, prefer a contextual crosshair on hover instead (see rule 15). Never add vertical gridlines.\n\n### 4. Range-frame axes\n\nAxis lines should span only the range of the data, not from zero to some arbitrary maximum. The axis starts at (or near) the minimum data value and ends at the maximum.\n\n### 5. No 3D effects\n\nNo perspective, no depth, no shadows on chart elements. Two-dimensional data gets two-dimensional representation.\n\n### 6. No pie charts unless explicitly requested\n\nDefault to a horizontal bar chart sorted by value. If the user explicitly asks for a pie chart: maximum 4 slices, 2D only, start at 12 o'clock, direct percentage labels on each slice.\n\n### 7. Aspect ratio ~1.5:1\n\nCharts should be approximately 50% wider than tall. Standard sizes: 600x400, 750x500, 900x600. Exception: sparklines and small multiples may be more compact.\n\n### 8. Gray first, highlight selectively\n\nThe default data series color is medium gray (`#666`). Use a single accent color to highlight the most important series or data point. Never use more than 4 distinct colors. Choose the right palette type: **categorical** (4-color muted) for unordered groups, **sequential** (single-hue ramp) for ordered magnitude, **diverging** (two-hue from center) for deviation from a midpoint. See `rules/typography-and-color.md` for hex values.\n\n### 9. Off-white background\n\nLight mode: `#fffff8`. Dark mode: `#151515`. Never use pure white (`#ffffff`) or pure black (`#000000`).\n\n### 10. Serif fonts for data\n\nUse serif fonts for data labels, annotations, and chart titles: `\"ET Book\", \"Palatino Linotype\", Palatino, \"Book Antiqua\", Georgia, serif`. Sans-serif (system-ui, sans-serif) is acceptable only for small axis tick labels (11-12px).\n\n### 11. No dual y-axes\n\nTwo y-axes on one chart create false implied correlations. Use small multiples instead — two charts stacked vertically with shared x-axis.\n\n### 12. Annotate the notable\n\nIf the data contains a peak, trough, inflection point, or event boundary, add a text annotation pointing to it directly on the chart. Place annotations in the nearest clear space — offset from the data point with a short leader line if needed. When multiple annotations compete for space, keep only the most important; move others to a footnote or tooltip.\n\n### 13. Show comparison context\n\nInclude at least one reference element: a reference line (average, target, prior period), a shaded band, or a second series. A chart showing one line with no context fails the \"Compared to what?\" test.\n\n### 14. Minimal tooltips\n\nTooltips should be plain text with the data value and label. No colored background, no border, no arrow pointer, no shadow.\n\n### 15. Progressive disclosure over static density\n\nDefault to the Tufte-clean overview — high data-ink, minimal chrome. Layer details through hover, tap, and click (values, annotations, comparisons). Don't frontload everything onto a single static view. A contextual crosshair on hover replaces permanent gridlines.\n\n### 16. Accessible by default\n\n3:1 contrast ratio minimum for chart elements against their background; 4.5:1 for text in charts. Never use color as the sole differentiator — pair with shape, pattern, or direct label. Provide a text alternative for every chart (`aria-label` with key finding, or companion data table). Interactive charts must be keyboard-navigable.\n\n### 17. Responsive, not just resized\n\nCharts must have a responsive strategy — fluid (percentage width + viewBox), adaptive (breakpoint-based layout changes), or hybrid. At narrow viewports, change chart type or layout (horizontal bars for categories, reduced tick density, abbreviated labels), don't just shrink.\n\n### 18. Animate to explain, not to decorate\n\nTransitions for data changes (sorting, filtering, time progression) are good — they help the viewer track transformations. Gratuitous entrance animations, bouncing, and decorative motion are chartjunk. Duration: 200–500ms, ease-out. Always respect `prefers-reduced-motion`.\n\n### 19. Dark mode as first-class citizen\n\nDesign both light and dark palettes intentionally. Never invert colors. Reduce saturation in dark mode (bright colors \"vibrate\" on dark backgrounds). Respect `prefers-color-scheme`. Use semantic color tokens (`--tufte-bg`, `--tufte-text`, `--tufte-series-default`) so charts adapt automatically.\n\n### 20. Titles assert findings\n\nThe chart title states the key insight, not the axis description. \"Revenue Surged 23% in Q3\" not \"Revenue by Quarter, 2024\". The subtitle can provide context (\"vs. prior year, USD millions\"). If the data has no clear finding, the chart may not be needed (see rule 22).\n\n### 21. Format numbers for humans\n\nAbbreviate large numbers: $1.2M not $1,200,000. Use thousand separators for mid-range numbers (12,450 not 12450). Match decimal precision to significance (don't show $4.2391M when $4.2M suffices). Right-align numbers in tables. Use consistent units and state them once (in the axis label or title), not on every data point.\n\n### 22. Don't chart what a sentence can say\n\nIf the data is 1–2 numbers, write a sentence with inline context (\"Revenue was $4.2M, up 23% from Q2\"). If the data is a simple ranking of 3–5 items, consider a table. Charts earn their space by revealing patterns, trends, or distributions that text and tables cannot. A chart of two bars is almost always worse than a sentence.\n\n---\n\n## Library quick reference\n\nThe universal rules above are sufficient for most charts. For complete code examples and library-specific helpers, read the appropriate rule file from the `rules/` directory in this skill's folder. Only read ONE rule file per task.\n\n| Library | Rule file to read | Essential config (apply even without reading the file) |\n|---------|-------------------|--------------------------------------------------------|\n| Recharts | `rules/recharts.md` | `<CartesianGrid stroke=\"none\" />`, remove `<Legend />`, `<YAxis axisLine={false} tickLine={false} />`, `<Line dot={false} strokeWidth={1.5} />` |\n| ECharts | `rules/echarts.md` | `splitLine: { show: false }`, `legend: { show: false }`, `grid: { show: false }`, use `endLabel` on series |\n| Chart.js | `rules/chartjs.md` | `grid: { display: false }`, `border: { display: false }`, `plugins.legend.display: false`, use `chartjs-plugin-datalabels` |\n| matplotlib | `rules/matplotlib.md` | `spines['top'].set_visible(False)`, `spines['right'].set_visible(False)`, `spines['bottom'].set_bounds(min, max)`, `font.family: serif` |\n| Plotly | `rules/plotly.md` | `showgrid=False`, `showlegend=False`, `plot_bgcolor='#fffff8'`, `zeroline=False` |\n| D3/SVG/HTML | `rules/svg-html.md` | `.domain { display: none }`, no `<rect>` backgrounds, `stroke-opacity: 0.1` for any gridlines |\n\n---\n\n## Chart type guidance\n\n| Type | Key settings |\n|---|---|\n| **Line** | 1.5–2px stroke, `dot={false}` unless <7 points (then r=2), direct label at rightmost point |\n| **Bar** | Prefer horizontal for categories, sort by value descending, direct value labels, `#7a7a7a` default fill |\n| **Scatter** | Gray dots `#999` r=3, highlight key cluster/outlier with accent, regression line if meaningful (dashed, thin) |\n| **Time series** | Label events on chart (\"Recession\", \"Launch\"), range-frame x-axis, YoY via opacity (current solid, prior 30%) |\n| **Small multiples** | Same scale ALL panels, shared axis labels (x on bottom row, y on left column), no panel borders |\n| **Sparklines** | ~80x20px, no axes/labels/gridlines, min/max dots r=1.5, embed inline in text or table cells |\n| **Data tables** | No zebra striping, whitespace + thin rules every 3–5 rows, right-align numbers, `font-feature-settings: 'onum' 1` |\n| **Slopegraph** | Before/after categories, label both endpoints (value + name), gray default + highlight key slopes |\n| **Area** | Prefer lines. If area: fillOpacity 0.03–0.08, no gradient, direct labels at endpoints |\n| **Stacked bar** | Avoid — use small multiples instead. If forced: sort by total, direct labels per segment, max 4 segments |\n| **Heatmap** | Sequential or diverging palette only, value labels in cells, companion data table for accessibility |\n\nFor small multiples, sparklines, and slopegraph implementation patterns, see `rules/small-multiples-sparklines.md`.\n\n---\n\n## Color quick reference\n\n| Token | Light | Dark |\n|---|---|---|\n| Background | `#fffff8` | `#151515` |\n| Text | `#111` | `#ddd` |\n| Text secondary | `#666` | `#999` |\n| Axis/rule | `#ccc` | `#444` |\n| Grid (if used) | `#eee` (8-12% opacity) | `#333` |\n| Default series | `#666` | `#999` |\n| Highlight | `#e41a1c` | `#fc8d62` |\n\n**Categorical (max 4):** `#4e79a7` steel blue · `#f28e2b` tangerine · `#e15759` coral · `#76b7b2` sage\n\nFont stacks in rule 10. For full palettes (sequential, diverging), font loading, and old-style figures, see `rules/typography-and-color.md`.\n\n---\n\n## Anti-pattern detection\n\nWhen reviewing existing chart code, check for: legends (→ direct labels), pie charts (→ horizontal bars), 3D effects (→ flat 2D), dual y-axes (→ small multiples), heavy gridlines (→ remove or 0.1 opacity), rainbow palettes (→ gray + accent), gauge widgets (→ number + sparkline), gradient fills (→ solid color), rotated labels (→ flip axes or abbreviate), pure white/black backgrounds (→ `#fffff8`/`#151515`), hover-only information (→ tap/focus fallback), missing text alternatives (→ `aria-label`), color-only encoding (→ add shape/pattern).\n\nFor the full table with per-library detection patterns and one-liner fixes, see `rules/anti-patterns.md`.\n\n---\n\n## Validation checklist\n\nBefore presenting any chart, verify:\n\n- [ ] No top or right borders/spines\n- [ ] No Legend component — series labeled directly on the chart\n- [ ] Gridlines removed or horizontal-only at opacity <= 0.12\n- [ ] Aspect ratio approximately 1.5:1\n- [ ] Background is `#fffff8` (light) or `#151515` (dark), not pure white/black\n- [ ] Serif font for data labels and titles\n- [ ] Default series color is gray (`#666`); color used only for emphasis\n- [ ] No 3D effects, no pie chart (unless explicitly requested)\n- [ ] Axis lines span only the data range (range-frame)\n- [ ] Notable data features annotated directly on chart\n- [ ] Comparison context present (reference line, band, or second series)\n- [ ] Tooltips are plain text with no decorative styling\n- [ ] Interactive elements have tap/click/focus alternatives (no hover-only)\n- [ ] Contrast ratios meet 3:1 (elements) / 4.5:1 (text) minimums\n- [ ] Chart has a text alternative (aria-label, description, or data table)\n- [ ] Animations respect `prefers-reduced-motion`\n- [ ] Charts render usably at 320px and 1440px+ widths\n- [ ] Title states the finding, not the axis description\n- [ ] Numbers are formatted for readability (abbreviations, separators, consistent precision)\n- [ ] A chart is warranted — the data couldn't be communicated as a sentence or table\n\n---\n\n## Additional resources\n\n**Library rules** (read ONE per task): `rules/recharts.md`, `rules/echarts.md`, `rules/chartjs.md`, `rules/matplotlib.md`, `rules/plotly.md`, `rules/svg-html.md` — complete code examples, helpers, and theme registrations.\n\n**Cross-cutting** (read when specifically needed):\n- `rules/interactive-and-accessible.md` — progressive disclosure, WCAG, responsive, animation, dark mode\n- `rules/typography-and-color.md` — font loading, full palette tables, old-style figures\n- `rules/anti-patterns.md` — per-library detection heuristics and fixes\n- `rules/small-multiples-sparklines.md` — layout patterns for small multiples, sparklines, slopegraphs\n\n**Working examples** in `examples/` — one per library, plus an inline SVG sparkline.","tags":["tufte","data","viz","caylent","agent-skills","chartjs","claude-code","data-visualization","echarts","matplotlib","plotly","recharts"],"capabilities":["skill","source-caylent","skill-tufte-data-viz","topic-agent-skills","topic-chartjs","topic-claude-code","topic-data-visualization","topic-echarts","topic-matplotlib","topic-plotly","topic-recharts","topic-tufte"],"categories":["tufte-data-viz"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/caylent/tufte-data-viz","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add caylent/tufte-data-viz","source_repo":"https://github.com/caylent/tufte-data-viz","install_from":"skills.sh"}},"qualityScore":"0.467","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 35 github stars · SKILL.md body (13,450 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T18:58:31.543Z","embedding":null,"createdAt":"2026-04-18T23:58:19.392Z","updatedAt":"2026-04-22T18:58:31.543Z","lastSeenAt":"2026-04-22T18:58:31.543Z","tsv":"'-12':576,1536 '0.03':1460 '0.08':297,1461 '0.1':1304,1610 '0.12':298,1699 '000':1043 '000000':533 '1':41,49,174,191,420,785,796,1041,1107,1440,1704,1789,1792 '1.2':1038 '1.5':419,1232,1315,1411,1703 '10':534,1563 '11':575,578 '111':1522 '12':407,608,1052 '12450':1055 '13':672 '14':175,710 '1440px':1819 '15':179,311,734 '151515':524,1520,1634,1710 '16':780 '17':839 '18':883 '19':180,927 '2':60,94,223,1108,1325 '20':185,979 '200':916,1042 '2024':1003 '21':1030 '22':186,1029,1094 '23':996,1121 '2d':403,1599 '2px':1316 '3':78,116,268,784,1132,1351,1428,1788 '30':1383 '320px':1817 '333':1538 '3d':355,1596,1734 '4':154,316,401,475,484,1485,1548 '4.2':1067,1118 '4.2391':1064 '4.5':795,1791 '444':1530 '450':1053 '4e79':1549 '5':353,1133,1429 '50':425 '500ms':917 '6':375 '600x400':431 '666':456,1526,1541,1727 '7':416,1321 '750x500':432 '76b7b2':1557 '7a7a7a':1343 '8':443,1535 '80x20px':1405 '9':514 '900x600':433 '999':1349,1527,1542 'a7':1550 'abbrevi':877,1035,1629,1834 'accent':460,1356,1615 'accept':568 'access':781,1501 'adapt':854,977 'add':288,313,624,1651 'addit':1853 'address':187 'align':1072,1433 'almost':1159 'altern':818,1643,1780,1799 'alway':921,1160 'anim':884,908,1807,1886 'annot':545,609,627,636,656,761,1755 'anti':1579 'anti-pattern':1578 'antiqua':555 'appli':8,95,117,1214 'appropri':1188 'approxim':424,1702 'arbitrari':336 'area':1454,1458 'aria':823,1645,1801 'aria-label':822,1644,1800 'arrow':730 'ask':395 'aspect':417,1700 'assert':981 'automat':978 'averag':685 'avoid':1470 'axe':213,320,583,587,1603,1627 'axes/labels/gridlines':1407 'axi':204,321,339,572,607,992,1085,1376,1391,1742,1827 'axis/rule':1528 'axislin':1224 'background':518,726,794,955,1300,1518,1632,1705 'band':691,1764 'bar':243,386,871,1157,1331,1469,1595 'base':857 'baselin':65 'before/after':1442 'besid':241 'best':83 'bg':967 'bgcolor':1290 'black':532 'blue':1552 'book':550,554 'border':196,206,728,1253,1403 'borders/spines':1681 'bottom':163,210,1276,1395 'bounc':909 'bound':1278 'boundari':623 'breakpoint':856 'breakpoint-bas':855 'bright':950 'cannot':1152 'categor':483,1546 'categori':873,1335,1443 'ccc':1529 'cell':1418,1496 'center':503 'chang':859,865,893 'chart':25,39,56,80,89,170,198,259,280,301,364,378,387,399,421,547,590,600,634,697,790,800,821,833,844,866,976,984,1022,1097,1138,1154,1176,1308,1368,1585,1593,1675,1690,1738,1758,1795,1813,1839 'chart.js':1248 'chartj':1260 'chartjs-plugin-datalabel':1259 'chartjunk':222,914 'check':1587 'checklist':160,1671 'choos':478 'chrome':752 'citizen':934 'class':933 'clean':745 'clear':640,1019 'click':759 'clock':409 'cluster':247 'cluster/outlier':1354 'code':17,47,139,1179,1586,1868 'color':452,461,477,485,725,803,944,951,959,963,1512,1623,1648,1724,1728 'color-on':1647 'column':1400 'communic':1847 'compact':442 'companion':829,1497 'compar':706 'comparison':62,674,762,1759 'compet':657 'complet':138,1178,1867 'compon':250,1684 'config':121,1213 'consid':1135 'consist':1077,1836 'contain':615 'content':188 'context':63,75,263,675,703,1008,1115,1760 'contextu':304,773 'contrast':786,1785 'coral':1556 'correl':594 'couldn':1844 'cover':24,176 'creat':37,591 'cross':1875 'cross-cut':1874 'crosshair':305,774 'current':1380 'cut':1876 'd3/svg/html':1294 'dark':522,928,939,948,954,1517,1711,1887 'dash':1361 'data':3,6,20,86,230,330,346,369,450,469,538,543,614,645,720,749,830,892,1016,1092,1105,1126,1419,1498,1718,1747,1753,1805,1843 'data-ink':748 'datalabel':1262 'ddd':1523 'decim':1057 'decor':889,911,1774 'default':106,272,274,382,449,740,783,974,1344,1450,1539,1722 'densiti':739,876 'depth':360 'descend':1339 'descript':993,1803,1828 'design':29,935 'detail':754 'detect':1581,1661,1903 'determin':48 'deviat':107,505 'differenti':807 'dimension':368,373 'direct':224,232,410,631,813,1326,1340,1464,1480,1590,1687,1756 'directori':1194 'disclosur':736,1883 'display':1251,1254,1297 'distinct':476 'distribut':1147 'diverg':498,1490,1568 'domain':1296 'dot':1229,1318,1348,1409 'dual':580,1600 'durat':915 'e15759':1555 'e41a1c':1544 'earn':1139 'eas':919 'ease-out':918 'echart':1233 'edward':9 'eee':1534 'effect':356,1597,1735 'element':365,681,791,1777,1790 'emb':1412 'emphasi':1732 'encod':1650 'end':349 'endlabel':1245 'endpoint':235,1446,1467 'entir':251 'entranc':907 'essenti':131,1212 'et':549 'even':1215 'event':622,1366 'everi':102,820,1091,1427 'everyth':766 'exampl':140,1180,1869,1916,1918 'except':434 'exist':1584 'explain':886 'explicit':112,380,394,1740 'extend':181 'f28e2b':1553 'fail':704 'fallback':1640 'fals':592,1225,1227,1230,1237,1240,1243,1252,1255,1257,1269,1274,1286,1288,1293,1319 'fc8d62':1545 'featur':1437,1754 'fffff8':521,1291,1519,1633,1707 'ffffff':529 'figur':1575,1898 'file':147,166,1190,1204,1209,1219 'fill':1345,1621 'fillopac':1459 'filter':895 'find':52,129,827,982,1020,1824 'first':445,932 'first-class':931 'fit':84 'fix':1667,1906 'flat':1598 'flip':1626 'fluid':850 'folder':1199 'follow':31 'font':536,541,1436,1559,1569,1716,1890 'font-feature-set':1435 'font.family':1281 'footnot':669 'forc':1476 'format':190,1031,1831 'frame':319,1373,1751 'frontload':765 'full':1565,1655,1892 'function':143 'gaug':1616 'generat':14,26 'georgia':556 'get':370 'good':899 'gradient':1463,1620 'gratuit':906 'gray':444,455,1347,1449,1614,1726 'grid':1241,1250,1531 'gridlin':270,277,292,315,779,1307,1607,1691 'group':71,489 'guidanc':91,1310 'heatmap':1487 'heavi':1606 'help':901 'helper':142,1185,1870 'heurist':1904 'hex':512 'high':747 'highlight':446,463,1352,1451,1543 'horizont':290,385,870,1333,1594,1695 'horizontal-on':289,1694 'hover':307,756,776,1636,1783 'hover-on':1635,1782 'hue':493,501 'human':1034 'hybrid':861 'identifi':42 'implement':1508 'impli':593 'import':466,664 'includ':676 'inflect':619 'inform':1638 'ink':750 'inlin':1114,1413,1924 'insight':989 'instead':308,598,1474 'intent':941 'interact':300,832,1776 'invert':943 'item':1134 'keep':660 'key':51,826,988,1312,1353,1452 'keyboard':837 'keyboard-navig':836 'label':225,228,265,412,544,574,723,814,824,878,1086,1327,1342,1365,1392,1444,1465,1481,1494,1591,1625,1646,1686,1719,1802 'larg':1036 'launch':1370 'layer':753 'layout':858,869,1908 'leader':650 'least':678 'left':212,1399 'legend':227,1238,1589,1683 'librari':119,124,136,152,1165,1183,1207,1660,1855,1902,1921 'library-specif':118,1182 'light':519,937,1516,1708 'line':205,219,238,322,651,684,700,1228,1314,1358,1456,1743,1763 'liner':1666 'linotyp':552 'load':1570,1891 'low':295 'm':1039,1065,1068,1119 'magnitud':497 'make':58 'match':150,1056 'matplotlib':1263 'max':1280,1484,1547 'maximum':337,352,400 'may':439,1023 'meaning':1360 'meaningless':77 'medium':454 'meet':1787 'messag':44 'mid':1049 'mid-rang':1048 'midpoint':508 'million':1013 'min':1279 'min/max':1408 'minim':711,751 'minimum':345,788,1794 'miss':1641 'mode':520,523,929,949,1888 'motion':912,926,1812 'move':665 'multipl':438,597,655,1385,1473,1504,1605,1912 'must':57,834,845 'mute':486 'name':1448 'narrow':863 'navig':838 'near':343 'nearest':639 'need':267,283,653,1026,1880 'never':312,471,525,801,942 'next':244 'none':1298 'notabl':611,1752 'number':73,1032,1037,1051,1073,1109,1434,1618,1829 'o':408 'off-whit':515 'offset':642 'old':1573,1896 'old-styl':1572,1895 'one':145,256,589,679,699,1202,1665,1858,1919 'one-lin':1664 'onto':767 'onum':1439 'opac':296,1303,1379,1537,1611,1698 'order':35,496 'other':666 'otherwis':114 'overrid':132 'overview':746 'pair':808 'palatino':551,553 'palett':481,940,1491,1566,1613,1893 'panel':1389,1402 'pattern':811,1144,1509,1580,1662,1909 'peak':617 'peer':70 'per':1205,1482,1659,1859,1901,1920 'per-librari':1658,1900 'percentag':411,851 'period':67,688 'perman':778 'perspect':358 'pie':377,398,1592,1737 'place':635 'plain':716,1770 'plot':1283,1289 'plugin':1261 'plugins.legend.display':1256 'plus':1922 'point':470,620,628,646,1093,1322,1330 'pointer':731 'precis':286,1058,1837 'prefer':302,924,958,1332,1455,1810 'prefers-color-schem':957 'prefers-reduced-mot':923,1809 'present':168,1673,1761 'principl':12,178 'prior':66,687,1010,1382 'progress':735,897,1882 'provid':261,815,1007 'pure':221,527,531,1630,1713 'px':577 'q2':1123 'q3':998 'quarter':1002 'quick':125,1166,1513 'r':1324,1350,1410 'rainbow':1612 'ramp':494 'rang':318,327,1050,1372,1748,1750 'range-fram':317,1371,1749 'rank':1130 'ratio':418,787,1701,1786 'read':144,285,1186,1201,1211,1217,1857,1877 'readabl':1833 'recess':1369 'rechart':1220 'reduc':874,925,945,1811 'refer':126,680,683,1167,1514,1762 'registr':1873 'regress':1357 'remov':192,248,1222,1608,1692 'render':19,1814 'replac':777 'represent':374 'request':113,381,1741 'resiz':843 'resourc':1854 'respect':922,956,1808 'respons':840,848,1885 'reveal':1143 'revenu':994,1000,1116 'review':16,98,1583 'right':195,203,218,480,1071,1271,1432,1680 'right-align':1070,1431 'rightmost':1329 'rotat':1624 'row':1396,1430 'rule':97,100,103,146,149,172,173,310,1028,1170,1189,1193,1203,1208,1426,1562,1856 'rules/anti-patterns.md':1669,1899 'rules/chartjs.md':1249,1863 'rules/echarts.md':1234,1862 'rules/interactive-and-accessible.md':1881 'rules/matplotlib.md':1264,1864 'rules/plotly.md':1284,1865 'rules/recharts.md':1221,1861 'rules/small-multiples-sparklines.md':1511,1907 'rules/svg-html.md':1295,1866 'rules/typography-and-color.md':510,1577,1889 'run':156 'sage':1558 'san':559,565 'sans-serif':558,564 'satur':946 'say':1102 'scale':1387 'scatter':1346 'scheme':960 'screen':184 'second':694,1766 'secondari':1525 'see':88,309,509,1027,1510,1576,1668 'segment':1483,1486 'select':447 'semant':962 'sentenc':1100,1112,1164,1850 'separ':1046,1835 'sequenti':490,1488,1567 'seri':231,257,451,467,695,973,1247,1364,1540,1685,1723,1767 'serif':535,540,557,560,566,1282,1715 'set':1267,1272,1277,1313,1438 'shade':690 'shadow':362,733 'shape':810 'shape/pattern':1652 'share':604,1390 'short':649 'show':673,698,1063,1236,1239,1242 'showgrid':1285 'showlegend':1287 'shrink':882 'signific':1060 'simpl':1129 'singl':459,492,769 'single-hu':491 'size':430 'skill':23,1197 'skill-tufte-data-viz' 'slice':402,415 'slide/presentation':28 'slope':1453 'slopegraph':1441,1507,1914 'small':437,571,596,1384,1472,1503,1604,1911 'sole':806 'solid':1381,1622 'sort':388,894,1336,1477 'source-caylent' 'space':641,659,1141 'span':324,1744 'sparklin':435,1404,1505,1619,1913,1926 'specif':120,1184,1879 'spine':208,1265,1270,1275 'splitlin':1235 'stack':601,1468,1560 'standard':429 'start':340,405 'state':986,1080,1822 'static':177,279,738,770 'steel':1551 'step':33,40,93,115,153 'strategi':849 'stripe':1423 'stroke':1302,1317 'stroke-opac':1301 'strokewidth':1231 'structur':87 'style':1574,1775,1897 'subtitl':1005 'suffic':1069 'suffici':215,1173 'surg':995 'svg':1925 'system':562 'system-ui':561 'tabl':127,831,1075,1137,1151,1417,1420,1499,1656,1806,1852,1894 'tall':428 'tangerin':1554 'tap':757 'tap/click/focus':1779 'tap/focus':1639 'target':68,135,686 'task':1206,1860 'test':709 'text':626,717,798,817,970,1149,1415,1521,1524,1642,1771,1793,1798 'theme':1872 'thin':1362,1425 'thousand':1045 'tick':573,875 'ticklin':1226 'time':896,1363 'titl':260,548,980,985,1088,1721,1821 'token':964,1515 'tooltip':671,712,713,1768 'top':193,201,216,1266,1678 'topic-agent-skills' 'topic-chartjs' 'topic-claude-code' 'topic-data-visualization' 'topic-echarts' 'topic-matplotlib' 'topic-plotly' 'topic-recharts' 'topic-tufte' 'total':1479 'track':904 'transform':905 'transit':890 'trend':54,1145 'trough':618 'tuft':2,5,10,744,966,969,972 'tufte-bg':965 'tufte-clean':743 'tufte-data-viz':1 'tufte-series-default':971 'tufte-text':968 'two':367,372,500,584,599,1156 'two-dimension':366,371 'two-hu':499 'type':81,90,482,867,1309,1311 'ui':563 'unit':1078 'univers':96,171,1169 'unless':379,1320,1739 'unord':488 'usabl':1815 'usd':1012 'use':122,457,472,526,539,595,802,961,1044,1076,1244,1258,1471,1533,1729 'user':111,282,393 'valid':155,159,1670 'valu':287,347,390,513,721,760,1338,1341,1447,1493 'verifi':1676 'vertic':314,602 'via':1378 'vibrat':952 'view':771 'viewbox':853 'viewer':903 'viewport':864 'visibl':59,1268,1273 'visual':7,21 'viz':4 'vs':1009 'warrant':1841 'wcag':1884 'whenev':13 'white':517,528 'white/black':1631,1714 'whitespac':1424 'wider':426 'widget':1617 'width':852,1820 'without':74,1216 'work':1915 'workflow':30 'wors':1161 'write':46,1110 'x':606,1375,1393 'x-axi':605,1374 'y':582,586,1397,1602 'y-ax':581,585,1601 'yaxi':1223 'year':1011 'yoy':1377 'zebra':1422 'zero':276,333 'zerolin':1292","prices":[{"id":"e35df398-682d-43f1-a55d-30b1f6071f17","listingId":"041c22f9-0d76-4ca3-871c-5ef5784f3671","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"caylent","category":"tufte-data-viz","install_from":"skills.sh"},"createdAt":"2026-04-18T23:58:19.392Z"}],"sources":[{"listingId":"041c22f9-0d76-4ca3-871c-5ef5784f3671","source":"github","sourceId":"caylent/tufte-data-viz","sourceUrl":"https://github.com/caylent/tufte-data-viz","isPrimary":false,"firstSeenAt":"2026-04-18T23:58:19.392Z","lastSeenAt":"2026-04-22T18:58:31.543Z"}],"details":{"listingId":"041c22f9-0d76-4ca3-871c-5ef5784f3671","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"caylent","slug":"tufte-data-viz","github":{"repo":"caylent/tufte-data-viz","stars":35,"topics":["agent-skills","chartjs","claude-code","data-visualization","echarts","matplotlib","plotly","recharts","tufte"],"license":"mit","html_url":"https://github.com/caylent/tufte-data-viz","pushed_at":"2026-02-19T05:25:40Z","description":"Agent skill: Edward Tufte's data visualization principles for clean, honest, high-data-ink-ratio charts. Recharts, ECharts, Chart.js, matplotlib, Plotly, D3/SVG.","skill_md_sha":"367b6ffd7b176e1a6714bf9be8ea95b627186faf","skill_md_path":"SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/caylent/tufte-data-viz"},"layout":"root","source":"github","category":"tufte-data-viz","frontmatter":{"name":"tufte-data-viz","description":">-"},"skills_sh_url":"https://skills.sh/caylent/tufte-data-viz"},"updatedAt":"2026-04-22T18:58:31.543Z"}}