Sunday, January 28, 2018

Data visualization for Roadmap Microsite (Angular and D3.js)

While working for Calypso Technology I was given a task to build a Product Roadmap and Inventory Microsite. This would be a web application which visualize the all Calypso' current products as well as a future roadmap.
Since Calypso was using AngularJS, I employed the the same technology to build a front-end. As a designer I focused on UI and how exactly I would visualize the complex structure of the product line catalog.
I created a prototype, which was ready to be picked up by engineering team and to adopt for production.
For data visualization I used open-source Sankey diagram library based on D3.js. I couldn't find the the library with exact features I needed. So, I forked an existing github project, to create my own library tailored to the needs of this project. I called it styled_sankey.
Below are some examples I created to demonstrate the visual abilities of my new library (from simple to more complex):
http://kardash.net/styled_sankey/examples/simple_test.html
http://kardash.net/styled_sankey/examples/hierarchy.html
http://kardash.net/styled_sankey/examples/treasury.html

On the Angular part the web app was up and running. With single page routing, in-line edit, and D3.js integration.
Screenshots of AngularJS web app:



Screenshot of the proof-of-concept products relationship diagram generated with Styled Sankey D3.js library:

Schema of object relationships:


The proposed database schema:


I have built a working prototype, and one of the hardest part for me, as a designer, was to marry D3.js with AngularJS. This work wasn't complete or tested on real users. However it gives a perspective of the approach to visualization, and modern web application front end libraries. 

Watch the prototype in action Youtube video.





No comments:

Post a Comment