HomeArtificial IntelligenceJavaScript in Zepl Notebooks: Leverage the Energy of Fashionable Browsers

JavaScript in Zepl Notebooks: Leverage the Energy of Fashionable Browsers

Add interactive elements to Zepl Notebooks utilizing JavaScript

JavaScript dashboard created with a Zepl Pocket book 

Each knowledge scientist’s workflow requires visualizing knowledge. There are numerous instruments for this objective and every device has its professionals and cons, relying on the part of the undertaking or the aim of the visualization. Usually, in the beginning of a undertaking, we visualize knowledge in a means that gives insights into knowledge sorts, patterns, distributions, or availability. Nonetheless, on the finish of a undertaking, we create visualizations that finish customers and executives can leverage to devour our mannequin’s insights. These visualizations normally require extra customization to be helpful. Knowledge science notebooks, on the whole, are rather more helpful in the beginning of initiatives, however by the point we have to create a dashboard or report for the tip consumer, this usefulness fades.

Zepl Notebooks present intuitive in-line knowledge viz instruments via the z.present(df) perform. That is nice for after we need to rapidly peek into our knowledge or spot-check our knowledge after sure knowledge prep steps. More often than not, it is going to alleviate the additional work integrating Python packages (matplotlib) or exporting knowledge to a different device (Excel, Tableau) for visualization. But, whereas this performance is helpful for early-project knowledge visualization, it doesn’t give us the consumer enter and visible management required for superior visualization in late-project dashboards and stories. For this objective, we will leverage the facility of contemporary browsers and the applied sciences that make utilizing web-based purposes seamless and quick.

JavaScript is a strong programming language that enables us to make HTML components in a browser interactive. There are numerous libraries and sources out there for builders to leverage in their very own initiatives. Right here, we’ll solely contact a small pattern of what’s out there, but it surely must be sufficient to supply a basis for knowledge scientists to start integrating JavaScript into their Zepl Notebooks.

The Hey, World! of JavaScript in Zepl Notebooks

To get began, let’s run a really small snippet of JavaScript code from inside a Zepl Pocket book. This code will inform our browser methods to deal with a consumer occasion to govern an HTML ingredient.

Create a brand new Zepl Pocket book and add the next code snippet:

print(" ")
<p><b>Hey, World!</b></p>

This code snippet makes use of the Python print perform so as to add HTML components to the output of our Zepl Pocket book’s paragraph. Right here we use the <p> and <b> HTML tags to inform the browser methods to interpret the textual content (Hey, World!) present in between the tags. Subsequent, we’ll add some easy styling to the weather that may later be manipulated by a chunk of JavaScript code.

Add styling to the <p> tag:

<p type=”coloration: crimson;”><b>Hey, World!</b></p>

Hey, World! must be printed to the output in crimson textual content. Now, let’s write a chunk of JavaScript code that may change the colour of the textual content to inexperienced when the consumer clicks the textual content.

First, create a <script></script> tag to encapsulate our JavaScript code. This tag tells the browser to interpret the textual content inside it as JavaScript. Right here we will outline our JavaScript perform that may manipulate the colour of the textual content contained in the <p> tag. 


