charting-vega-litelisted

## 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: ```javascript 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 ```bash 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 ```python 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 **R