Radian is an open source JavaScript library that makes it easy to embed plots in HTML documents. It is being developed as part of OpenBrain’s BayesHive project.

Instead of writing JavaScript plotting code yourself, you use custom HTML elements to represent plots. For instance, the HTML code on the left produces the plot on the right:

<plot height=200 aspect=2 stroke-width=2
      x="[[seq(0,4*PI,101)]]"
      axis-x-label="Time"
      axis-y-label="sin(x) / cos(x)">
  <lines y="[[sin(x)]]" stroke="red"></lines>
  <lines y="[[cos(x)]]" stroke="blue"></lines>
</plot>

Radian uses the AngularJS JavaScript framework to provide the machinery to implement custom HTML elements, and to allow two-way binding between attributes in HTML elements and JavaScript variables, and it uses the D3.js plotting library for graphics generation. Plots are generated as SVG elements embedded directly in the page, so can be rendered by most modern browsers.

Radian is licensed under the Mozilla public license.


Applications

Radian is used extensively in the BayesHive Bayesian statistics platform. If you want to get an idea of what you can do with Radian, take a look at BayesHive.


Features


Rationale

There are many JavaScript plotting and graphing libraries out there, ranging in complexity from quick-and-easy utilities like Flot up to powerful but complex libraries like D3.js. These things are great, and produce attractive graphs, but they do require you to write JavaScript. Radian is a plotting API that works in a different way: plots are defined declaratively using custom HTML elements. Apart from a tiny bit of boilerplate setup code, you don’t need to write any JavaScript. This has a couple of benefits:


We couldn’t do it without…

Radian leverages the power of two very cool JavaScript libraries:

AngularJS is a framework for building web applications that’s based on a couple of interesting and innovative ideas. The first is two-way data binding – you can easily set things up so that the contents of an HTML page are linked to JavaScript variables, so that changes in the JavaScript values are reflected immediately in the displayed page, and changes in the page (via interactive elements in forms) are propagated to the JavaScript values. The second idea is that of extending HTML with custom tags and attributes that to implement application-specific behaviours. As you’ll see, Radian makes heavy use of both of these ideas. For example, two-way data binding makes it almost trivial to produce interactive plots, and custom HTML elements are used everywhere: <plot>, <plot-data>, <lines>, <points>, and so on.

The second big thing we use is D3.js. This is a library for building “data-driven documents”. It’s quite complex to use, but it can produce amazing results – take a look at some of the examples for a taste of what it can do.

We wanted to take some of the best features of AngularJS and D3.js and use them to make a plotting API that was ridiculously easy to use for simple things, and possible to use for complex things.

As well as AngularJS and D3.js, we make use of a few other very useful libraries: we use a modified version of the Acorn JavaScript parser and the estraverse and escodegen libraries for parsing and processing Radian expressions.