Visualize any data

Whenever Claude is asked to visualize data, you must follow the steps below.

• Chart components live in the src/components/Charts directory
• If you need a new core component type, create it in the src/components/Charts directory. Inspect the existing components to see how to create a new one. Seperation of concerns is important. Make storybook stories for the new component.
• echarts and echarts-for-react are the only libraries you can use to visualize data, and you must use them in the src/components/Charts directory.
• If you think the chart can be reusable, create it within the src/components/* directory. For example, src/components/Ethereum/AttestationsByEntity.

Step 1: What Are You Trying to Show?

Step 2: Time-Series Data Patterns

Data Type Detection → Interpolation Method

Quick Decision Tree for Time-Series

Is data always integers? 
├─ YES → Can you have 3.5 of this thing?
│         ├─ NO → Step chart (step: 'middle')
│         └─ YES → It's rounded data → Line chart
│
└─ NO → Does value stay constant between measurements?
          ├─ YES → Step chart (step: 'start')  
          └─ NO → Line chart (linear or smooth)

Step 3: Non-Temporal Data Patterns

Comparison Charts

Distribution Charts

Relationship Charts

Composition Charts

Step 4: Universal Rules

Always Do:

Never Do:

Step 5: Common Metric Patterns

Pattern Library (Generic)

Step 6: Data Volume Guidelines

Step 7: Interpolation Quick Reference

Step Chart: When to Use Which Direction

Step Chart Visual Styling (IMPORTANT)

Always use light fills with visible lines for better readability and visual hierarchy:

{
  step: 'middle',
  showArea: true,
  areaOpacity: 0.3,    // Light 30% fill - NOT solid (1.0)
  lineWidth: 2,         // Visible 2px line - NOT hidden (0)
  showSymbol: false,
}

Why this pattern:

• ❌ Heavy style (areaOpacity: 1, lineWidth: 0) looks blocky, too visually dominant
• ✅ Light style (areaOpacity: 0.3, lineWidth: 2) maintains data visibility while being easier to read
• The visible line helps trace values, while the light fill provides context without overwhelming

Smooth vs Linear for Continuous Data

Step 8: Validation Checklist

Before finalizing any chart, ask:

• Reality check: Can the values between my data points actually exist?

  • If NO → Use step chart or scatter
  • If YES → Use line chart

• Zero baseline: For bar charts, does Y-axis start at zero?

  • If NO and showing bars → Fix it

• Color count: Am I using more than 7 colors?

  • If YES → Reduce or group categories

• Label clarity: Can someone understand the chart without explanation?

  • If NO → Improve axis labels and add units

• Data density: Are there so many points they overlap?

  • If YES → Aggregate, downsample, or add interaction

• Chart purpose: Does this visualization answer the user's question?

  • If NO → Choose different chart type

Quick Decision Matrix

Key Principles to Remember

1. Match visualization to data nature - Don't force continuous interpolation on discrete data
2. Simpler is better - Use the simplest chart that answers the question
3. Context matters - Same data may need different viz for different questions
4. Always label clearly - Include units, axis names, and legends
5. Test readability - Can someone understand it in 5 seconds?