Using Particle System as a POC for Data Visualization using vanila JS
Introduction
Recently in my organization I was asked by my supervisor to showcase an idea around data-visualization, where information can be represented in an interactive form and that captures the viewer’s attention. One catch was that the data-visualization POC should not primarily rely on Graphs and Charts as a means to display data. The idea was to demo an interactive project team structure which clearly displays the respective team along with the heads and the area of specialization and so on:
Taking up the challenge I decided why not harness the use of HTML 5 canvas and create an interactive particle system that can be used to display the data required by the user. The following list of data was decided to be displayed to demo the visualization system :
— Designation
— Skill Matrix
— Level (Beginner, Intermediate, Advanced)
— Profile Pic
— Current Location
Using Size and colors
Based on the given list of attributes I decided to use size and colors as the visual source of representing information. Since the organization I work for provides bands that represent the designations of employees (8A, 8B and so on, where 8 is the lowest band and 1A being the highest), I decided to use the size of the particle to depict the designation of an individual in the organization. The colors used in the particle can depict information like skill, level, location etc.
Representing relation between particles
The next challenge was to show the relationship between the particles. Its one thing to draw the particles but then how would one link the particles in a way that it can be shown that a certain group of particles form a cluster. In order to achieve this I thought why not take a clue from everything around us, for example in the real world every atom consists of a nucleus with electrons revolving around it, similarly on a more grand scale every solar system consists of a sun with different planets revolving around it. Taking the clue I decided why not make every Project Manager as a nucleus with all the members of his team as particles that revolve around it. This idea can then be used to segregate each team and would represent a clearer picture.
Also this approach would also handle the following scenarios:
— The nucleus can have a particle revolving around it which can be of the same dimension as the nucleus itself, this represents the case where the supervisor and the supervisee may have the same band (designation).
— Representing cases where individuals reporting to the Project Manager might have their own set of supervisėe(s). Just like planets revolving around the sun having their own moon(s).
The cases listed above are illustrated below:
Adding Behavior to the Particle System
Once the particle system is drawn based on the inputs gathered, the next challenge was to add behavior so that they do not look like dummy representation. In order to achieve this the following factors were kept in mind.
— The particles will move in a random direction.
— The velocity of the particle will be inversely proportional to its size. Heavier particles will move at a lower velocity as compared to a lighter particle.
— The mass of the particle would depend on the number of particles revolving around a nucleus.
— If the particles flow out of the screen then they will appear from the opposite side of the screen.
— In case the profile pic of a particle is not available then a fallback would be used.
— A Legend Panel to demonstrate what each color depicts.
Building Blocks of the application
The application has been built using the following technologies:
— HTML 5 canvas
— CSS3
— Vanilla Javascript
— JSON as the dataprovider
Particle System in action
After chalking out all the principles and attributes governing the particle system I finally developed the particle system using vanilla JS without using any library or framework. The final output is provided in the screenshot below:
Interacting with the Particle System
The particle system allows for user interaction by enabling the user to click on a particle and viewing the particle detail in a particle information window. While this is still a work in progress, the particle information window is meant to show the project details of the selected particle, awards and achievement etc. apart from the personal details of the particle. The figure above provides a snapshot of the particle information view.
Challenges Faced
The main challenge faced in developing the particle system was more about imagination vs coding skills. While writing a code has been a super easy task for me, its using Mathematical calculations in the code that was more of a challenge as since childhood Math has been my Krypton. Once the challenges were overcome, it was a super easy task to put them all together.
Some of the hurdles faced were:
— Using the arc method to draw segments that form a complete circle.
— Clicking on a particle as in Canvas, everything is a bitmap therefore clicking on a particle similar to clicking on an area on a canvas. Thus making sure that the area clicked on a canvas contains a particle was a tough cookie to crack.
Conclusion
While the particle system was a challenging task for me, it was fun and exciting POC to work on. It has made me focus my attention to the drawing API of JS and use it more on simulating physics in real world. I have started working on it by maintaining a github repo that would contain a collection of all my work on canvas and implementation of physics.
Source
The source of the particle system written by me can be found here.