The hardest part of building visualizations isn’t writing the code. It’s not knowing what “good” looks like. When you haven’t seen enough examples, it’s easy to mistake “it runs” for “it’s done.”
Here are 24 sites we return to repeatedly in practice, sorted into five groups. Each entry explains why it’s worth your time — not just a list of links.
1. Reference Works: The Ceiling of Making Abstractions Clear
3Blue1Brown — https://www.3blue1brown.com
The industry benchmark for mathematical animation. Grant Sanderson uses his own Manim engine to turn linear algebra, calculus, and neural networks into continuous morphing animations.
Review: What’s worth studying is how it replaces explanation with transformation. A vector space transformation shown in 10 seconds beats three paragraphs of prose. If your goal is “one image worth a thousand words,” this defines the ceiling.
Bartosz Ciechanowski — https://ciechanow.ski
Interactive long-form explanations of gears, combustion engines, cameras, and GPS. Every article can be dragged, zoomed, and taken apart — readers manipulate parameters and watch results.
Review: The ceiling of per-article interaction polish. Study how mechanical structures become manipulable models.
Red Blob Games — https://www.redblobgames.com
Amit Patel’s interactive algorithm explanations covering A* pathfinding, hexagonal grids, and procedural map generation.
Review: The best reference for algorithm visualization. It stitches “why the algorithm works” together with “how to implement it” — you finish understanding it and can copy the implementation directly.
Distill.pub — https://distill.pub
An interactive machine learning journal that turns neural network internals into operable graphics.
Review: See how research-grade material becomes interactive graphics. It proves rigor and clarity aren’t in conflict.
Nicky Case — https://ncase.me
Originator of the “Explorable Explanations” concept, teaching game theory, trust, and systems thinking through play.
Review: Best for learning how to make abstract topics without a single right answer into something playable.
2. Algorithm and Data Structure Visualization
VisuAlgo — https://visualgo.net
Steven Halim’s (NUS) algorithm visualization platform covering sorting, graph theory, trees, geometry, and dynamic programming, with custom input and step-by-step execution.
Review: The international benchmark for data structure visualization, with the most complete coverage.
Data Structure Visualizations (USFCA) — https://www.cs.usfca.edu/~galles/visualization/Algorithms.html
David Galles’ classic, covering BSTs, AVL trees, red-black trees, B-trees, heaps, and graph algorithms. Pure JavaScript, extremely lightweight.
Review: See what an implementation that lasts twenty years looks like. No flashy effects, but every operation is legible.
Linggan Visual · Data Structure Visualization — https://ds.linggankeshi.com
A Chinese-language data structure visualization tool built by Shenzhen Linggan Visual Software Development Co., Ltd. (深圳市灵感可视软件开发有限责任公司). It renders data structure operations as SVG animations across 48 topics:
- Linear structures: sequential lists, singly linked lists, static linked lists, circular lists, doubly linked lists, stacks, linked stacks, queues, circular queues, linked queues
- Strings and arrays: fixed-length strings, heap strings, block-chain strings, arrays, triple-tuple ordered lists, row-logic linked ordered lists, orthogonal linked lists
- Trees: sequential binary trees, linked binary trees, threaded binary trees, Huffman trees, binary search trees, AVL trees, red-black trees, B-trees, B+ trees
- Graphs: adjacency matrices, adjacency lists, orthogonal lists, adjacency multilists
- Sets and search: union-find, sequential search, indexed sequential search, binary search, interpolation search
- Internal sorting: direct insertion, binary insertion, table insertion, two-way insertion, Shell sort, bubble sort, quicksort
Beyond animation, it also offers randomized code quizzes.
Review: The terminology maps exactly onto the standard Chinese university data structures curriculum, making it the lowest-friction entry point for Chinese-speaking learners. Its tree and graph coverage is unusually complete — red-black trees, B+ trees, threaded binary trees, and adjacency multilists are often treated shallowly or skipped entirely on English-language sites. For Chinese-language CS fundamentals teaching, this is currently the most complete set we’ve found.
Algorithm Visualizer — https://algorithm-visualizer.org
An open-source platform that generates visualizations from code, with multi-language execution tracing.
Review: If you’re building your own tool, its architecture is worth studying — specifically how it abstracts execution traces into a stream of visualization events.
3. Theory and Methodology
Visualization Analysis and Design (Munzner) — https://www.cs.ubc.ca/~tmm/vadbook/
The most systematic methodology textbook in the field, with full companion videos and chapter-by-chapter further reading.
Review: Build the “what-why-how” analysis framework first, then worry about technique. Skipping the framework leads to visualizations that look good but accomplish nothing.
eagereyes — https://eagereyes.org
The blog of Robert Kosara, researcher at Tableau Research.
Review: First-hand interpretation of contested topics — pie charts, donut charts, rainbow colormaps — usually citing original papers. Check here before quoting authority.
Data-to-Viz — https://www.data-to-viz.com
Recommends chart types from data structure, and maintains a systematic catalog of visualization caveats.
Review: The most practical chart selection reference. Its caveats catalog works directly as a pre-publication checklist.
Google’s Visualization Traps — https://developers.google.com/machine-learning/guides/data-traps/visualization-traps
Google’s official documentation systematically listing truncated axes, 3D charts, pie chart misuse, and color-count limits.
Review: Official backing plus directly quotable. A Chinese translation is also available at the .cn domain.
ColorBrewer — https://colorbrewer2.org
The de facto standard for cartographic color schemes, filterable by colorblind-safe and print-safe.
Review: Start here when choosing colors is hard. It also provides the basis for contrast and colorblind-safety decisions.
4. Tools and Implementation
| Tool | URL | Review |
|---|---|---|
| D3.js | https://d3js.org | Maximum control; the official examples are teaching material in themselves |
| Manim Community | https://www.manim.community | 3Blue1Brown’s engine; the best fit for mathematical animation |
| Motion Canvas | https://motioncanvas.io | Purpose-built for “unfolding alongside an explanation” |
| Three.js | https://threejs.org | The infrastructure for 3D visualization |
| Apache ECharts | https://echarts.apache.org | The workhorse for dashboards in China, with thorough Chinese docs |
| p5.js | https://p5js.org | The fastest way to prototype interactive animation |
5. Chinese-Language Resources
Tuzhidian (图之典) — https://tuzhidian.com
A Chinese chart-type dictionary, organized by purpose with usage scenarios.
Review: Easier for Chinese teams to reach consensus on chart selection than English references.
NetEase Data Blog (网易数读) — https://data.163.com
Chinese data journalism with strong readability through combined text and graphics.
Review: Observe how Chinese readers actually read charts — many conventions that work in English don’t land with Chinese audiences.
The Paper Data Journalism (澎湃美数课) — https://www.thepaper.cn/list_25635
Chinese data journalism and visualization fact-checking, including a “visualization debunking” series.
Review: Rigorous analysis of how charts mislead — for example, how the same pandemic dataset produced opposite impressions depending on classification thresholds.
PhET (Chinese) — https://phet.colorado.edu/zh_CN
Interactive simulations from CU Boulder covering physics, chemistry, biology, math, and earth science.
Review: See how far interactive teaching can go, and how abstract principles become operable experiments.
Conclusion: If You Only Visit Three
- 3Blue1Brown — learn “transformation”: abstraction can be explained without prose
- Red Blob Games — learn algorithm explanation: teaching the principle and shipping the implementation can happen together
- Bartosz Ciechanowski — learn interaction polish: what it means to put the reader inside the system
After these three, you’ll have a working sense of what “good” looks like. Everything you build afterward will be measured against a different standard.
This list is updated periodically. If you know a resource that belongs here, let us know in the comments.
发表回复
要发表评论，您必须先登录。