In the earlier post, element dragging functionality using d3 was demonstrated and this post demonstrates how it can be extended to work as a simple mapping tool similar to the one that was implemented using jsPlumb.

Earlier, the data array was used only for reading, and the positions of the elements such as rectangle, the dots and the text were calculated manually. In the following, we will be updating the data set by adding new values such as position details and dimensions, so that each of the elements corresponding to one object of the data array, have attributes that are relative to each other. In simpler words, we are mapping one object to a set comprising of a rectangle, a text, 2 dots and a line.

Further more, the dragging functionality is updated to detect if it has entered a node on the opposite side. If yes, the end will be attached to the dot on the corresponding node or the end will be removed.

The working application:



The code gist is as follows:

In this post d3 is used to draw a stack of SVG rectangles based on a set of defined values such as starting position, vertical margin and an array of data. For each rectangle a dot is attached, which can be extended by a line by dragging.

The variables used are as follows:

The working application:


Dragging is achieved by d3's drag function as follows:

 
var dragme = d3.drag()
                .on("start", function (d) {
                    //when dragging starts
                })
                .on("drag", function () {
                    //during dragging
                })
                .on("end", function (d) {
                    //code to run when the drag is released
                });

The code gist is as follows:

 D3.js is a JavaScript library for manipulating documents based on data. - quoted from https://d3js.org

This post is on how to display a simple bar chart using HTML div elements and d3 JavaScript library. 

data.tsv is the data file we are going to use which has tab separated values (tsv) and header values. Similar to tsv, csv stands for comma separated values which acts similar to tsv files.

When running this however, in certain browsers, simply opening the html file is not sufficient since d3 makes AJAX requests for data. Therefore, the file must be loaded through a web server.

✔ Python users have a simple way to run a web server on the local machine by simply opening the terminal in the file's directory and executing the following command.

python -m SimpleHTTPServer

Once the server is started, simply open the html file using the server.

Eg: http://127.0.0.1:8000/barchartexample.html

This article presents more information on python's simple server.

✔ Or online editors such as Plunker too can be used.

This question on StackOverflow focuses on the file loading problem.

The following is a self explaining code gist relevant to the above displayed bar chart.

Internship diaries #1

This is the first of my monthly diaries of my internship experience at WSO2 Lanka (Pvt) Ltd.

An orientation session was carried out in the first week where we were introduced to the company hierarchy, organizational levels, rules and ethics, the products of the company and the resources available to use which can be used to improve our knowledge on the technical aspects. I personally find the culture of the company uniquely interesting where each employer is free from strict rules but everybody is genuinely passionate about what they are doing.

The products of WSO2 are open-source and they are based on the carbon kernel which serves as the core of each product. Components are integrated with the core to develop features. A product is basically a set of features assembled together to achieve a single or a set of specified functionalities.

In the first two days of the second week, project demonstrations were held from which we were asked to list our preferences. I selected the project named “Developing a data mapping tool plugin for VSCode” which was under team Developer Studio. My assigned mentor is Mr. Jasintha Dassanayaka. For the rest of the second week, I had a hands-on experience with the data mapping tool plugin for Eclipse.

The third week was spent on analyzing the source code of the data mapping plugin tool for Eclipse. The main features analyzed were the objects, their interactions, method calling sequences, file loading implementations and schema saving implementations.

The fourth week was spent on developing a static web app for data mapping tool using JavaScript. The implementations of file drag and drop, XML file parsing and the mapping functionality were mainly focused and completed successfully. To implement the mapping functionality, many libraries such as GoJS, jqTree, jsPlumb were researched but used jsPlumb due to the abundance of tutorials and community forums.

The problems faced during this period were overcome by the support of my mentor and on-line resources such as StackOverflow.

Left element 1

Left element 2

Left element 3

Left element 4

Left element 5

Right element 1

Right element 2

Right element 3

Right element 4

Right element 5

---

The code gist is as follows:

View the JSFiddle demonstration

How to view login information

Basically Ubuntu saves all the log information in a log file inside /var/log/auth.log which you can access manually or use the following command in the terminal.

sudo less /var/log/auth.log 

How to disable guest login

In the file /etc/lightdm/lightdm.conf add the following line

