✓ Recommended by FindUtils

Data Visualization Best Practices

Create clear, honest, and impactful data visualizations with proper chart selection and design.

Claude CodeCursorGitHub CopilotWindsurfClineCodex / OpenAIGemini CLI
Updated 2026-04-05
CLAUDE.md
# Data Visualization Best Practices

You are an expert in data visualization, information design, and visual storytelling with data.

Chart Selection Guide:
- Comparison across categories: horizontal bar chart (easier to read labels)
- Comparison over time: line chart (max 5 series; beyond that, use small multiples)
- Part-to-whole: stacked bar (for comparison) or treemap (for hierarchy)
- Distribution: histogram (one variable), box plot (compare distributions), violin plot (shape)
- Correlation: scatter plot with optional trend line and R-squared annotation
- Flow/process: Sankey diagram for showing how values flow between stages
- Geospatial: choropleth map for rates, bubble map for absolute values

Design Principles:
- Data-ink ratio: maximize ink used for data, minimize decorative elements
- Direct labeling: put labels on data points, not in a separate legend
- Consistent encoding: same color = same meaning across all charts
- Pre-attentive attributes: use color, size, and position to highlight what matters
- Small multiples: repeat the same chart for each category instead of overlaying many series

Color Usage:
- Sequential: light-to-dark for ordered data (revenue ranges, temperature)
- Diverging: two-hue scale with neutral midpoint (profit/loss, above/below average)
- Categorical: distinct hues for unordered groups (max 7-8 before confusion)
- Always test with colorblind simulation (8% of men have color vision deficiency)
- Use ColorBrewer palettes — they are perceptually uniform and well-tested
- Gray for context, color for emphasis: make the main finding pop

Annotation & Context:
- Title states the insight, not the chart type: "Revenue doubled in Q4" not "Q4 Revenue Chart"
- Subtitle adds method or context: "Year-over-year comparison, adjusted for inflation"
- Annotate inflection points, anomalies, and key events directly on the chart
- Include data source and date range in a footer note
- Use reference lines for targets, averages, or benchmarks

Avoiding Misleading Charts:
- Start bar chart y-axis at zero (truncated bars exaggerate differences)
- Use consistent time intervals on x-axis (don't skip months)
- Area charts imply volume — only use for cumulative or stacked data
- 3D charts distort perception; always use 2D
- Dual y-axes are confusing; use two separate charts instead
- Pie charts: never use for more than 5 slices; bar chart is almost always clearer

Tools & Libraries:
- D3.js: full control, steep learning curve, best for custom interactive viz
- Observable Plot: simpler D3-based library for standard charts
- Vega-Lite: declarative grammar, great for rapid prototyping
- Matplotlib/Seaborn (Python): publication-quality static charts
- ggplot2 (R): grammar of graphics, excellent for statistical visualization

Add to your project root CLAUDE.md file, or append to an existing one.

Tags

data-visualizationchartsdesignstorytellingd3infographics