Use a web app Python backend

May 23, 2017

A standard web app can retrieve the contents of a dataset in JavaScript to be able to visualize it. However, with large datasets it is often unrealistic to do all the processing in the browser.

Furthermore, the JS API only provides simple dataset access. For example, it cannot perform SQL queries.

The DSS custom web apps provide a Python backend that can be very useful to process and aggregate dataset in the backend rather than in the browser.

It enables you to access data that would be too large to process in your browser, gives you access to the pandas library to filter and/or aggregate your data, or basically anything you could do in Python.

This post explains how to query the Python backend from the client with JavaScript. We are going to dissect the automatic sample that DSS generates when you enable the Python backend for the first time.

Then we will go through a slightly more complex example (display top film directors in San Francisco!) .

Python Backend Hello World

Open a new web app and click on the Python tab and click on Enable python backend link.

Web App; enabling the Python backend

When you enable the python backend, DSS automatically generates samples in the Python and in the JavaScript panels to illustrate how to interact with the backend:

Web App; sample Python script

To define a backend entry point that will execute the first_call function, we use the app.route decorator before the function declaration:


The first_call function was created with a code example to read on dataset, let’s replace it for now with a simpler version that will return fake data. This way we can quickly test that everything is in place to communicate with the frontend.

def first_call():
    return json.dumps({"status": "ok", "data": [1,2,3]})

On the JavaScript side, if we want to contact the backend, we first need to obtain the URL corresponding to the entry point name, we use:


We then use the jQuery function $.getJSON to call and retrieve the response of the function first_call. The URL is passed as first argument of the $.getJSON function. The second argument is the function that will handle the dictionary returned by the first_call python function. Here we simply print the result in the JavaScript console.

    $.getJSON(getWebAppBackendUrl('first_api_call'), function(data) {;

Open the JavaScript console and observe the result.

Phew, this was a little tedious and verbose but we now know how to call the Python backend from JavaScript.

This is nice, we requested the backend and printed the answer. But this is not very useful, let’s do data processing with the backend.

Let’s build our first interactive app with a python backend.

Top film directors

We are going to construct a small application that shows directors and the number of films they realized in San Francisco. We will order directors by the number of films they realized in San Francisco hence showing Film directors that love the most San Francisco!

  • Retrieve the dataset on San Francisco film locations and upload it in the studio.

  • Then, import the Bootstrap library in your web app (from the “Settings” tab):

Importing the Bootstrap library into your web app

  • First, we load the dataset in the backend, aggregate it by film title (to have one line by film):
import pandas as pd
import dataiku
from dataiku import pandasutils as pdu

# Retrieve Film location
sf_films = dataiku.Dataset("Film_Locations_in_San_Francisco").get_dataframe()

# Aggreggate data by film
San_francisco_film = sf_films.groupby(['Title']) \
          .first()[['Release Year', 'Director', 'Actor 1', 'Actor 2', 'Actor 3']] \
  • We then aggregate it by director to retrieve the number of films by director. We also sort the result by the number of films.
# Agreggate data by directors and sort directors by number of films realised in
# San Francisco
count_Director = San_francisco_film.groupby(['Director']).Title.count().sort_values(ascending=False)
  • Then, we define a function to return our aggregated dataset to the client. We use the handy pandas Dataframe method to_json() to automatically convert our dataframe to JSON.
def director_table():
    return count_Director.to_json(orient='index')
  • We call the python function in JavaScript with $.getJSON and display the result in the JavaScript console.
    function(data) {

In the console, you can see that your Pandas dataframe has been properly return in the form of a json dictionary:

JSON dictionary representation of Pandas data frame

  • Now, we would like to display the directors table in the output of our web app. First we add a container for our table in the HTML part of our editor:
<div class="container">
  <button id="get_dir" class="btn btn-default" type="submit">Show directors</button>
  <button id="hide_dir" class="btn btn-default" type="submit">Hide directors</button>
  <h2>Top Film Directors Of San Franscisco</h2>
  <table class="table table-hover">
    <tbody id ="directors" >
  • We use jQuery to add lines to the tables container:
var getDirectors = function(){
           function(data) {

                     var entry = "<td>"+key+"</td> <td>"+ value + "</td>";
                     var line = "<tr class='director'>"+ entry +"</tr>";


You should know see a classy table in the output of our insight:

Output table showing top directors in San Francisco

Add interactivity

We would like to show or hide the table on demand of the user.

  • Add two buttons in the HTML:
<div class="container">
  <button id='get_dir' class="btn btn-default" type="submit">Show directors</button>
  <button id='hide_dir' class="btn btn-default" type="submit">Hide directors</button>
  • Link the click event on the two button to showing or hiding the table with Jquery:
$("#get_dir").bind("click", function(){

$("#hide_dir").bind("click", function(){
  • Congratulations! You have constructed your first interactive app that calls the python backend:

Updated table with interactive control to show or hide directors; directors shown

Updated table with interactive control to show or hide directors; directors hidden