Case Studies

Challenge Visualize timelines to identify overlaps. There could be 1-500 entities. It needs to be scrollable on both axis. Time axis (horizontally) and entities axis (vertically). Time axis and entities must be visible all the time and should show side by side. Can toggle visiblity of entities by priority Must be extensible to incorporate different views of same entity Design Solution After searching for a compatible library for some time, we could not find one that fits our design and needs. Our team was ready to make compromises to both design and functionality. I proposed we create it from scratch but it’ll take some time and assured there won’t be any compromises. I was given time to learn and create this component. I had prior exposure to d3js , I picked up a book and read it from cover to cover. I was able to create and present a prototype to the team within a month. Result I was able to deliver all the requirements without any compromises.

Knowledge Graph Challenge Create a component to be easily consumed by different products with similar needs. Graph should have legends and should togllable. Must provide extensibility to add custom logic for visibility of nodes. Must have undo,redo feature. Must provide ways to expand the graph by adding additional nodes. This component was already written in Angular that we were migrating to React. Solution Used established visjs that was previously in Angular app for network rendering. I re-structured the data in react way and exposed several methods to manipulate the graph like, Reset graph Re-render Undo Redo Clear history etc. Result I was able to deliver the component and make it available through the ui library. Later team was able to make all the product specific features using the component, with minor changes in the library.

Relationship Highlight Challenge Visualize relationship between two entities(words) clearily showing object and subject with additional annotation on the entities in a paragraph. It should be responsive and should not disrupt when container width is changed. Design Solution This work was second highlight of the year for me, I had a lot of fun. Initially I thought of using canvas but quickly dismissed the idea for following reason. Seemed like overkill for such simple colored boxes and one line. Canvas could introduce a lot of challenges for responsiveness and general accessiblity. I used split the paragraph method I used in Annotation and render different component for highlighted words. Challenging part was relationship line, for which I simple choose to draw straight line till top of div containing the paragraph and then connecting the two. It worked great and no issue in responsiveness. Result

Requirement In a paragraph user should be able to highlight a part of paragraph, that will be then annotated with selected entity. Highlighted part should show entity’s color along with additional information here it’s a percentage value. Solution After a lot of thought I came to realize the solution lies in the data structure. I had positions of already highlighted parts. I broke the paragraph in an array of objects using the positions provided. This made it simple to just render specific component for given type of the content from the object. Second part of highlighting by user followed same break a sub-paragraph again into parts with different type of objects. One issue it had that was easy to fix by the user was when a selected part had same instance earlier in the same object. But after making selection, the system would highlight an earlier version breaking the part again into sub-parts after this user can simply cancel it and select again resulting in desired state. To make this experience’s chances less, I broke long parts (more than 100 letters). This signinficantly reduced the chances of this issue’s occurence. Result Desired flow with minor issue mentioned above with pixel perfect design.