tutorial

Your First Web App with Dataiku DSS

Applies to DSS 1.0 and above | May 23, 2017

Web apps are a great way to share your insights. You can build beautiful and interactive data visualizations, and share them on dashboards for sophisticated reporting.

In this post, we’ll show you the steps to create a very simple web app in DSS. It’s a simple bar chart on Haiku T-shirt sales data, related to that used in the Tutorial: Basics.

Haiku T-Shirt sales: A small description(barchart), pointing out the most salient facts, is always appreciated. Here, white T-shirts are a hit for men but a flop for women.

Creating a new web app

To create a new web app, simply go to the Notebooks / Web apps section of DSS, and click on New web app.


Notebook/Webapps navigation bar with arrows on: 1.create icon, 2.webapps.


The first step is to choose the web app type. In this tutorial, we introduce you to standard HTML/JavaScript web apps. The two other ways to create web apps, using Python or R language, are covered in other tutorials.



You will be prompted for the name of your web app and then be redirected to the web app editor.

Web app components in Data science studio

The web app editor is usually divided into two screens. In each screen, you can click on the corresponding panel to edit your HTML, JS, CSS or Python code. On the right screen, as in the example below, you also can select Preview, which is the current output of your web app.


The webapps editor window


Having side by side the code in the left screen and the web app output in the right screen comes very handy, it allows you to quickly write and test your code while having immediate visual feedback.

Use HTML to organize your page

HTML is generally used to create the page structure. It is in the HTML code that you will organize your web app into sections: add titles, paragraphs, forms or placeholders for visualizations. In our bar chart example, we simply give a small description paragraph, add a title, and use a SVG element as a placeholder for the bar chart. To replicate the web app example, you can copy paste the code below in the HTML panel of the web app editor.

<!-- Body of your app -->
<h2> Haiku T-Shirt sales </h2>

<p> A small description, pointing out the most salient facts, is always appreciated.</p>
<p> Here, white T-shirts are a hit for men but a flop for women.</p>

<div id="chart">
    <svg></svg>
</div>

CSS for appearance

CSS controls the layout and aesthetics of your web page. For instance, you can choose the font properties of the text, or choose the color of various elements. In our web app example, we use CSS to change the font and control the positioning of the bar chart. To replicate the web app example, copy paste the code below in the CSS panel of the web app editor.

body {
    font-family:verdana;
}

svg {
    width: 500px;
    height:500px;
    margin-left:100px;
    font-size:12px;
}

Importing JS libraries

All your visualizations will be done using JavaScript libraries. DSS has several built-in libraries to use in your web app. To import them, click on the the Settings tab in the top right.

The list of the available libraries will appear. Usually the Dataiku API and JQuery libraries are preselected. For the bar chart example, we also select the D3 and NVD3 libraries. D3 is the most popular JS library for data visualization. It allows you to build stunning interactive visualizations, but it is a bit difficult to learn. NVD3, which is built on top of D3, provides basic reusable charts and is simpler to use.


JS libraries list


Loading data

To make the bar chart visualization we first need to connect to data. First be sure to create a dataset named nb_tshirts_by_category in your project from this csv file. To load this data in your web app, go to the Settings tab and click on “Configure” in the “Security” section.

Find the nb_tshirts_by_category dataset in the list, and click on Add snippet to read dataset (and authorize it). The following lines will be appended to the JS code:

dataiku.fetch('nb_tshirts_by_category', {
        sampling: "head",
        limit: 10000
    }, function(dataFrame) {
    /* Process the dataframe */
})

The dataiku.fetch function is part of the Dataiku JavaScript API. It connects to the nb_tshirts_by_category dataset and returns a dataFrame object in case of success. Several other functions of the API can then be applied to the dataFrame object to handle and process data.

Visualization code

In the bar chart example, we first need to process data into the format required by NVD3. To this end, we define the formatData function and apply it to each record of our dataset using the mapRecords function of the Dataiku JavaScript API.

Now that the data is in a proper format, we can finally create our bar chart visualization. First we need to declare and configure the chart with several display options. Then we select the SVG element of our page where we will display the chart, this element was defined in the HTML code above. Then we bind data to the SVG element and finally call the chart constructor. To duplicate this bar chart example in your web app, copy paste only the JS code written within the function(dataFrame) {...} curly brackets.

Note: make sure that you don’t end up with twice the “dataiku.fetch” call.

dataiku.fetch('nb_tshirts_by_category', {
                 sampling: "head",
                 limit: 10000
             }, function(dataFrame) {

    // process data into NVD3 format
    function formatData(d) {
        return {label:d.category, value:+d.nb_tshirts_sum};
    }
    var values = dataFrame.mapRecords(formatData);
    var data = [{values:values}];

    // configure chart
    var chart = nv.models.discreteBarChart()
                .x(function(d) { return d.label; })
                .y(function(d) { return d.value; })
                .staggerLabels(true)    // Staggering labels.
                .tooltips(false)        // Don't show tooltips
                .showValues(true)       // Show the bar value on top of each bar.
                .showYAxis(true)
                ;

    // draw the chart in the SVG element
    d3.select('#chart svg')
       .datum(data)
       .call(chart);

})

Publish

When you are done with editing, you can easily publish your web app on a dashboard from the Actions dropdown at the top-right corner of the screen.

Webapps editor window with the actions drop-down menu opened and arrow on publish


What’s next

Et voilà, you have successfully built your first web app in DSS! This was a simple bar chart, but the same steps and procedures apply for more complex apps.

An important component that we haven’t covered yet in the web app editor is the Python backend. The Python backend is essential if your application requires heavy computations or to manipulate a large amount of data. Implementing such data manipulation in JavaScript is usually a bad idea, as it will overload the user’s browser with too much data and computing. As a result your web app will lag and not be responsive. Using the Python backend to perform the core data manipulation is a much better solution, as your computations will be efficiently executed in the backend, and only the data that need to be displayed will be sent to the browser. Go further with the Python backend in this How-To article.

The various JS and CSS libraries will allow you to create impressive web apps. D3.js is the state-of-the-art library for data visualization. Be sure to check out the gallery for stunning and interactive visualizations. Furthermore, many examples are given with their generating code so that you can use them as templates.

Besides, you can use jQuery to make your web app interactive by letting the user choose from a select menu, click on a button, or fill an auto-complete form. You can also use AngularJS for even more advanced interactivity. To make your web app stylish, you can use the Bootstrap CSS library: you will recognize the look and feel of many modern web sites! And finally, if you want to display your data on a map, you can use Leaflet.