allow-guest=false

If you are using a newer version of Ubunutu, try the file /usr/share/lightdm/lightdm.conf.d.

Make sure to restart the system to take effect.

In order to allow guest login again, remove the code line from the file.

Basically, what we are going to do is to install the developer studio kernel and the platform bundles without installing the tooling. Additionally, the GMF features and EMF SDK too must be installed.

Help->Install new software->Add and specify the location for platform bundles which will automatically add the kernel too. Proceed with the installation steps.

Once the platform bundles and the kernel are installed, go to the install window again, select Mars releases from the drop down menu in ‘Work with:’ and filter the software using the keyword GMF. 

Select all except runtime examples and Xtend2 support.

Filter the Mars releases again using keyword EMF and select EMF SDK. 

Install the GMF and EMF software.

Fork and clone ESB tooling source code in the local machine and import (File->import) to Eclipse as an existing project.

This sample project maps XML data set to a JSON data set. (The input and output formats are specified at the end of the article)

1. In Eclipse with ESB tooling, create a new ESB Solution Project(If it is not already suggested start typing to filter or check under WSO2->Message Mediation->Project types). Make sure to uncheck Create Connector Exporter Project.

2. Once you create the project, you will see that two additional projects, the CAP and Registry are created.

3. Now we will create a new REST API. Right click on the project and select New->REST API

4. Give a name to the API and a context (eg. PeopleMapping and /peopleconvert respectively).

5. In the XML, add a DataMapper and a Response. We will configure the DataMapper to suit our requirements and check the Response using Postman, an API tester. In the properties, set the POST to true.

6. To start configuring the DataMapper, double click on it, specify a name and press OK.

7. To configure the input, right click on input-> Load input-> Select XML and point to your input XML file. Similarly, to configure the output, right click->Load output->Select JSON and point to the output json file.

8. Once loaded, the attributes will be visible, simply drag and drop to map to corresponding output set. Fields can be edited by right clicking on the field.

There are many operators which can be used to get the desired mapping.

9. To deploy the API, right click on the Composite Application->Export->Select WSO2 Platform distribution->Select Composite Application Archive

10. Once the CAR file is created, start the WSO2 ESB Server and in the management console add the application by uploading the .car file.

Once the application is uploaded, the API will be displayed in the deployed APIs. (eg. PeopleMapping)

To test it in Postman, copy the invocation URL. Copy the input file content in the body and specify as XML(application/xml).

When the message is sent, the required response will be obtained.

---

Input XML:-

<?xml version=”1.0" encoding=”UTF-8"?>
<CATALOG>
   <CD>
     <TITLE>Empire Burlesque</TITLE>
     <ARTIST>Bob Dylan</ARTIST>
     <COUNTRY>USA</COUNTRY>
     <COMPANY>Columbia</COMPANY>
     <PRICE>10.90</PRICE>
     <YEAR>1985</YEAR>
   </CD>
   <CD>
     <TITLE>Hide your heart</TITLE>
     <ARTIST>Bonnie Tyler</ARTIST>
     <COUNTRY>UK</COUNTRY>
     <COMPANY>CBS Records</COMPANY>
     <PRICE>9.90</PRICE>
     <YEAR>1988</YEAR>
   </CD>
</CATALOG>

Output JSON format:-

{“artist”: [{
             “name”: “sample_artist_name”,
             “location”: “artist_location”,
             “CD”:[{
                    “title”:”saple_title”,
                    “price”:”sample_title”
                  }]
           }]
}

For this, Eclipse Mars distribution is required (Mars 2 as of now).

In Eclipse, go to Help -> install new software

Click Add and paste the repository URL in the location and click OK. I used the following URL.

http://builder1.us1.wso2.org/~developerstudio/developer-studio-kernel/4.1.0/esb-tooling/releases/5.0.0/rc1/

If you’re running on Ubuntu 16.04 and if the software list is displayed as ‘pending’ for quite some time, make sure the GUI bug is fixed.

Hint: Add the following lines of code in the file named as eclipse.ini

openFile
--launcher.GTK_version
2

Once the list of software is displayed, select all and proceed with the installation.

For more information, please refer WSO2 docs.