I’ve been into generating documents and graphs from data (and source) since I started working on my PhD, which is like 15 years ago by now. Back then, I used MetaPost for generating PostScript figures to include in the thesis. The benefits of not using any of the available interactive tools (xmgr comes to mind) were and still are plentiful. Besides being able to create figures that exactly match the font and style of the document for which they’re created, I could easily make style changes on all the graphs simultaneously using a few key strokes. Obviously (at that time) the document itself was generated using LaTeX.

Static Visualizations

The last couple of years a lot has happened concerning both marking up documents, but also rendering graphs and visualizations. I have been using Markdown and RMarkdown extensively in the past, both for rendering (publication ready) PDF documents as for a quick export to html and even for creating presentations.

RMarkdown in combination with knitr lets you include programming code to be executed in-place in a document. The output of the code (text, table, graph, …) is included in the document. This is very much like how I created the MetaPost figures for my PhD thesis, with the exception that the code still lived outside of the source document.

Most of what I have been doing with these tools is static, but more and more, interactivity becomes important. Especially if you think in the context of Visual Analytics, user interaction may be the differentiating factor. Obviously, a PDF document is too static. Let us turn then to the web…

Dynamic Visualizations

The web is made for interactivity. Either via middleware that runs in the browser (Java, Flash, …) or by means of Javascript that runs natively. My impression is that D3.js is becoming the standard in Javascript frameworks for interactive visualizations. Many Javascript visualization libraries are built on top of D3:  RickShaw, Epoch, Dimple, ParCoords.js, etc. There are others libraries besides D3, but they do not yet have the same community around them: P5.js, Bokeh.js, Tableau, …

With all these nice tools and frameworks for (interactive) visualization, why would you still write the code for those things in a text editor? Why not move the development environment to the browser as well? But still keeping text and code (and the result of the code) together.

This can be done using so-called notebooks. Examples are IPython, IJulia, Scala-notebook, Spark-notebook, RNotebook, etc. Those are fun things to work with. You can combine text, code, figures, etc. and run the code interactively. This way, using the proper visualization library, it is possible to create visualizations immediately in D3 for use in the browser.

Interactivated Visualizations

All the above is nice, but when a graph is created all (at least as far as I know) visualization libraries that work in a notebook (matplotlib for Python to name one) render static images that are shown in the notebook window. In other words, there is no interactivity. Even no simple zooming or panning! The conclusion is that all interactivity should be explicitly coded in the appropriate D3 way. Why then use a notebook?

Now, take a look at what mpld3.js does: it converts a matplotlib-rendered vizualization into a D3 visualization. Boom! It’s as simple as that. By translating the functions into D3 code and rendering the resulting visualization in the notebook, we immediately get an interactive graph instead of a static image. The only thing to be changed to the code for the visualization is adding one line in the beginning.

Granted, zooming and panning are not terribly useful in all situations. But other modes of interactivity are possible as well by means of plugins that code for specific interactions.

To me, this is a huge step forewards: no need to learn D3 for creating basic interactive visualizations for the browser, just translate what you have and know to D3.

Are you familiar with similar libraries, please do not hesitate to tell us!

For completeness: It is possible to turn RMarkdown documents into interactive visualizations as well, using R and Shiny, for instance.