Using Box APIs

This week, I have been working on researching Box APIs in order to use the service in our application.

Box is a one of the popular cloud storage, and we decided to use this service as data source of our data visualization application project. The idea is that user can login to their Box account, and choose one of files for data visualization.

Get started

These links will be good resources to get started.

CORS support

Tutorial from the above link is quite straight forward.

But when people try to use any kinds of APIs through javascript, cross origin error will always be a problem.
Because generally web browsers does not allow cross domain access from javascript.

Since our application consists of mostly client side script, I needed to consider cross origin issue, however, Box has CORS(cross origin resource sharing) support for their API.

In order to do cross origin access with Box APIs, you need to contact Box API support and let them know what URLs you want to use for your application. They will set up Allow-Control-Allow-Origin in your application for you.

API request samples

After you get contact from Box and all set up, you can try this example.
https://www.box.com/blog/uploading-files-with-cors/

Also there are some examples that I have tried for some APIs.

User login popup: First step of user login. It will popup window and let user authenticate our application.

var loginForm = window.open("https://app.box.com/api/oauth2/authorize?response_type=code&state=SECURITY-STATE&client_id=CLIENT_ID", "LoginWindow", "width=400, height=600");

//Keep listening popped-up window until authentication has been done.
var timer = window.setInterval(function(){
  var code = "";
  try{
    code = loginForm.location.search;
  }catch(e){}

  //When popup redirected to a page with client code.
  if(code != ""){
    var reg = /code=(.*).$/g;
    console.log(reg.exec(code)[1]) // The code you need for OAuth request
    clearInterval(timer);
    myWindow.close();
  }
}, 100);

OAuth: After you get the code from previous example, you can make a request to OAuth.

var form = new FormData();
form.append('grant_type', "authorization_code");
form.append('code', code);
form.append('client_id', "CLIENT_ID");
form.append('client_secret', "CLIENT_SECRET");

$.ajax({
  url: "https://app.box.com/api/oauth2/token",
  type: 'POST',
  contentType: false,
  processData: false,
  data: form
}).complete(function (data){
  var json = JSON.parse(data.responseText);
  console.log(json.access_token) //This is the token that you can use for your API accesses.
});

API request
Now you can use that access-token to make a request to many different .

var headers = {
   Authorization: 'Bearer ' + token,
};
$.ajax({
  url: "curl https://api.box.com/2.0/folders/0",
  type: 'GET',
  headers, headers,
  contentType: false,
  processData: false
}).complete(function (data){
  console.log(data.responseText);
});

Solution for our application

After I tried a couple of those examples, I found out that Box provides some widgets that you can simply embed and use.
https://developers.box.com/the-box-file-picker/

This will create a button “Select from Box” button, and it will popup login form when you click it.

Screen Shot 2015-07-03 at 5.43.16 PM

Screen Shot 2015-07-03 at 5.42.45 PM

Once you login, you can explore your folder and choose file(s) to use in your application.
Screen Shot 2015-07-03 at 5.43.11 PM

At the end, this is all what I need.

Heroku with node.js & mongoDB

Background

The goal of our project last two weeks is toput our application on to Github Page. In order to do that, we had to host our server side APIs to somewhere accessible.
After some discussions with our clients, we decided to host the server side codes to Heroku.

Heroku is one of the popular cloud application platforms ( such as AWS, DigitalOcean and Engine Yard ) that can host your web application. Good thing is about Heroku is initial cost is free.

This service is very easy to use.
Only you need to do is basically these.

  1. Have your git repository for the app.
  2. Proper configuration in your project.
    In our case, we use Node.js, so we configure the applications’ dependencies and start up file in package.json
  3. Push the repository to Heroku

After deploy your application to Heroku’s master repository. It will automatically install all the dependencies your app need, and run it.

Deploy your application to Heroku

Here is good instruction how to deploy your Node.js application onto Heroku. Setting up is very straight forward.
https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction

Install mongoDB Add-on

In order to use mongoDB on Heroku after set up your application. You need to install Add-on calledmongoLab or Compose MongoDB. I use mongoLab this time.

Installing Add-on is also quite easy to do. Just type

heroku addons:create mongolab -a <application>

and it will install the Add-on on to your application.
All the configuration of your DB is available from Heroku’s web console.
mongoLab 500MB storage for free.

Comment

