DataViz Studio

A drag-and-drop data visualization tool built with React, TypeScript, and Vega-Lite.

About This Project

This repository is a demonstration of Claude Code and Claude Opus 4.5, created by zero2sudo in partnership with Anthropic. Watch the original video: instagram.com/p/DSgWeRhAb1j

Educational Resource

This project serves as an educational resource for students and developers who want to see how a senior engineer uses Claude Code to build real applications. Feel free to explore the codebase, review the commit history, and learn from the development process.

For Aspiring SWE Interns & CS Students

Want to supercharge your learning while exploring this codebase? Use this Notion template to track your progress, document concepts, and build a learning journal as you work through the project:

📓 SWE Intern Learning Journal

The template pairs perfectly with the CLAUDE.md file in this repo, which is designed to help you learn by treating Claude Code as a mentor that explains concepts in context of this actual codebase.

Getting Started as an Intern

1. Fork this repository — Click the "Fork" button at the top right of this page to create your own copy
2. Clone your fork locally:

   git clone https://github.com/YOUR-USERNAME/datavisualization.git
   cd datavisualization

3. Install dependencies and run:

   npm install
   npm run dev

4. Follow along with weekly assignments — Tune in to @zero2sudo on Instagram for weekly SWE intern assignments designed to help you build real skills with this codebase

Live Demo

Try the application yourself: https://zero2sudo.github.io/datavisualization/

Features

• Drag-and-drop interface for building charts
• Automatic field type detection (quantitative, nominal, temporal)
• Real-time Vega-Lite chart rendering
• Support for X, Y, Color, and Size encodings

Getting Started

npm install
npm run dev

Connect

Follow for more content: instagram.com/zero2sudo