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."
In laymen terms, paper.js is a JavaScript library for drawings and animations.
How do you use it?
Language - paper.js uses PaperScript, which is the plain old JavaScript that you are used to, with added support of mathematical operators (+ - * / %) for Point and Size objects.
Adding to your page - PaperScript code is loaded just like any other JavaScript using the <script> tag, except for the type being set to "text/paperscript" or "text/x-paperscript" .
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.
Additionally, I added a modal, for when each department is clicked additional information is displayed. This was testing at points as trying to get a modal, that is outside the PaperScope, which needed to be displayed when a node within the PaperScope is clicked. I got there by using JavaScript to pass the event between the scopes.
Take aways
Easy to use - Overall it is relatively straight forward to use., it is nearly identical to JavaScript.
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!
