pojoviz

Plain Old JavaScript Visualization

Usage no npm install needed!

<script type="module">
  import pojoviz from 'https://cdn.skypack.dev/pojoviz';
</script>

README

PojoViz - Plain Old JavaScript Object Visualization Build Status

%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)

Development

TODO See development

Changelog

v0.1.3

  • Fixed a problem with the hashKey function that didn't create a hidden key in some objects
  • Added some development notes in this file

v0.1.2

  • Dagre is now in the pojoviz-vendor bundle

v0.1.1

  • Improvements in the build system
  • %PojoViz is now available through bower

v0.1.0

  • Initial release

TODO list

  • Render NodeJS global objects
  • Render NodeJS packages
  • Create a dev tutorial on how to visualize libraries
  • Render scope variables analyzing the ast (see Esprima)
  • Move to the selected object on dot click
  • Undo/redo

Screenshots

Acknowledgments

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

Technologies used in this project