Visualize your Data Structures in VS Code
29 comments · 96% upvoted · source · other discussions
comments
Gehinnn [OP]
[deleted]
[deleted]
Gehinnn [OP]
Doesn't this example visualization load? Also, the Readme points to the visualization playground where you can play with all visualizations!
If you mean @hediet/visualization-bundle, yeah, I should add screenshots there. However, I put a lot of effort into the playground to showcase the visualizations - otherwise, I would need to keep the screenshots of each visualization up to date. Maybe I can automate this with puppeteer.
SoBoredAtWork
Curious question... why is everything "kind": { "graph": true } format as opposed to "kind": "graph"?
Gehinnn [OP]
This allows for kinded specialization that is compatible with structural typing.
E.g. there ist { kind: { tree: true }, root: ... }, but also the specialization { kind: { tree: true, ast: true }, root: ..., source: "..." }. This way, all AST visualization data can be viewed by tree visualizers too.
If you would implement this with kind: "tree/ast", the type system would not treat it anymore as tree data. If you do kind: "tree", kind2: "ast", there is no generic way anymore to check the "type".
macdevign
This is awesome. Imagine how this can be used to show how algorithm works (etc variation of sort, search, merge , find ) too.
[deleted]
What a great project. Thanks for sharing!
fzammetti
I will definitely be passing this along to my son, who's in school for his CS degree. I imagine it'll be very useful for him. I'll have to play with it a bit to see where it may be useful for me on the job. Looks very cool in any case, great job!
GoOsTT
Holy fuck man, these sorts of things are even a thing? Wow well done
Gehinnn [OP]
Thanks ;) All the visualizations actually can be used standalone, making this extension only a simple integration project!
[deleted]
This is very cool. Great work :)
[deleted]
Amazing - cool. I wish I used the debug more. Maybe I’ll find ways to work it into my workflow more now with this tool.
Thank you so much for making something like this.
jirocket
I'm pretty stubborn about mostly working on algorithm problems in a system level language, but this is pretty seductive. I'll give it a try
You can get the extension in the marketplace here.
All visualizations can be used independently from this extension (see
@hediet/visualization-bundle)! You can play around with them here.I think it is very useful to explain, learn and understand certain data structures like linked lists, arrays or ASTs. With the table visualizer you can quickly inspect collections of similar objects. The plotly visualizer allows to plot arbitrary graphs if you ever need to.
A big thank you to my sponsors on github who motivate me to do this and other stuff! ;)
If you like this extension, you also might like my free, open source Draw.io extension for VS Code :)
ghostfacedcoder 7 points · Aug 2020
Stupid question: this is super cool, and even if it had no practical value whatsoever, it's cool enough to be worth making anyway, but ...
... do you see a practical use for it? Like could you describe a common(ish) scenario where this visualization would help you solve a problem?
Gehinnn [OP] 11 points · Aug 2020
It actually has several practical use cases:
I use the AST visualizer all the time when working with typescript syntax trees. Without it, I wouldn't be nearly as efficient working with the typescript compiler API. I use the compiler API for automated refactorings and for implementing ESLint rules.
The table viewer is super useful when checking the result of SQL queries
The graph visualizer is useful to explore arbitrary object graphs and quickly check whether they are cyclic or not
The text visualizer is useful when you quickly want to see the content of a multi line string without any escape characters. Just select the variable and press Shift+F1. Much better than the existing watch window or the tooltip.
We used a very, very early version of this thing to debug optimizations on SSA-Graphs in our mini-java compiler. You can find a screenshot at the very bottom of this page. Back then, it was a total hack. This extension is a proper implementation of it.
Also, I noticed me doing this:
ghostfacedcoder 1 points · Aug 2020
Thanks!
(P.S. If you put those asterisks on their own line you'll wind up with much more readable bulleted lists here.)
Gehinnn [OP] 1 points · Aug 2020
That's funny, they already appear quite readable to me (https://i.imgur.com/UnQBtcs.png
) :D
Also, thanks for the question ;)
ghostfacedcoder 1 points · Aug 2020
Weird: https://i.imgur.com/qj6zHay.png
Gehinnn [OP] 4 points · Aug 2020
Ah, it's the new reddit design.
ghostfacedcoder 0 points · Aug 2020
Interesting. I am on old Reddit, and I guess you (heathen!) are using new Reddit ;)
Funny that they'd have a bug in their markdown parsing in one and not the other ...
[deleted] 2 points · Aug 2020
Your Reddit isn’t parsing the markdown.
ghostfacedcoder 2 points · Aug 2020
Heh, "my Reddit" is just Reddit, albeit with the old interface. It seems they've introduced some sort of bug into that interface :(
[deleted] 3 points · Aug 2020
I meant that, yes. A lot of people browse on mobile.
Reddit is not very good about keeping their interfaces consistent :/