Heroku accepts many types of applications, such as Node.js, Ruby on Rails, php, Java, Python and so on.
And it allow user to deploy the application very quickly. It will automatically set up infrastructure for you, so you can save your time as well.

Geolocation Data for Visualization.

In our project, we are looking for some information that can be plotted on a 3D globe. To do that, we will need geolocation data ( latitude, longitude ) and some values.I was looking for simple world population data ( expected .csv or excel format ), however, there are not much population data including geolocation.
The data with geolocation which I found was a GIS file format used for GIS.

GIS (Geographic Information System)

To work on data visualization using geolocation data, knowing about GIS is very important.

GIS stands for Geographic Information System, which is a system or an application designed to visualize many type of information on a map, and utilize it for analysing.
For example, Google Earth is one of the popular GIS, Google Earth allows users to plot many kinds of data on a globe visualize it nicely.

Information is represented as a layer, and overlapped each layers over a map. This diagram explains very well how GIS plotted some different information on a map.

http---lib.stanford.edu-files-u2966-GIS_layers

[ Source: Geographic Information System Basics v1.0, Stanford University Library http://lib.stanford.edu/gis/ ]

GIS file formats

GIS file formats are standard of encoding geographical information into a file and used for GIS .
Because the information for GIS are diverse, there are many types of file format in GIS file formats. http://en.wikipedia.org/wiki/GIS_file_formats

GIS file formats for web.

There are three GIS file formats which are web friendly among various formats.

  • GeoJSON – a lightweight format based on JSON, used by many open source GIS packages
  • Geography Markup Language (GML) – XML based open standard (by OpenGIS) for GIS data exchange
  • Keyhole Markup Language (KML) – XML based open standard (by OpenGIS) for GIS data exchange

GeoJSON is the only JSON format among GIS file formats. Beucase it’s JSON, it is much easier to parse in a web application. Only disadvantage is that it is not maintained by a formal standard organization.

GML is the XML grammer file format which is defined by the OGC (Open Geospatial Consortium).

KML is also the XML grammer file format ( shares some grammer with GML) developed by Google, Inc and used for their Google Earth or Google Map. KML is now an international standard maintained by the OGC.

Comparing D3.js and Raphael.js

In order to investigate the performance of both d3.js and raphael.js for our project, I created two different examples:
One is particles animation example, the other one is interactive(with mouseover, touch events) example.
And run these script on PC, and smartphone environment(Cordova, Crosswalk).

Animation Performance

This is the example that creates number of particles(like 500), and each particle moves around randomly.
I created same example for both d3.js and raphael.js with each library’s feature and syntax.

particle

Platform D3.js Raphael.js
PC Performance 500particles(23-60fps) 500particles(19-30fps)
Cordova Performance 50particles(8-21fps) 50particles(6-14fps)
Crosswalk Performance 50particles(23-37fps) 50particles(13-16fps)

Is was significant performnce different between D3.js and Raphael.js for this type of animation.

Interactivity Performance

Creates bar graph and added eventhandlers(mouseover, mouseout, touch) to examine performance.

graph

D3.js Raphael.js
PC Performance 59-61fps 59-61fps
Cordova Performance initialize(56fps), touch(60fps) initialize(50fps), touch(60fps)
Crosswalk Performance initialize(56fps), touch(60fps) initialize(55fps), touch(60fps)

There was no significant difference between, D3.js and Raphael.js performance on interactive events.
However, when I added a alpha transition on tooltip popup for the examples, it drops 10fps when touch interaction occurs.
Thus, it is important to be careful using redundant animation for smartphone version of charts.

Responsiveness

Both libraries are using SVG for rendering. Because of that it is easy to create smartphone-optimized charts. Also all event handlers for smartphones are available to use.

High level libraries C3.js and gRaphael.js

There are some high level libraries on the top of D3.js or Raphael.js. C3.js and gRaphael.js. I coded examples which uses same data and creates a chart by both libraries features.

c3gr

C3.js gRaphael
PC Performance initialize(56fps) initialize(49fps)
Cordova Performance initialize(4fps) initialize(38fps)
Crosswalk Performance initialize(4fps) initialize(36fps)
Easiness to code 7lines 6lines

There is different from initializing performance.
C3.js perform very slow fps when it creates a chart. It is because the c3 library added many fancy transition on the graph. It might be good if it is customizable for smartphone.