Chapter 5.  Jupyter JavaScript Coding

JavaScript is a high-level, dynamic, untyped, and interpreted programming language. There are several, languages that are based on JavaScript. In the case of Jupyter, the underlying JavaScript is really Node.js. Node.js is an event-based framework that uses JavaScript that can be used to develop large, scalable applications. Note, this is in contrast to the earlier languages covered in this book that are primarily used for data analysis (Python is a general language as well, but has clear aspects that deal with its capabilities of performing data analysis).

In this chapter, we will cover the following topics:

• Adding JavaScript packages to Jupyter

• JavaScript Hello World Jupyter Notebook

• Basic JavaScript in Jupyter

• Node.js d3 package

• Node.js stats-analysis package

• Node.js JSON handling

• Node.js canvas package

• Node.js plotly package

• Node.js asynchronous threads

• Node.js decision-tree package

Adding JavaScript scripting to your installation

In this section, we will install JavaScript scripting on Mac and Windows. There are separate steps for getting JavaScript scripting available on your Jupyter installation for each environment. The Mac installation was very clean. The Windows installation appears to still be in flux and I would expect the following instructions to change over time.

Adding JavaScript scripts to Jupyter on Mac

Using JavaScript in Jupyter on Mac takes several steps. Jupyter on Mac is also known as IJavascript. The definitive site for this is https://www.npmjs.com/package/ijavascript specifically earmarked as providing the JavaScript kernel for Jupyter.

