Skip to content

Notebook analytics

Rational BI implements multiple reporting interfaces suitable for building different type of reports and analytics. Dashboards provide a way to graphically lay out visualizations in a grid on the screen and JavaScript Notebooks provide a virtual notbook interface for data science, literate programming and content-focused reports. You can switch between different report styles and a single report can incorporate elements of multiple styles at the same time.

New reports start out as notebooks, but you can select other styles in the header bar controls.

Rational BI notebooks can contain text and graphics which you can format by using the floating report toolbox.

In addition to text, notebooks can also contain data visualizations that can be built through the data studio and JavaScript cells.

JavaScript cells are blocks of code that are evaluated when the report is rendered.

Creating JavaScript cells

Place the caret in the report by clicking on existing text or a visualization.

To create a new JavaScript cell, use the code cell icon code cell icon in the floating toolbar to insert a code cell in the document.

ObservableHQ compatibility

Rational BI uses open source libraries from ObservableHQ to implement JavaScript notebooks. Take a look at the Observable product for great interactive notebooks and awesome D3.js visualizations.

The ObservableHQ getting started guide is a great resource for learning to work with JavaScript notebooks and is mostly compatible with Rational BI (although see the compatibility notes below).


Most code that runs on Observable is also compatible with Rational BI with the following notes:

  • Imports are loaded from If you would like to import from an ObserableHQ notebook, prefix the import with observable:
  • FileAttachments are not supported. Rational BI implements the Database interface to access data from datasets.
  • Cells in Rational BI are hidden when the report is published in order to present an uncluttered report view. Viewers can copy the notebook to edit it and change the code.

Building reports with reactive JavaScript notebooks

Literals are printed through the built-in data inspector:

"Hello, world!"

Creating a variable

You can assign names to cells. Each named cell becomes a variable that can be accessed from other cells. When a variable is changed, all cells referencing that variable are recomputed as part of a Directed Acyclic Graphs.

color = "green"

You can print HTML, Markdown, LaTeX and SVG by simply prefixing them as literals:

html`<h1>Sales Report</h1>`
md`## Sales Report`
tex.block`RR = \left\{ \frac{\hat{p} - 0.3}{\sqrt{\frac{(0.3)(0.7)}{n}}} > 1.6450000001 \right\}`
html`<svg width="64" height="64"><rect x="10" y="10" width="30" height="30" stroke="green" fill="transparent"   stroke-width="5"/></svg>`

Use defined variables

Reference variables by referencing them in other cells:

html`<h1>Status is ${color}.</h1>`

Defining functions

You can define functions that you can reuse elsewhere:

function makeUppercase(inputString) {
  return inputString.toUpperCase();

Using functions

Use the function in other cells:

md`## Hello, ${ makeUppercase("world") }`

Import another report

You can import functions and variables defined in another report:

import { html } from "@rational/standardlib"

Importing ObservableHQ notebooks

You can import notebooks from ObservableHQ by prefixing the import with observablehq:

import {map} from "observablehq:@d3/interrupted-sinu-mollweide"