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

Post a Comment

Popular posts from this blog

Conceptual design

Image
Consider this post is about visual design. A duct taped banana. This piece of art was sold for $150,000 in December 2019 at Miami's Art Basel . Actually $120K x 4 + $150K = $630,000. Not bad for 10 cents banana and few inches of duct tape. This became a sensation of 2019-2020. Why and how it happened brings up some questions about modern society and economy. How artists (or art dealers, or anyone else) create value from nothing? And emphasize the importance of the idea. In this particular case it's nothing more than an idea. Is this the art we'd like to see? Probably not. But perhaps it's the art we deserve.
Read more

Using Trello and Confluence to manage UX design project. Part 1

Image
This is part One. Part Two is here . Introduction. “ Describe your design process ”. It’s a typical interview question for UX designer position. User-centered design process indeed has defined set of steps. In theory. On the practice though, the adherence to these steps depends on many factors, such as communication and execution skills, practical experience, ability to influence people, being leader and influencer, and at what level your organization is a design driven org. So many businesses are not ready to adopt the design practice, and to place the design before the development. Or simply there is not time or budget to go through all steps. Here in Herbalife the UX Design team accepted Norman Nielsen group philosophy:   Empathize – Define –Ideate – Prototype – Test – Implement .  However the   interpretation of the practical tasks can differ dramatically in different organizations. Here what we currently do: Design Thinking and Agile Any project, which goes t
Read more

How do I use InVision

Image
Team lead asked me to write what InVision products do I use, how I use them, what are pros and cons. I wrote it today, and really think it will be helpful to share my thoughts with wider audience. So, below is the adaptation of what I provided to the engineering management in one fintech company.  I use InVision to share my hi-fi designs and specs, which I create in Sketch desktop application. This is my primary and every day usage of InVision, and about 90% of all usecases of all InVision products combined.  I sync designs via the plugin in Sketch made by Invision, called Craft .  When they are in InVision, we call those designs prototypes .  It works, but I often experience slowness. Sometimes sync process is failing, and I have to try it again. In Sketch I select one or more artboards, then initiate sync, which sends the artboard to InVision cloud. I have to be logged in Craft plugin with my InVision credentials. Almost every day, especially when I design intensely and re-publish
Read more