Interactive Algorithm Visualizer from Paper Abstract

Paste an arXiv abstract and get a runnable, step-through visualization of the algorithm it describes.

Difficulty: 1-week | Stack: Python, FastAPI, Claude API (claude-sonnet), React, D3.js or Mermaid.js

Who this is for

CS students and ML practitioners who struggle to internalize algorithm behavior from prose — they get a visual, interactive state machine they can step through and parameterize.

Build steps

1. Build a FastAPI endpoint that accepts an abstract or short paper excerpt and prompts Claude to extract: state variables, transition rules, termination conditions, and iteration structure as structured JSON.
2. Define a JSON schema for ‘algorithm graphs’ (nodes = states, edges = transitions with guards/actions) and validate Claude’s output against it with Pydantic.
3. Build a React frontend with a D3.js force-directed graph that renders the algorithm graph and a ‘Step’ button that advances through one iteration using the transition rules.
4. Add a parameter panel so users can set initial values (e.g., learning rate, array size) and watch the state evolve across steps.
5. Cache parsed algorithm graphs in SQLite by arXiv ID so repeated queries skip the LLM call.

Risks

• Claude may produce plausible-sounding but structurally incorrect transition graphs for complex algorithms — need a human-review step or unit tests on known algorithms (bubble sort, BFS) to calibrate accuracy.
• D3.js layout for dense graphs can become unreadable quickly; may need to pivot to a simpler linear/flowchart renderer for most algorithm types.
• Rate limits and cost spike if the frontend allows arbitrary-length paper sections — must enforce strict input truncation and per-user rate limiting.