Dummy

Radian: free declarative plotting for the web

11 July 2013

There are now quite a few JavaScript graphing solutions available out there, ranging from Flot (simple and easy to use) to D3.js (awesomely powerful, not quite as easy for a beginner to use). For BayesHive, we needed something that would be flexible enough to generate a range of plot types, and that we could easily integrate into the BayesHive document processing chain. Since users can generate documents with arbitrary plots in them, it would have been difficult to coordinate the rendering of HTML pages based on documents and the parallel JavaScript code needed to draw plots, so we went for a slightly different approach.

Radian is an HTML plotting library. It uses JavaScript internally to render its plots, but in most simple use cases, you don't need to write any JavaScript at all to generate plots. For example, to produce the plot on the right below, you just put the code on the left in your HTML page:


 <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>

There's a tiny bit of fixed JavaScript setup needed to bring in the relevant libraries, but the rendering of the plots is all done by the Radian library. For our document authoring needs, this is great, since we can just generate plot directives inline in the HTML we produce and we don't need to think about maintaining a separate stream of JavaScript. Because Radian is based on the AngularJS JavaScript framework, it's also very easy to make interactive plots. Radian really lowers the barrier to entry for writing web pages with interactive data visualisation.

The Radian approach has other benefits too, and as we worked on it, it became clear that this thing might be more generally useful — if you want to put plots in your web pages and you don't know or don't want to write JavaScript, it's perfect; if you have to produce plots from a web app, but don't know ahead of time what plots you need to produce, it's great; if you have a complicated application like ours that can produce lots of plots based on user input, it makes managing document generation very easy. So we decided to make Radian open source. It's released under the Mozilla Public License and you can download it today!

We'll be continuing to use Radian for BayesHive and will be adding features as we need them, but we have plans over time to do a lot more with Radian: there's a roadmap on the website.

We welcome questions, comments, bug reports, feature requests, pull requests (especially pull requests!).