Create drag-and-drop data visualization tool

[zero2sudo]

Summary

• Initial implementation of DataViz Studio, a React-based data visualization tool
• Drag-and-drop interface for building Vega-Lite charts from data fields
• Support for nominal/ordinal field type toggle for flexible encoding

Features

• Field List Panel: Displays available data fields with automatic type detection (quantitative, nominal, temporal)
• Encoding Panel: Drag-and-drop shelves for X, Y, Color, and Size encodings
• Chart View: Real-time Vega-Lite chart rendering based on encodings
• Sample Data: Includes cars.json dataset for testing

Tech Stack

• React 18 + TypeScript
• Vite for bundling
• Vega-Lite for declarative visualizations

Test plan

• Run npm install && npm run dev
• Verify fields appear in left panel
• Drag fields to encoding shelves
• Confirm chart updates in real-time
• Test nominal/ordinal toggle on categorical fields