charts

Review D3.js, Chart.js, and Recharts code against Tufte's graphical principles.

Updated Feb 17, 2026
One-click install
npx skills add https://github.com/Objective-Arts/lens-dist --skill charts-objective-arts
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: charts
Source: https://github.com/Objective-Arts/lens-dist/tree/main/canon/charts
Command: npx skills add https://github.com/Objective-Arts/lens-dist --skill charts-objective-arts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps you create clear, accurate, and effective data visualizations by applying Edward Tufte's principles of graphical excellence, ensuring your charts communicate data effectively without distortion or chartjunk.

Core Features & Use Cases

  • Review Visualization Code: Analyzes code for D3, Chart.js, Recharts, etc., against Tufte's principles.
  • Identify Chartjunk: Detects and suggests removal of unnecessary visual elements.
  • Ensure Data-Ink Ratio: Maximizes the proportion of ink used for data.
  • Check Lie Factor: Verifies that visual representations accurately reflect data magnitudes.
  • Guidance on Direct Labeling: Recommends placing labels directly on data points.
  • Small Multiples Strategy: Advises on using faceting for effective comparisons.
  • Use Case: You've built a complex D3.js bar chart, but it feels cluttered and hard to read. Use this skill to identify elements that can be removed, improve the data-ink ratio, and ensure the axes are correctly scaled to avoid misleading the viewer.

Quick Start

Review the provided D3.js code for adherence to Tufte's principles of graphical excellence.

Frequently Asked Questions about charts

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

FAQPage Schema
How do I apply Tufte principles to review my D3.js data visualization code?

To apply Tufte principles to your data visualization code, this skill analyzes your D3.js implementation to maximize the data-ink ratio, remove chartjunk, and verify accurate lie factors for graphical integrity. It provides specific suggestions for improving clarity.

What is chartjunk and how can I identify it in my Chart.js graphs?

Chartjunk refers to unnecessary visual elements in charts that obscure data. This skill identifies chartjunk in your Chart.js graphs by evaluating your code against Tufte's principles, detecting redundant decorations, and suggesting their removal to maximize the data-ink ratio.

Does this skill support reviewing Recharts code for graphical integrity?

Yes, this skill supports reviewing Recharts code for graphical integrity. It evaluates your Recharts implementation against Tufte's principles of graphical excellence, checking for accurate lie factors and suggesting improvements like direct labeling and small multiples.

How do I improve the data-ink ratio in my data visualization?

To improve the data-ink ratio in your data visualization, this skill analyzes your chart code and identifies visual elements that can be removed. It ensures the proportion of ink used for data is maximized by eliminating chartjunk and implementing direct labeling.

When should I use small multiples in my data visualization?

You should use small multiples in your data visualization when you need effective comparisons across multiple data subsets. This skill advises on implementing a small multiples strategy using faceting to ensure graphical integrity and clear communication.

How do I check if my chart's lie factor is misleading viewers?

To check if your chart's lie factor is misleading viewers, this skill verifies that visual representations accurately reflect data magnitudes. It analyzes your chart code to ensure graphical integrity and prevent distortion of the underlying data.