Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Data Structure Visualizations (usfca.edu)
492 points by yurish on July 7, 2021 | hide | past | favorite | 19 comments


I worked on algorithm visualizers in the past and found the effort necessary to get something better than static pictures and text to be immense. Every single combination of data structure and algorithm needs to have a semi-custom designed visualizer in order for it to be easier to understand and appealing.

A human tutor can take pauses when something isn't clear, but a visualizer is forced to choose between checking for the user's understanding and not interrupting the flow.

Link on BFS and Topological Sorting for instance:

https://csacademy.com/lesson/breadth_first_search

https://csacademy.com/lesson/topological_sorting


Yes.

Most of the time, what you want is not a clever visualization of a complex algorithm, but a simple distillation of its essence. Static diagrams are usually simpler than visualizations. And if you feel the inherent complexity can only be conveyed with animation, it's likely you haven't fully distilled your understanding.


Some concepts are infinitely easier to understand with an animation.

https://en.wikipedia.org/wiki/Anti-twister_mechanism


Yeah, that's why I used the qualifiers "most of the time" and "usually".

But even in that example, while the animation instantly conveys the high-level idea, it's still a bit magical: "I get what's happening, but not exactly how." To understand in detail what's going on, carefully chosen freeze frames with an explanation would probably be better, especially complemented by the animation. The ability to slow down, reverse, and interact could work too here.


Right. There are also things called Optical Illusions which do not really explain anything but mislead you into thinking you see something which is not there. Optical illusions are often animated so seeing this Anti-twister mechanism makes me suspect I'm perhaps looking at some kind of optical illusion.


There was a great video on how a car’s differential works where they start by building it out of sticks and demonstrate how to progress from there to helical gears. That approach made it click for me while nothing else did prior, including playing with an actual differential.


You must mean:

https://youtu.be/yYAw79386WI?t=214

I agree it's a great explanation, and the video format feels right for this. Still, it's not the video per se that makes this great, but the way the concept has been broken down into simple (almost unmoving) parts for you, and is then built up in steps.


I really like the style of your visualizations!

I built something similar while learning for my algorithms course ate university. [0]

It not fully polished yet and not algorithms I had planned to implement are done yet. But I learned a lot doing it and some algorithms like "rotating calippers" or delaunay triangulation are really fun to watch.

Usage: click the canvas to create nodes, drag from their border to connect them. Click the "algorithms" tab on the top and select an algorithm to run in the right sidebar. The use the slider to step through the result.

[0] https://algorithms.laszlokorte.de


Some past related threads:

Data Structure Visualizations (2011) - https://news.ycombinator.com/item?id=19082943 - Feb 2019 (33 comments)

Data Structure Visualizations - https://news.ycombinator.com/item?id=15480517 - Oct 2017 (9 comments)

Animated Data Structures - https://news.ycombinator.com/item?id=15306593 - Sept 2017 (1 comment)

Data Structure Visualizations - https://news.ycombinator.com/item?id=14064865 - April 2017 (2 comments)

Data Structure Visualizations (2011) - https://news.ycombinator.com/item?id=10183811 - Sept 2015 (3 comments)

Data Structure Visualizations - https://news.ycombinator.com/item?id=6928904 - Dec 2013 (35 comments)

Data Structure Visualization - https://news.ycombinator.com/item?id=2505862 - May 2011 (7 comments)


If you are into visualizations, you also might find my debug visualizer extension for vscode helpful:

https://github.com/hediet/vscode-debug-visualizer

When debugging JS, there is a nice way to provide visualizations for application specific objects without touching the application code.

Combined with time travel debugging which allows to step backwards, it is really easy to understand complex algorithms:

https://github.com/hediet/vscode-delorean-js-debug

The visualization library is independent and open source. There is also a rust cli and a web playground. I'm very open for contributions! (especially new visualizations)


Looks quite nice.

Maybe you already know this as background work for your plugins, but Symantec C++ was one of the first IDEs to provide this kind of tooling.

I had quite some envy not having similar feature on Borland compilers.


Related: Check out my visual programming approach to teaching binary tree algorithms:

https://ieeexplore.ieee.org/abstract/document/545265

http://opsis.sourceforge.net


This is very interesting! I’m taking DSA next semester and learning on my own over the summer. this visual will be very helpful.


Possibly the coolest data structure to visualize was invented to visualize complex data: zig-zag from the great Ted Nelson.


I'm taking data structures during summer and this was incredibly helpful when we were doing trees.



I would have loved to see how a HAMT or a CHAMP works!


this website was a life saver during uni


This is a great learning tool.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: