In to the world of JS libraries

Internship diaries #2

By the start of the second four-week period, the static web simulation of the Data Mapper tool was achieved by using JS Plumb but when the it required long codes to get the functionality work. Therefore, my mentor discussed with the other team members on an appropriate library to work on in a long term basis and came up to a conclusion on using d3. D3 is a simple yet powerful JavaScript library that provides many useful functionalities in handling document objects.

I was going through a tutorial on creating a bar chart using d3 and met with a a series of similar bugs. Looking into the matter by debugging, I found out that the cause of the bugs were version mismatches. I was using the latest version(v4) in my implementation while the tutorials I was going through were based on a previous version(v3). In order to recover from the bugs, I had to look into the details of version updates, and to my surprise there were quite a long list of structural changes in the version update.

The Data Mapper implementation using d3 started and in the mean time, I was researching on other similar JS libraries such as Jquery, Jquery-UI, AngularJS, NodeJS, BackboneJS and worked on sample projects through tutorials. I hadn’t even heard of some of them before. Additionally, I had to go through HTML SVG components as a majority of D3’s drawings were based on SVG.

The use cases of the JS based Data Mapper were:

1. File loading
2. XML parsing
3. Displaying tree structure
4. Implementing draggable containers
5. Implementing draggable nodes 
6. Detecting node drops.  

Implementation of file loading and XML parsing were reused from the earlier implementation using jsPlumb. Tree structure display was achieved by using a recursive method on which the node dragging functionality was implemented using D3’s drag functionality. The node drops were detected by using a method that calculates the areas of the leaf nodes of the opposite container.

Enabling dragging on containers was the trickiest objective which gave me an opportunity to learn about D3’s mouse events. During line dragging, the positions were calculated using mouse pointer position and the transform:translate attributes of the containers. I was practically living inside StackOverflow. After going through so much trouble, the container dragging functionality was finally solved. And it was time for a new task...