On the Installation page (http://n-riesco.github.io/ijavascript/doc/install.md.html) we can follow the guidelines given for macOS(the current operating system for Mac):

ruby -e "$(curl -fsSL
    https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install pkg-config node zeromq
sudo easy_install...

JavaScript Hello World Jupyter Notebook

Once it's installed, we can attempt the first JavaScript notebook by clicking on the New menu and selecting JavaScript. We name the notebook Hello World Javascript and put the following lines in this script:

var msg = "Hello, World!"
console.log(msg)

This script sets a variable and displays the contents of the variable. After entering the script and running (Cell | Run All) we end up with a notebook screen that looks like the following screenshot:

We should point out some of the highlights of this page:

• We have the now-familiar language logo in the upper-right that depicts the type of script in use.

• There is output (Out) from every line of the notebook. This appears to be a work in progress as line numbering is not meaningful.

• More importantly, we see the true output of the notebook (line 2 in the preceding screenshot) where the string is echoed.

• Otherwise, the notebook looks as familiar to the other types we have seen.

If we look at the contents of the...

Basic JavaScript in Jupyter

JavaScript, and even Node.js, are not usually noted for data handling, but for application (website) development. This differentiates JavaScript coding in Jupyter from the languages covered earlier. But, the examples in this chapter will highlight using JavaScript for application development with data access and analysis features.

JavaScript limitations in Jupyter

JavaScript was originally used specifically to address the need for scripting inside of an HTML page, usually on the client side (in a browser). As such, it was built to be able to manipulate HTML elements on the page. Several packages have been developed to further this feature, even creating a web server, especially using extensions such as Node.js.

The use of any of the HTML manipulation and generation features inside of Jupyter runs into a roadblock since Jupyter expects to control presentation to the user.

Node.js d3 package

The d3 package has data access functionality. In this case, we will read from a tab-separated file and compute an average. Note the use of the underscore variable name for lodash. Variable names starting with an underscore are assumed to be private, although, in this case, it is just a play on the name of the package we are using, lodash, or underscore. Also, lodash is a widely used utility package.

The script we use is as follows:

var fs = require("fs");
var d3 = require("d3");
var _ = require("lodash");
//read in the animals file
fs.readFile("data/animals.tsv", "utf8", function(error, data) {
    data = d3.tsv.parse(data);
//display on screen
    console.log(JSON.stringify(data));
//compute the maximum weight
    var maxWeight = d3.max(data, function(d) { return d.avg_weight; });
//display the max on screen
    console.log(maxWeight);
});

This assumes we have previously loaded the fs and d3 packages using npm, as described in the previous script.

For this example, I created...

Node.js stats-analysis package

The stats-analysis package has many of the common statistics you may want to perform on your data. You would have to install this package using npm as explained previously.

If we had a small set of people's temperatures to work with, we could get some of the statistics on the data readily, using this script:

const stats = require("stats-analysis");
var arr = [98, 98.6, 98.4, 98.8, 200, 120, 98.5];
//standard deviation
var my_stddev = stats.stdev(arr).toFixed(2);
//mean
var my_mean = stats.mean(arr).toFixed(2);
//median
var my_median = stats.median(arr);
//median absolute deviation
var my_mad = stats.MAD(arr);
// Get the index locations of the outliers in the data set
var my_outliers = stats.indexOfOutliers(arr);
// Remove the outliers
var my_without_outliers = stats.filterOutliers(arr);
//display our stats
console.log("Raw data is ", arr);
console.log("Standard Deviation is ", my_stddev);
console.log("Mean is ", my_mean);
console.log("Median is ", my_median...

Node.js JSON handling

In this example, we will load a JSON dataset and perform some standard manipulations of the data. I am referencing the list of Ford models from http://www.carqueryapi.com/api/0.3/?callback=?&cmd=getModels&make=ford . I could not reference this directly as it is not a flat file but an API call. So, I downloaded the data into a local file, fords.json. Also, the output from the API call wraps the JSON like ?(json); which would have to be removed before parsing.

The scripting we will use is as follows. In the script, JSON is a built-in package of Node.js so we can reference this package directly. The JSON package provides many of the standard tools that you need to handle your JSON files and objects.

Of interest here is the JSON file reader that constructs a standard JavaScript array of objects. Attributes of each object can be referenced by name, for example, model.model_name. We can see this feature in action with this script that reads in a JSON file and parses...

Node.js canvas package

The canvas package is used for generating graphics in Node.js. We can use the example from the Canvas home page (https://www.npmjs.com/package/canvas).

First we need to install canvas and its dependencies. There are directions on the home page for the different operating systems, but it is very familiar to the tools we have seen before (we have seen them for macOS):

npm install canvas
brew install pkg-config cairo libpng jpeg giflib

With the canvas package installed on your machine, we can use a small Node.js script to create a graphic:

// create a canvas 200 by 200 pixels
var Canvas = require('canvas')
  , Image = Canvas.Image
  , canvas = new Canvas(200, 200)
  , ctx = canvas.getContext('2d')
  , string = "Jupyter!";
// place our string on the canvas
ctx.font = '30px Impact';
ctx.rotate(.1);
ctx.fillText(string, 50, 100);
var te = ctx.measureText(string);
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.beginPath();
ctx.lineTo(50, 102);
ctx.lineTo(50 + te.width, 102);
ctx...

Node.js plotly package

plotly is a package that works differently to most. To use their software, you must register with a username and be provided an API key (at https://plot.ly/). You then place the username and API key in your script. At that point you can use all of the plotly features.

Firstly, like other packages, we need to install it:

npm install plotly

Once installed, we can reference the plotly package as needed. Using a simple script, we can generate a histogram with plotly:

//set random seed
var seedrandom = require('seedrandom');
var rng = seedrandom('Jupyter');
//setup plotly
var plotly = require('plotly')(username="<username>", api_key="<key>")
var x = [];
for (var i = 0; i < 500; i ++) {
    x[i] = Math.random();
}
require('plotly')(username, api_key);
var data = [
  {
    x: x,
    type: "histogram"
  }
];
var graphOptions = {filename: "basic-histogram", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
})...

Node.js asynchronous threads

Node.js has built-in mechanisms for creating threads and having them fire asynchronously. Using an example from http://book.mixu.net/node/ch7.html, we have the following:

//thread function - invoked for every number in items array
function async(arg, callback) {
  console.log('cube ''+arg+'', and return 2 seconds later');
  setTimeout(function() { callback(arg * 3); }, 2000);
}
//function called once - after all threads complete
function final() { console.log('Done', results); }
//list of numbers to operate upon
var items = [ 0, 1, 1, 2, 3, 5, 7, 11 ];
//results of each step
var results = [];
//loop the drives the whole process
items.forEach(function(item) {
  async(item, function(result){
    results.push(result);
    if(results.length == items.length) {
      final();
    }
  })
});

This script creates an asynchronous function that operates on a number. For every number (item), we call upon the inline function passing the number to the function that applies...

Node.js decision-tree package

The decision-tree package is an example of a machine learning package. It is available at https://www.npmjs.com/package/decision-tree . The package is installed using the following command:

npm install decision-tree

We need a dataset to use for training/developing our decision tree. I am using the car MPG dataset on this page: https://alliance.seas.upenn.edu/~cis520/wiki/index.php?n=Lectures.DecisionTrees . It did not seem to be available directly, so I copied it into Excel and saved it as a local CSV.

The logic for machine learning is very similar:

• Load our dataset

• Split into a training set and a testing set

• Use the training set to develop our model

• Test the mode on the test set.

Tip

Typically, you might use two-thirds of your data for training and one-third for testing.

Using the decision-tree package and the car MPG dataset we would have a script similar to the following:

//Import the modules
var DecisionTree = require('decision-tree');
var fs = require("fs");...

Summary

In this chapter, we learned how to add JavaScript to our Jupyter Notebook. We saw some of the limitations of using JavaScript in Jupyter. We had a look at examples of several packages that are typical of Node.js coding, including d3 for graphics, stats-analysis for statistics, built-in JSON handling, canvas for creating graphics files, and plotly used for generating graphics with a third party tool. We also saw how multi-threaded applications can be developed using Node.JS under Jupyter. Lastly, we saw how to use machine learning to develop a decision tree.

In the next chapter, we will see how to create interactive widgets that can be used in your notebook.