%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.
How many times did you find an awesome library/framework and wanted to see how it's structured just for fun?
- 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.d3would be the access point to the library)
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
See development
See an interactive tutorial on how to visualize your stuff
%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
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!
- 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
Special thanks once again to @mrdoob the author of three.js and to @mbostock author of d3.