Having fun with paper.js
Recently in my job I got the opportunity to build an interactive organisational chart for one of our clients, which mapped out there organisational structure. The brief was to have it visually mimic the London Underground tube map. Instead of lines going to stations, it would be arms going to different departments and sub-departments.
There are hundreds of ways a developer could approach this, but in this instance I went with paper.js. I had never heard of it before, let alone used it. It was a bit nerve-wracking to start with but equally exciting to be able to try something new!
So what is paper.js?
"Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface."
How do you use it?
PaperScope - One thing to be aware of with PaperScript is that each script is run in its own scope, a PaperScope object. PaperScript code is automatically executed in its own scope that, without polluting with the global scope, still has access to all the global browser objects and functions, such as document or window.
What did I do?
As the company structure is quite large and there are lots of different business streams and departments it required some thought on how to arrange this in the code. This resulted in a lot of nested arrays and objects to hold the data of the different departments. Due to the vector style coding, I created parent and child nodes, each with coordinates for where they would sit on the page.
As the project progressed and the chart started to resemble a tube map, I added in additional interactive features. Using the paper.js mouse vectors and mouse tool events, I added a zoom effect and the ability to drag the map. This took quite a bit of trial and error, and help from my manager, with getting the right combination.
Documentation - The documentation is relatively thorough, however as it is not a widely used framework there isn't a huge amount of additional blogs, forums or tutorials to get additional support from. This did result in quite a bit of trial and error when testing out different aspects.
Overall I would encourage you to explore all the possibilities that paper.js can open up and have some fun with it!