websemantics/lolviz.js

 ╭○──╮  ╭──────╮  ╭○──╮  ╭───╮╭─╮  ╭───╮  ╭──────╮                 ╭───╮  ╭──────╮
 │   │  │  `╭╮ │  │   │  │   ││ │  ├─○─┤  ├────  │  ╭─────────────▷│   │  │ `○───┤
 │   │  │   ││ │  │   │  │   ╰╯ │  │   │  │      ┼──╯             ╭╯   │  │      │
 │   │  │   ╰╯ │  │   │  ╰╮    ╭╯  │   │  │ `○───┼╮      ╭○──╮    │    │  ├────  │
 ╰───╯  ╰─○────╯  ╰───╯   ╰───○╯   ╰───╯  ╰──────╯╰─────▷│   │    ╰─○──╯  ╰──────╯
                                                         ╰───╯

A small set of functions that display simple data structures and arbitrary object graphs including lists, dictionaries, linked-lists, binary trees, class hierarchies and function call stacks (not implemented) in a reasonable manner using viz.js (graphviz for the web). A Javascript data-structure visualization tool, ported from https://github.com/parrt/lolviz

For more information please check the original project page

Also, see examples

Assumptions

This implementation makes the assumption that Javascript Map and Set types are sufficient replacement for Python dict and tuple types respectively.

Mapping of data types between Javascript and Python is tricky (huh, who knew!) and it's likely that there're better ways to do that. Feel free to send comments and suggestions for how to improve.

Also, here's a quick reminder of few Python collections (arrays) that have been used in lolviz,

List : Ordered and changeable collection (Allows duplicate)
Tuple : Ordered and unchangeable collection (Allows duplicate)
Set : Unordered and unindexed collection (No duplicates)
Dictionary : Unordered, changeable and indexed collection (No duplicates)

Appearance

There was an attempt in this project to make few style changes to graphviz generated SVG images in order to enhance their appearance.

Here's an example of the three styles that can be displayed (stylizer, b&w and classic),

This was achieved by making few tweaks to the original code to accommodate run-time changes to color and style (line thickness for example) in addition to making direct changes to the SVG DOM of the generated images.

Also, check out this reference page for more examples of how to write/tweak graphviz dot graphs.

New Features

Admittedly, what comes next is not exactly inline with the initial premise of the lolviz library but they were included in this project regardless because, 1. They can be useful tools, 2. They produce cool visualizations, and 3. why not?

New functions

clusterviz: displays a top-down visualization of a cluster of graph objects.
graphviz: Displays a top-down visualization of a graph object.

Tensors

This feature visualizes Tensors with different sizes/ranks like scalars, vectors, matrices or any rank n tensors (up to rank 3 for the time being).

Check out this example

Class Hierarchy

This feature is useful when you have a collection of related objects and want to visualize their internal structure and the class hierarchy that ties them together.

Check out this example

Libraries

Included in this project the following support libraries,

python.js

Approximal implementations of some of Python built-in functions and a few extra helpers.

id : Generate an id
escape : Escape HTML entities
stringify : Enhanced JSON.stringify function
repr : Get a printable representation of an object
str : Get a nicely printable representation of an object
hasattr : Check if an object’s contains a specific attribute
isinstance : Check if an object is an instance of provided type
list : Convert a Set, Map or an object instance to an array of keys
ord : Get the char code of the first character of a string
chr : Get the character of a char code
array : Get an empty array for the given size
range : Iterate over the given range (from, to)
flat : A variant of 'str' function
chunk : Split an array into chunks
len : Get variable size (set, map, array or object)

type.js

A tiny libary to work with Javascript types including a built-in support for duck-typing.

type : Return variable type as a string
is : Check for a variable type
as : Check for a variable duck-type
ctor : Get a variable class name

reflect.js

Inspect objects for their internal structure including,

Class name and class hierarchy (parent classes)
Member properties and their data types (static and public)
Member methods, their arguments (static and public)
Arguments data types and default values if any.

dom.js

SVG helper library to create/manipulate SVG DOM elements.

stylizer.js

Custom DOM-stylizer for the SVG images generated by Viz.js.

highlight.js

Super tiny generic code highlighter for the demo page.

Support

Need help or have a question? post a questions at StackOverflow

Please don't use the issue trackers for support/questions.

Contribution

Not sure if I'll continue to develop this library but I'm more than happy to accept external contributions to the project in the form of pull requests :)

websemantics / lolviz.js