Billy Fung

Diving into web visualisations with Javascript

d3.js

Billy Fung / 2017-04-15


Web visualisations

Visualising and manipulating data is one of the most useful ways to gain intuition about how the variables within the data set behave. To begin any sort of numerical analysis, you usually plot the data to see if you can easily determine relationships without having to delve deeper immediately. This is all simple and easy if your data and visualisation all live within the same space, namely your local computing environment. But eventually you might run into the issue of not having enough resources to have multiple visualisations up at the same time.

Where I’m coming from

My scenario is such that in our office we use R and Shiny to quickly build tools and use them. An example of such a tool would be something that queries our Postgres database for a dataset, does some sort of analysis on it, then displays the result within a Shiny app that allows the user to view and make changes accordingly. The issue with this is that it then becomes a tool that you can only have one instance of R/Shiny at a time. What if I want to run more than one visualisation tool at a time? Have multiple VMs running different Shiny apps?

This quickly becomes cumbersome, although it does work. Another option is to have the visualisations hosted on the web. Certain charts might be always glanced at, and that seems to be a good reason to place them up on a web page somewhere. The downside to this is that it’s nowhere near as easy to make as a quick Shiny ggplot.

Javascript woes

It’s very easy to grab data in R, and then use ggplot to return a nice looking plot. The same task is multiple layers of complexity deeper when having to build a web app and render using javascript. Coming from an objected oriented background, I was glad to see that javascript as a language takes some form similar to C++. But that’s just looking at the language itself, and not how it’s used within a webpage.

I quickly learned how little I knew about how exactly webpages themselves worked, and the components of a webpage. Afterall, all I wanted was to be able to make some d3 charts and put them on a webpage, how difficult could that be?

This delves quickly into web standards and version standards pretty quickly. I decided I wanted to use a particular charting library that uses d3, but then it uses d3.v3 instead of the newer version of d3.v4 which changes a bunch of things. Such is the case of the every moving language of Javascript.

So what did I learn?

Whatever you learn now for the web is probably going to be outdated in a year.