Your first Web app with DSS

May 30, 2015

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 the Haiku T-shirt sales data of the Tutorial 101.

Creating a new webapp

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

You will be prompted for the name of your web app, and you will 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 Output, which is the current output of your web app.

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. At any time you can save or run your current code by clicking respectively on the Save blue button and the Run green button.

Use HTML to organize your page

HTML is generally used to establish 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">

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 {

svg {
    width: 500px;

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 button in the top right, then go to the JS libraries tab.

A list with different 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 main 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 D3, provides basic reusable charts and is simpler to use than D3.

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 Datasets tab of the Settings screen.

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 : "20000"
             }, 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 in the format required by NVD3. To this end, we define our custom formatData function that is applied to each record of our dataset, through 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 : "20000"
             }, function(dataFrame) {

    // process data in 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.

    // draw the chart in the SVG element
    d3.select('#chart svg')



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.

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.

A 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 your 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.

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.