Introduction

This application is a proof of concept to visualise a big set of objects in a timeline order and their relations to other objects in the past.

This chart displays multiple nodes(Movies) in a timeline order. Each movie node connect's to it's original movie in the past and the remakes in the future.

Interactivity is the primary feture of the chart. Hovering, clicking and searching (work under progress) functionalities gives users a smooth experience to navigate through the data.

Insights into the work

• Raw Data: I found this wiki page List_of_film_remakes while searching for a generic suitable sample data.
• JSON Data: Taking the HTML from the wiki pages, I wrote a nodejs script to create json object
• Charting Libraries: I leveraged the awesome libraries D3JS and Sankey Diagrams to Plot Nodes and Links on the graph.
• First Approach: I created a simple web page which would acquire the data through an ajax call and then calculates the positions of Nodes and Links using d3 and sankey libraries
• Problem: The First approach was working fine till I tried to render about 50 nodes. After that, the browser (chrome) is crashing. the problem was with the computing of the positions.
• Second approach: In order to avoid the computation on the browser side, I used nodejs and jsdom to render the chart offline and store the html to a file
• Isomorphic Javascript: And I wanted to keep both the static rendering and dynamic rendering pages. For this, I adopted commonJS approach which helped me to write isomorphic javascript which can be executed on nodejs as well as on browser
• Bundling: To use the isomorphic javascript on browser, I used Browserify
• Work Force: To make the workflow faster and easier, I used Gulp and BrowserSync https://www.browsersync.io/

Other Technical Details

Read here

About me

I am Sravan Kumar Rekandar, a UI developer (and a JavaScript full stack developer). I fancy beautiful, intuitive user interfaces and visualisations. Along with loving beautiful UIs, I love to build some!
sravanrekandar@gamil.com

This article is also posted in Medium