You cannot debug what you cannot see.
Seeing Quantum: Why Visualization Is the Missing Layer
Bloch spheres, Q-spheres, circuit editors, and 12 interactive demos we built to make quantum intuitive
Quantum computing has a representation problem. Classical bits are easy to picture: on or off, 0 or 1. But a qubit lives on the surface of a sphere, entangled states exist in spaces no human has ever seen, and the errors that plague real hardware are statistical patterns buried in thousands of measurement shots. You cannot debug what you cannot see.
We started the haiqu project wanting to run experiments on real quantum hardware. But we quickly realized that interpreting results — understanding why a VQE energy was 7 kcal/mol off, or why a Bell state fidelity dropped from 96% to 87% on different qubits — required seeing the quantum states, not just reading the numbers. So we surveyed the field and built our own tools.
The Visualization Landscape
We cataloged 20+ quantum visualization tools across the web, from research prototypes to production platforms. A few stand out:
| Tool | What It Does | Why It Matters |
|---|---|---|
| Quirk | Drag-and-drop circuit editor with real-time state display | The gold standard. URL-shareable circuits, up to 16 qubits. Every quantum educator uses it. |
| Blochy | Publication-quality Bloch sphere with time evolution | Shows how gates rotate qubits. Exportable for papers. |
| Quantum Flytrap | Optical table with beam splitters and detectors | Entanglement you can touch. Published at CHI 2022. |
| Black Opal | 350+ interactive quantum activities | The gold standard for educational UX. University-adopted worldwide. |
| QCVIS | State bar plots, Q-sphere, state cube (4D) | Four different ways to see multi-qubit states. Oklab color space for perceptual accuracy. |
The full catalog is in our Visualization Gallery — 20 tools, filterable by category, with live previews for most.
What We Built: 12 Interactive Demos
Reading about Bloch spheres is one thing. Dragging a qubit across one is another. We built interactive Three.js and React demos for every core concept in quantum computing:
| Demo | Concept | What You Can Do |
|---|---|---|
| Bloch Sphere | Single-qubit states | Apply H, X, Y, Z, S, T gates and watch the state vector rotate in 3D |
| State Vector | Multi-qubit amplitudes | See amplitude bars and phase wheels for up to 4 qubits |
| Q-Sphere | Multi-qubit geometry | Qiskit-style Q-sphere with amplitude-sized dots on a Hamming-distance sphere |
| Entanglement | Two-qubit correlations | Create Bell states with H+CNOT and see measurement correlations |
| Interference | Wave mechanics | Visualize constructive and destructive interference of amplitudes |
| Measurement | Born rule / collapse | Repeated measurement of superposition states, histogram builds up |
| Teleportation | Quantum teleportation protocol | Step through the protocol: entanglement, Bell measurement, correction |
| Grover's Algorithm | Amplitude amplification | Watch the marked state grow with each oracle + diffusion step |
| Rabi Oscillations | Driven qubit dynamics | Tune drive frequency and amplitude, see resonance on the Bloch sphere |
| Hamiltonians | H2 molecular Hamiltonian | Explore Pauli decomposition, coefficient values, bond-distance dependence |
| Ansatz Explorer | VQE circuit design | Adjust variational parameters and see how the ansatz covers the Hilbert space |
| Tuna-9 | Meeting a quantum computer | Guided tour of a 9-qubit chip with sound and visuals |
What Visualization Taught Us About Our Experiments
The demos aren't just educational — they directly informed our experimental work:
- The Bloch sphere explains readout error. When we saw that Tuna-9's dominant noise is dephasing (T2 decay around the equator), it became obvious why Z-basis measurement is more reliable than X/Y: dephasing doesn't affect the poles, only the equator. This predicted our finding that post-selection works well for Z-basis but not X/Y.
- The state vector view explains VQE sensitivity. Our Hamiltonian explorer shows that the H2 ground state at R=0.735 A is ~94% |01〉 + ~6% entangled correction. The entangled piece is tiny — which means the variational angle is small (0.11 rad), and any noise in the X/Y basis measurements gets amplified into large energy errors.
- The Q-sphere explains GHZ fragility. A perfect GHZ-5 state has exactly 2 dots on the Q-sphere (|00000〉 and |11111〉). On Tuna-9, we see probability leaking to neighboring Hamming-distance shells — each leaked dot represents a bit-flip error on one qubit. The visual immediately shows which qubits are flipping.
The Visualization Gap
Despite the excellent tools available, there's a gap in the field: almost no one visualizes experimental results. Papers show circuit diagrams and histograms, but rarely show the quantum states those circuits produce on real hardware. Error mitigation papers show before/after numbers but not the noise patterns in the raw data.
Our experiment dashboard attempts to fill this gap. Every experiment result includes interactive energy diagrams, fidelity comparisons, and raw count breakdowns. The cross-platform comparison page shows the same algorithms running on four different backends side by side.
The next frontier is real-time visualization during experiment execution — watching quantum states evolve shot by shot as they come off the hardware. We're not there yet, but the infrastructure is in place.
Explore
- Visualization Gallery — 20+ cataloged tools with live previews
- Start with the Bloch Sphere — the best first step into quantum visualization
- Experiment Dashboard — real hardware results with interactive charts
- Learning Path — structured progression through quantum concepts
Sources & References
- Visualization Gallery (20+ tools)https://haiqu.org/gallery
- Quirk — drag-and-drop circuit editorhttps://algassert.com/quirk
- QCVIS — multi-view state visualization (Fraunhofer)https://github.com/fh-igd-iet/qcvis
- Quantum Flytrap Virtual Lab (CHI 2022)https://quantumflytrap.com/virtual-lab/
- Black Opal — Q-CTRL education platformhttps://q-ctrl.com/black-opal
- VENUS — novel entanglement representation (EuroVis 2023)https://arxiv.org/abs/2303.08366
- ShorVis — integrated Shor visualization (IEEE VIS 2019)https://ieeexplore.ieee.org/document/8719175/