How I Built 14 Interactive Visualizations Using Google AI Studio

Ritam Pal — Tue, 16 Dec 2025 06:18:46 +0000

Hello !!

Hey!! How are you?? I recently participated in the Google Deepmind X Kaggle hackathon, and thought why not share my experience in here, I really enjoyed building StructViz AI, and although we had to submit a write-up in just 250 words, I thought it was quite less to express my encounters with the bugs, features I had built, so hop on with me!!

The Discovery: A Late-Night Scroll That Changed Everything

It was a dull evening, when I stumbled across the Gemini 3 Pro Vibe Coding Hackathon announcement. As a final-year CSE student, I'd been preparing for technical interviews and struggling with the same problem countless times: understanding data structures from static textbook diagrams.

The hackathon promised something intriguing—Google AI Studio's vibe coding where you describe what you want and Gemini generates working code. The deadline was tight: December 5-12. Just one week.

Philipp's post

The "Aha" Moment: Why DSA Visualization?

The Problem I Knew Too Well

Like 70% of CS students, I'd spent hours staring at diagrams of binary trees, trying to mentally simulate rotations in AVL trees, or visualizing how A* pathfinding actually works. Existing tools like VisuAlgo helped, but they lacked something crucial: interactive AI guidance.

The Gemini 3 Pro Opportunity

Reading about Gemini 3's capabilities, some features jumped out:

Multimodal Input: Upload a hand-drawn tree diagram? Voice commands?
Advanced Reasoning: Explain why an algorithm chose a specific path
Native AI Studio Integration: Build apps through natural language

The vision crystallized: What if you could draw a data structure on paper, upload it, and watch AI animate it step-by-step while explaining every decision?

Planning: From Wild Idea to Structured Plan

I created a priority matrix, brainstorming with Perplexity, Gemini, my brain (surprisingly):

Must-Have:

Binary Tree, Stack, Queue, Linked List
Basic animations with playback controls
Gemini AI Tutor integration

Nice-to-Have:

AVL Tree, Trie, Hash Table
Sorting algorithm visualizations
Advanced graph algorithms

Stretch Goals:

Pathfinding (A*, Dijkstra)
Dynamic Programming tables
Geometric algorithms (Convex Hull)

The Build: Days of Code, Coffee, and Chaos

Day 1: First Steps with AI Studio

Couldn't find my first prompt, so see this

My first prompt was to make a skeleton structure, maintaining good folder structure, code quality, and type safety—basically, I talked to Gemini like a senior engineer briefing an intern. The kind of detail where you specify everything because you've been burned before by assumptions.

Watching Gemini generate a working component in seconds was surreal. But then came the first challenge: animations looked like PowerPoint transitions from 2003. Choppy, lifeless, and frankly embarrassing for something claiming to be "interactive."

Evening Progress:

Binary Tree with basic insert/delete
SVG-based rendering
Animations were janky (fixed by switching to Framer Motion)

Queue visualization, it was the 2nd visualization I added

I established a pattern: prompt → test → refactor → repeat. I made in detailed prompts, with each and every detail as a Senior Engineer would say to an Intern, specifying each details, checking and reading it and then feeding it to AI Studio.

Wins:

Stack visualizer (with "browser history" demo)
Queue visualizer (with visual conveyor belt)
Linked List with pointer animations

The Crisis: The GSAP Timeline Bug

Around 11 PM, the Linked List "Play" button decided to stop working. Not crash—just... nothing. Click. Silence. The timeline existed but refused to play. Four hours of debugging later, I discovered the timeline wasn't being initialized properly on component mount. The fix was embarrassingly simple once I found it. This taught me a valuable lesson: when AI-generated code breaks, the bug is usually in the handoff between what AI generated and what I modified.

Day 2: Expansion and the React Router Disaster

Ambition kicked in. I added AVL Tree, Segment Tree, and Trie visualizers.

Then I made a critical mistake: adding routing.

Routing error

The Error:

Minified React error #31
Objects are not valid as a React child

This cryptic message greeted me for four straight hours. The screen went blank. Not a single component rendered. The browser console mocked me with stack traces pointing to... minified React internals. Helpful.

Hours Lost: 4

The Pivot: I ripped out React Router entirely. Every route, every Link component, every fancy navigation transition—gone. Replaced it with a simple useState managing which visualizer to show. The app worked again in 15 minutes.

Lesson: Don't over-engineer under time pressure. That fancy routing system? Not worth it when the deadline is in 5 days and you have 10 more visualizers to build. Sometimes the scrappy solution is the right solution.

Day 6: The Advanced Features Push

Err, don't ask me where did Day 3, 4, 5 go(I had other work, no, I was not procrastinating !!)

