A hands-on tutorial for Xap beginners

Not every internet product survives in today’s fierce competition. I believe the survival of Exaptive platform in the next 5 years will require a design paradigm shift. This tutorial is not only for Xap users, but also for Xap developers. The overarching theme is building a minimum viable product (MVP). With such a skeleton at hand, users will have a lot of fun by tinkering here and there.

Data scientists come from different backgrounds and have their own preferred technology stacks. Exaptive platform aims to bridge the gap between offline data visualization and online data visualization. The latter means web-based, which leverage the power of fast-growing JavaScript libraries such as D3, Dimple and Plotly.

To positioning this tutorial, the targeted learners in my mind are frequent Python users, who are already familiar with data structure like dictionary, and module like pandas. From my learning experience, there are 2 major knowledge gaps:

1. HTML/JavaScript
2. Data types and conversion in Exaptive environment

HTML/JavaScript

These are prerequisites for any web applications that are tailored to exactly what you need. It is easy to learn because you can practice it in the browser and get immediate feedback. You can learn all the fundamentals at https://www.w3schools.com/. My learning note is here.

Once you know how to control the DOM by JavaScript, and how to use jQuery or D3 to draw a simple shape, you are good to go.

Data types and conversion in Exaptive

This is the most confusing and buggy thing for a beginner in Exaptive. I will provide some easy-to-follow steps to walk you through the mist. I am going to open every black box to help you get a clear understanding of the magic.

Get familiar with the platform

Open https://exaptive.city/, there are 4 options at the top:

• Home. This is the warehouse for storing your Xap.
• Studio. This is the warehouse for storing your Xap and Components. If you click + button, there pops up there things: Xap, Component, Asset. Component is the basic building block. Xap is the product when you piece required components together. Asset is a dataset, code snippet, pictures that are used to build a component or feed data. The current version of Studio is 4.0.24, released on 2016.8.29
• Explore. A collection of xap, component and asset that have been built and published. You can add them to your own Studio, reuse or learn from them. I expect there will be better grouping here, such as function type (data wrangling, data mining, data visualization) and language (JavaScript, Python, R).
• Learn. Tutorials, Documentations, Discussion. This is a place you can gain more detailed answers.

Get family with the JavaScript Component and Xap

1. At Studio page, add a JavaScript Component, name it “tutorial”.
2. Open the component, in the “info” tab, you can see the inputs, outputs, layout and dependencies. Their functions are self-explained by the name. And “dependencies” shows a dollar sign and an URL, which means $ is claiming the namespace and the JavaScript library is imported from the URL. In the “edit” tab, you will see more items shown on the left. The most important one is “script”, a place where we will get our hands dirty.
3. Right now we don’t do any changes. Just save and go back to Studio, add a Xap, name it “Xap_0”. Open it by clicking the hammer. Use your curiosity to click everything before we settle down on the “edit” page and “dataflow” tab.
4. On the left bar, click “add component” and drag our beloved “tutorial” component to the blank background. Now the little cute square box appears with the name “tutorial_0”. It has a “doSomthing” input port on the left and a “data” output port on the right. use your curiosity again to explore the box. click the port or double click the box to expand the box.And the button to collapse the box. Mouse hover the box to find the “edit” entrance.
5. Now click the input port and find an arrow button when you mouse hover near the output port. click the arrow to trigger the component. Notice the blue light up on the port, or red flash if something goes wrong. Notice the log icon on the right bottom corner of the page. This is actually the debugging tool for the component. Explore what’s there.
6. click the input port again. Notice that under “doSomething” shows ‘string’, which indicates the data type of the input port. Write some string in the empty underscore. Then click the “…” sign to open the edit page. Replace the script by:

   export default {
       doSomething() {
           let state = this.api.inputState.export();
           let s = state.doSomething;
           this.api.log("LOG",s);
           this.api.output("data", "Hello World");
       }
   };
   

   There are several things to pay attentions here:
   • doSomething() and state.doSomething must match the input port name to correctly trigger the method and capture the data.
   • let is introduced in ECMAScript 6 and is similar to the use of var They have slightly difference in scoping.
   • trigger the component by clicking the arrow at the input. Observe what’s happening in the log message and the output port.

Data type

1. open the scirpt of “tutorial_0” component and replace the line this.api.out() with the following:

   var ent = {
       "dream_car": "Tesla Model 3", 
       "price ": "35000",
         "schedule":"July 2017"
     }; // JSON format/Python dictionary/Java hashmap
   this.api.output ('data',ent);
   

   Trigger the input port and check what you get at the outputs port. After the “data”, you will see “3 attributes”. Click on it and the meat comes out, which is exactly the variable ent that we just defined. Exaptive calls data type as entity. You may feel confused about this fancy name. But it is essentially the same with JSON in JavaScript, or dictionary in Python, or hashmap in Java. For R users, it is similar to a list or 2-column data frame.
2. The value type for input or output that you are allowed to set in Exaptive is: boolean, integer, float, string, tag, null, type, entity, multiset, dynamic, nullable. If you are not sure which one to use, dynamic is the one-size-for-all choice. Try to change the value type of output in the edit page and check whether it still works.
3. Now change the this.api.output ('data',ent); to this.api.output ('data',[ent,ent]); and check what changes at the output. You will see 2 entities/ 3 attributes. Keep in mind that this will be the most frequent datatype we will encounter in the future.

Parsing string

Draw the graph

Note: Sorry I am not able to finish this tutorial, because the position that I have been preparing for a full month is cut right after my final interview. It is a shock to me when I was expecting an offer negotiation and the celebration of my 100th post.

​