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.





Comments

Popular posts from this blog

Conceptual design

Four tools for prototyping: Sketch, Figma, Principle, and FramerX