Building A* and Dijkstra side-by-side was the most fun I had all week. Watching them race across the grid—Dijkstra expanding uniformly like a shockwave, A* beelining toward the target with laser focus—was genuinely exciting. I added maze generation algorithms (recursive division, Prim's), wall drawing with click-and-drag, and draggable start/end nodes.

Pathfinding

The table-filling animation was the most satisfying to watch. Each cell lighting up as it's computed, dependency arrows showing which previous cells contributed, the final path traced back in gold. I built Longest Common Subsequence, 0/1 Knapsack, and Edit Distance. Watching the Knapsack table fill row-by-row made me finally understand why we needed 2D DP tables. Textbooks never clicked like this.

DP animation

Geometric algorithms were visually stunning but computationally tricky. Graham Scan wrapping around scattered points like a rubber band, Jarvis March "gift wrapping" with deliberate precision. The challenge? Calculating polar angles without floating-point errors ruining the visualization. Math is hard when you're also debugging animations at 9 PM.

Convex Hull

The Crisis: Responsive Design

Everything overflowed on mobile. The pathfinding grid was a 50x25 cell monstrosity that laughed at viewport constraints. Convex Hull points were untappable pinpricks. I spent two hours adding responsive breakpoints, recalculating cell sizes dynamically, and making touch targets 44x44px minimum. The grid now adapts: 15x20 on mobile, 25x50 on desktop. Finally usable on all devices

Day 7: The Final Sprint

Deadline: 11:59 PM UTC (5:29 AM IST Dec 13)

Morning: ug fixes across all 14 visualizers. The hash table collision demo wasn't visual enough—added step-by-step narration. The sorting algorithm race mode wasn't... racing—fixed GSAP timing. The matrix rotation looked janky—switched to layout animations.

Afternoon: AI Tutor integration everywhere. Every visualizer needed the ChatPanel with context-specific prompts. "Why did this AVL tree rotate left?" "Show me the shortest path." "Explain this DP recurrence relation." Testing Gemini's function calling—when the AI says "let me highlight the root node," it actually does.

Evening: Writing the 250-word submission. Every. Word. Counted. Cutting features I loved because they didn't fit. Rewriting five times to hit that balance of technical depth and accessibility.

Night: Recording the demo video. Take 1: forgot to press "Record". Take 2: accidentally closed the tab. Take 3: nailed it, but realized I should show the AI features more. Take 4: perfect. Exported, uploaded, submitted at 4:47 AM IST. I had 42 minutes to spare. Collapsed into bed immediately.

Challenges: What Almost Broke Me

1. The Three.js Nightmare

The Problem: LinearEncoding is not exported

The ambitious plan including 3D tree visualizations using React Three Fiber. Rotate the tree in 3D space, zoom in on nodes, fly-through animations. It was going to be gorgeous.

Then: version conflicts. Three.js r152 changed the color management API. React Three Fiber expected the old API. AI Studio's CDN served incompatible versions. Four hours of debugging importmaps, version pins, and Stack Overflow threads led to one conclusion: not worth it.

The Pivot: Dropped 3D visualizations entirely, focused on polished 2D with excellent animations. Turns out, smooth 2D with Framer Motion's layout animations looks just as good—and actually works across all devices without WebGL compatibility issues.

2. Performance on Mobile

14 visualizers meant 14 responsive designs. The pathfinding grid with 1,250 cells? Laggy on phones. The convex hull with 100 draggable points? Unresponsive touch events. The sorting visualizer with 100 bars? Slideshow framerates.

Solution: Dynamic complexity scaling. Mobile gets smaller grids (15x20 vs 25x50), fewer points (max 30 vs unlimited), simplified animations (reduce spring physics calculations). Use requestAnimationFrame properly. Debounce touch events. Virtual scrolling for large data sets. It's not glamorous, but it works smoothly.

3. Scope Creep

Every day I wanted to add "just one more feature", "What if users could race four sorting algorithms simultaneously?", "The trie needs voice-activated word insertion.", "Segment trees should support lazy propagation visualization."

The Reality Check: I had 7 days. Not 7 weeks. Some features got cut: Turing Machine visualizer, N-Queens solver, fractal generators, multiplayer mode where two users race to solve problems. They're now in the "v2.0" backlog, which is developer-speak for "maybe someday."

Results: What I Built in 60 Hours

By the Numbers

14 Complete Visualizers: Binary Tree, AVL Tree, Trie, Hash Table, Stack, Queue, Min/Max Heap, Linked List, Graph Algorithms, Sorting Algorithms, Pathfinding, Dynamic Programming, Segment Tree, Convex Hull
Lines of Code: 100K (I guess?! Check out the repo and guess in the comments!!)

Feature Highlights

Animations:

Spring physics for natural motion
Timeline controls (play/pause/step)
Speed adjustment (0.5x to 5x)

Responsive:

Works on phones, tablets, desktops
Touch-optimized controls
Adaptive layouts

DP page responsiveness

Sorting page responsiveness

Impact: Why This Matters

Personal Growth

Building StructViz AI taught me:

AI as a Development Partner: Vibe coding accelerated development 10x
Simplicity Wins: Dropped complex features when they became blockers
Architecture Matters: Feature-Sliced Design saved me during rapid expansion
Deadlines Drive Innovation: 7 days forced creative problem-solving

For the CS Community

If this helps even one student finally "get" how AVL rotations work or why A* is faster than Dijkstra, the sleepless nights were worth it.

Lessons for Future Hackathon Participants

Do's

Start Simple: MVP first, features later
Test Early: Mobile testing on Day 1, not Day 7
Embrace AI: Let Gemini handle boilerplate, you focus on logic
Document as You Build: Screenshots, notes, commit messages
Know When to Pivot: Routing broke? Use state. Three.js conflicts? Go 2D.

Don'ts

Don't Over-Engineer: Feature-Sliced > Complex routing
Don't Fight the Framework: Work with AI Studio's strengths
Don't Skip Breaks: Burnout kills productivity
Don't Wait to Submit: Submit early, iterate if time permits

What's Next: Version 2.0

The hackathon might be over, but StructViz AI is just beginning:

Planned Features:

Turing Machine visualizer
Real user testing with CS students
Mobile app version
Live Hosting

Want to contribute? https://github.com/RitamPal26/StructViz

Demo/Follow me for more

Kaggle Submission: https://www.kaggle.com/competitions/gemini-3/writeups/structviz-ai

Follow My Journey: https://x.com/JuniorDev26

What I learnt in the 5-Day Gen AI Intensive Course with Google

Ritam Pal — Thu, 04 Dec 2025 16:57:29 +0000

This is a submission for the Google AI Agents Writing Challenge: Learning Reflections

Hello!! I recently completed the 5-Day Gen AI Intensive Course with Google, mainly out of 2 reasons, first, I like Python too much( sorry Typescript :( ) and secondly, AI Agents are cool!! So, I though why not make a post sharing what I learnt in this, along with how I have developed some AI Agents before.

So, let me take you through the days,

November 10th, 2025. I signed up for the AI Agents Intensive with a portfolio of agent projects already under my belt—Discord bots that answered documentation queries using RAG, a real-time voice agent built with LiveKit and FastAPI, even a customer support system for a hackathon. But here's the truth: every single project felt like I was building a house of cards. One weird edge case, one hallucinated API call, one unexpected user input—and everything collapsed. I would vibe-code a little bit more than my understanding, not taking the fundamentals in mind, so, I used NotebookLM and wanted to understand the whitepaper on foundational LLMs explained transformers from first principles, and suddenly I understood why my prompts worked or failed. When I completed the codelab on prompting fundamentals, I learned about parameters I'd been ignoring—temperature, top-k, top-p—and how they actually controlled output randomness and creativity.

The evaluation codelab changed everything. I'd been manually checking agent outputs like a caveman. Now I learned about autoraters and structured outputs—ways to programmatically verify if my agent was hallucinating or staying on track. Pair it with the embeddings whitepaper finally explained what I'd been cargo-culting. I'd used Chroma and vector stores before, but never understood why certain searches failed. Building the document Q&A system with RAG from scratch taught me chunk sizing, overlap strategies, and how embedding quality directly impacts retrieval.

So, the whitepaper's were quite high level for me, as I know some basic ML/DL, but I tried to understand the low lying levels through Gemini(ahh yes!! understanding AI using AI), but then as I though the AI couldn't get any smarter, the next I got to know about multi-agents(I implemented this in 1 of my projects maybe, slight of).I understood state machines, agent loops, and how to handle multi-turn conversations without losing context.

Domain-Specific LLMs are something I like, it is more relevant than working with an LLM that knows a little bit of everything, and I personally like those. I now understood more and more, as I filled the knowledge gaps.

But as all things come to an end, so does this course, MLOps, hmm do people like joining Ops with everything? DevOps, DataOps, what next? So, Day 5, I understood and watched the video, as there was no codelab, although it would have been better if we could make a sandbox and deploy the agent, but I enjoyed the course and would like to end by saying AI Agents are quite interesting and fascinating, and I think they will be more and more used by people, helping them in everyday lives, making their lives easier.

So, this was all from me today!! Hope you liked it, comment down what you liked/disliked about my post or the AI Agents course. See ya!!

Forem: Ritam Pal