Data Analysis with R and Python

On Track

Web Interface

Listing 10 shows the HTML document for the sample application. The header binds the JavaScript jQuery library and the JavaScript code for generating reports into the CSS3 stylesheet. The selection list is generated by lines 12 to 16. The value attributes of the option elements store the respective URLs for the Python reports. Line 17 generates the Submit button. The div element, which contains id="output" (line 20), outputs the results.

Listing 10

www/index.html

01 <!DOCTYPE html>
02 <html>
03 <head>
04  <meta charset="UTF-8"/>
05  <link href="css/styles.css" rel="stylesheet"></link>
06  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">\
    </script>
07  <script src="js/app.js"></script>
08 </head>
09 <body class="centered">
10  <div class="container">
11   <form>
12   <select id="report">
13    <option value="bahntypen.py">Distribution of Orbit Types</option>
14    <option value="Kepler3.py">3. Kepler's Law</option>
15    <option value="eccdistr.py">Distribution of Orbit Eccentricities</option>
16   </select>
17   <input type="submit" value="Submit"/>
18   </form>
19  </div>
20  <div id="output" class="container"><p>Please Select</p></div>
21 </body>
22 </html>

Listing 11 finally shows the JavaScript code that the jQuery expression in line 7 of Listing 10 integrates. The script initializes the JavaScript code after the browser has fully loaded the web page from Listing 10. The callback function in lines 2 to 8 is enabled on sending the form in Listing 10. The preventDefault() method first interrupts the transmission process before the following line uses the image() function to send a Loader image to the output area.

Listing 11

www/js/app.js

01 $(document).ready(function() {
02  $('form').submit(function(e) {
03   e.preventDefault();
04   image("/img/ajax-loader.gif");
05   $.getJSON($('#report').val(), function(data) {
06    image(data.fileref);
07   }).fail(function(e) {out($('<p>').text("Error: " + e.status + \
                                            " - " + e.statusText))});
08  });
09
10  function image(url) {
11   out($("<img>").attr("src", url+"?"+(Date.now())));
12  }
13
14  function out(obj) {
15   $('#output').empty().append(obj);
16  }
17 });

As of line 5, jQuery uses getJSON() to launch a report on the web server. getJSON() sends an asynchronous HTTP request to the web server and expects a document in JSON format in response.

jQuery uses $('#report').val() to read the URL for the HTTP request --from the value attribute of the currently selected item in the selection list from Listing 10. If successful, the script converts the JSON object from the HTTP response into a JavaScript object and passes it over to the callback function as the data variable (lines 5 to 7).

Line 6 loads the resulting graphic from the web server in the browser by calling the image() function. jQuery reads the URL from the data.fileref component. In case of an error, line 7 outputs an error message in the browser instead of a graph using the out() function (lines 14 to 16).

R Sequence

The Rpy2 R interface lets programmers post complex statistical computations in R on the web using Python. Rpy2 attempts to emulate R as accurately as possible, but this approach doesn't work in all cases and the embedded R process slows down the Python scripts' response times. Developers should thus consider alternatives: The rApache [8] module offers a high-performance option for embedding the R process in a web server, and it leaves the application logic completely in R's hands. The Python Pandas [9] module is increasingly popular, but it currently only emulates a subset of R.

Infos