6
$\begingroup$

I am planning to begin teaching Computer Science topics in video/slide form. I would like to be able to easily create visualizations of trees and graphs (and other data structures would be great as well). I have seen some other educators have great visualizations that allow them to beautifully visualize these concepts and even step through and highlight nodes or edges to make the content more engaging. However, I have tried googling and I can't seem to find software that does this well. I am open to either free or paid options, does anyone know any good software or tooling for this?

$\endgroup$
0

1 Answer 1

8
$\begingroup$

easily create visualizations of trees and graphs.


  • GraphViz
    Very popular. Works with different grammars for defining the graphs with DOT being the most commonly used. Somewhat easy after you get past your fist few.

  • PlantUML
    PlantUML is used to draw UML diagrams, using a simple and human readable text description. GraphViz must be installed to use. Also has an online server.

  • Cytoscape.js
    Graph theory (network) library for visualisation and analysis. Works with JavaScript, HTML and JSON to create interactive HTML pages. Not easy to learn and use but once mastered can make dynamic graphs and even animate them, e.g. walking a tree.

  • D3
    D3.js is a JavaScript library for manipulating documents based on data.

  • GoJS
    A Web Framework for Rapidly Building Interactive Diagrams.

  • LabVIEW Community Edition
    LabVIEW offers a graphical programming approach to help you visualize every aspect of your application, including hardware configuration, measurement data, and debugging.

  • Restructured Text
    Markup Syntax and Parser Component of Docutils. The web sites can even include interactive content. Example

  • LaTeX
    LaTeX is a software system for document preparation. Diagrams in research papers are typically made using LaTeX. LaTeX is not easy. LaTeX is a Turning complete programming language with packages, hierarchies, add-ins, etc. For writing technical math notation this is a popular option.

  • MathJax
    Beautiful and accessible math in all browsers

  • MarkDown
    Markdown makes writing on the web fast and easy.

  • Web pages
    HTML - The language for building web pages.
    CSS - The language we use to style an HTML document.
    Sass - Reduces repetition of CSS and therefore saves time.
    JavaScript - The programming language of the Web.

  • Doxygen
    Doxygen is the de facto standard tool for generating documentation from annotated C++ sources, but it also supports other popular programming languages such as C, Objective-C, C#, PHP, Java, Python, IDL (Corba, Microsoft, and UNO/OpenOffice flavors), Fortran, VHDL and to some extent D.

$\endgroup$
4
  • $\begingroup$ Thanks for the suggestions, much appreciated! $\endgroup$
    – arrwags
    Dec 9, 2021 at 3:44
  • 1
    $\begingroup$ Definitely Dot. Ultra simple input format, which I often generate from another program, rather than by hand. $\endgroup$ Dec 17, 2021 at 22:30
  • 1
    $\begingroup$ Of interest: Handbook of Graph Drawing and Visualization - Algorithms for laying out an drawing edge-vertex graphs. $\endgroup$
    – Guy Coder
    Dec 30, 2021 at 9:06
  • $\begingroup$ If you like this answer you should bookmark it. That way when I update this you will know. :) $\endgroup$
    – Guy Coder
    Feb 15 at 11:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.