Inside our new <script> tag, let’s outline a perform named ‘handleTextClick()’. This perform shall be known as when the consumer clicks the textual content contained in the <p> tag. 

		perform handleTextClick() {
			// code to alter coloration of textual content

Add a line of code inside this perform that may change the colour of the textual content to inexperienced.

		perform handleTextClick() {
			doc.getElementById(“myText”).type.coloration = “inexperienced”;

At this level, we now have written some JavaScript code to inform the browser what to do when the perform is triggered. Nonetheless, we now have not but supplied a means for this perform to be triggered. 

Let’s return to our <p> tag and outline an identifier (id) so the browser is aware of which HTML ingredient to change in addition to an occasion (onclick) to set off the perform that does the modifying. Our new <p> tag ought to seem like this now:

<p id=”myText” onclick=”handleTextClick()” type=”coloration: crimson;”><b>Hey, World!</b></p>

Now our browser is aware of to run the JavaScript perform, outlined in our <script> tag, when the ‘onclick’ occasion is triggered on the <p> tag. The ‘id’ of the <p> tag permits JavaScript to seek out the HTML ingredient that we need to modify.

We will run the paragraph and see a daring, crimson Hey, World! printed within the output of our paragraph. If the code was applied correctly, this crimson textual content will flip inexperienced after we click on on the textual content.

This straightforward piece of code demonstrates one thing essential and helpful: we will add HTML components in addition to JavaScript to govern these components primarily based on consumer actions on to our Zepl Notebooks. This augments the capabilities of notebooks fairly a bit as there are numerous JavaScript libraries for visualization, user-interface instruments, maps, dashboards, and even filters. Nonetheless, earlier than we focus on methods to import and leverage these libraries, we’ll first focus on how we will import knowledge from Python into our JavaScript code. 

Importing a Python Dataframe to JavaScript

Pulling Python knowledge into JavaScript is definitely actually easy. Nonetheless, the quantity of knowledge that may be loaded into JavaScript is restricted by the consumer’s browser. Use some warning for very giant dataframes and mixture the information as wanted to keep away from overloading the browser. Moreover, JavaScript knowledge operates in a different way than Python knowledge, and a tutorial on this nuance is outdoors of the scope of this text. Fortunately, there are a ton of sources out there on-line to discover working with knowledge in JavaScript.

First, let’s create a quite simple, small Python DataFrame in a brand new clean paragraph inside our Zepl Pocket book:


import pandas as pd

df = pd.DataFrame([['alec', 10], ['zack', 15], ['rick', 14]], columns=['Name', 'Score'])

Now that we now have our dataframe knowledge loaded into the ‘df’ Python variable, we will use this variable to load the information into JavaScript. Create a brand new <script> tag encapsulation inside a Python print assertion so we will inform the browser to interpret the code as JavaScript:

print(" ")
        // JavaScript code right here

Inside the <script> tag, create a JavaScript variable named ‘knowledge’ and print the output of the Python DataFrame’s ‘to_json()’ technique instantly after the project operator (=):

        	knowledge=""', df.to_json(orient="data"),'''

To ensure that JavaScript to see the Python output, we merely “flip off” the string encapsulation operator (”’)  for a second. This prints the output of ‘df.to_json()’ contained in the <script> tag in a format that JavaScript can interpret (JSON). I want to work with knowledge within the format generated by setting the ‘orient’ parameter to ‘data’ which defines the information as a JavaScript array of objects the place every object is a row/document from the Python DataFrame. This can be a matter of private desire, so be at liberty to make use of no matter JSON format works for you.

At this level, we now have efficiently loaded the information into JavaScript and may run JavaScript code primarily based on or with the information. Let’s confirm this by utilizing a helpful JavaScript perform after the project that may print its contents to our browser’s console:


You might discover that nothing actually appears to occur on the internet web page itself. The browser’s console is, by default, hidden from the consumer. So, let’s open up the console and see the JavaScript output of our knowledge.

FOR CHROME: Proper-click wherever on the Zepl Pocket book’s webpage and choose the “Examine” possibility on the backside of the listing. Within the new window (or side-window) that pops up, choose the ‘Console” tab on the prime of the window. It’s best to see some output written to the console at this level. You may ignore many of the console’s contents as it’s Zepl Net App output and irrelevant to our functions right here. 

Importing JavaScript Packages into Zepl Notebooks

We are actually in a position to run HTML and JavaScript from our Zepl Notebooks, in addition to learn knowledge into JavaScript that’s generated from Python. These two capabilities permit us to construct numerous visualizations and consumer interfaces inside our notebooks. We may construct these visualizations and consumer interfaces from scratch, however why would we attempt to reinvent the wheel? There are numerous open and easy-to-use libraries for these functions out there. Simply to call a number of:

  • Chart.js
  • Bootstrap
  • jQuery
  • DateRangePicker
  • D3.js

Importing these packages into our Zepl Notebooks may be very straightforward. I exploit a CDN (Content material Supply Community) which is principally a set of servers out there to supply the supply code to those packages on request. To request a bundle/library merely discover a area that hosts the code and use the next JavaScript encapsulation in the beginning of your Python ‘print’ assertion (however after %html).

<script src="https://cdn.jsdelivr.internet/npm/chart.js@3.6.2/dist/chart.min.js"></script>

This code snippet pulls supply code for chart.js immediately into our Pocket book browser, making the performance out there in our personal Javascript. Some fashionable net apps use this similar method for importing libraries, so for those who get caught, there must be loads of sources out there to seek out extra details about importing JavaScript libraries utilizing a CDN.

You can begin at the moment! With the DataRobot Zepl trial, you can begin at no cost at the moment by accessing the general public documentation and library of Pocket book Accelerators that we now have collected for you. Learn the way Embrace Dwelling Loans makes use of DataRobot Zepl to enhance their workforce’s effectivity and maximize ROI from the advertising efforts. 


Attempt DataRobot Zepl for Free At present

Attempt Now

Concerning the creator

Alec Siems

Options Architect

Alec Siems is an award-winning knowledge scientist who has developed a number of high-value predictive analytics fashions and dashboards for the transportation trade. He’s captivated with augmenting our productiveness when fixing tough issues via computing.

Meet Alec Siems



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments