PojoViz

PojoViz - Plain Old JavaScript Object Visualization

%PojoViz is a tool to analyze the plain objects of a JavaScript object hierarchy by finding all the relationships found between the hierarchy entry point (in most libraries/frameworks a global variable) and the objects/functions linked to it.

Note: this webpage uses Shadow DOM, it’s suggested that you use a browser that supports this technology for a complete experience.

Why?

How many times did you find an awesome library/framework and wanted to see how it’s structured just for fun?

Features

Renders the hierarchy of the browser’s built in objects (Object, Function, etc)
Renders the hierarchy of Node global objects (process, Buffer, etc)
Renders a library/framework hosted anywhere through the Library Search widget (as long as there is a way to access it, e.g. for d3 window.d3 would be the access point to the library)

How does it work?

In short %PojoViz receives as input a collection of JS objects and then:

it does a Depth First Search through the properties of objects/functions it finds along the way
it finishes whenever it reaches a max-depth or it completes visiting all reachable nodes
it creates a graph whose layout is computed by dagre
the graph is rendered by d3.js or three.js

Development

See development

FAQ

I want to see the structure of my library, how can I do it?

See an interactive tutorial on how to visualize your stuff

This project is not analyzing some stuff I have, why?

%PojoViz doesn’t analyze the AST of your code (which might be done by Esprima btw), it’s sort of an static analysis tool but it doesn’t analyze your code, it just traverses JS objects

Let’s say that you give %PojoViz the following constructor Point

// reachable
function Point(x, y) {
  // unreachable
  this.foo = function () {
  };
  
  // unreachable
  this.bar = {};
}

// reachable
Point.prototype.publicMethod = function () {
}

To make the method foo and the object bar reachable you’d need to create an instance of Point e.g. instance = new Point(1, 2) %PojoViz doesn’t know about how to instantiate stuff, however if you feed %Pojoviz Point AND instance you’re good to go :)

A huge description of this and other uses of %PojoViz can be found in the development section

Can I use this stuff within the node environment

Sure you can, in fact the Node Globals section makes a query to a node server hosted on heroku and the analysis is done on runtime! The output of %PojoViz is an “stringifiable” collection which is rendered by pojoviz-renderer, you can even analyze code of other programming languages with an adapter that outputs a similar collection and render it with pojoviz-renderer!

TODO list

Render NodeJS global objects
Render NodeJS packages (done in colony)
Create a dev tutorial on how to visualize libraries
Render scope variables analyzing the ast (see Esprima)
Move to the selected object on edge click

Screenshots

Acknowledgments

Special thanks once again to @mrdoob the author of three.js and to @mbostock author of d3.