charting-vega-lite

Overview

This skill creates interactive Vega-Lite visualizations from uploaded data. The workflow:

1. Analyze data structure and context
2. Select 5-10 meaningful chart types based on what the data represents
3. Build chart specifications programmatically
4. Generate React artifact with embedded visualizations

Critical Technical Constraint: Inline Data Island

Claude artifacts cannot use fetch() for computer:// URLs.

All data must be embedded as an inline JavaScript constant:

const DATA = [ /* embedded data array */ ];

// Later in chart specs:
spec.data = { values: DATA };

DO NOT:

• Use fetch() to load external files
• Reference external data URLs
• Create separate data files

This is the only pattern that works in Claude's artifact environment.

Primary Workflow: Data Upload → Chart Explorer

Execute this sequence when user uploads data without specifying chart type:

1. Analyze Data Structure

python /mnt/skills/user/charting-vega-lite/scripts/analyze_data.py /mnt/user-data/uploads/<filename>

Extract from output:

• fields[] (with types and statistics)
• suggested_charts[] (suggested chart types with encodings)
• sample_data (first 10 rows for understanding context)

If script fails: Use manual pandas analysis

import pandas as pd
df = pd.read_csv('/mnt/user-data/uploads/<filename>')
# Classify: numeric→quantitative, datetime→temporal, <20 unique→nominal

2. Understand Data Context

Read sample data and column names to infer what the data represents:

• Biomedical data? → Biomarkers, patient outcomes, clinical relevance
• Financial data? → Trends, comparisons, performance metrics
• Sensor data? → Temporal patterns, anomalies, correlations
• E-commerce? → Sales trends, product comparisons, conversions

Ask: What questions would someone analyzing this data want answered?

Examples:

• Assay data: Which biomarkers strongest? Patterns across samples? Variability?
• Financial: What are trends? How volatile? Seasonal patterns?
• IoT: Temporal patterns? Anomalies? Sensor correlations?