D3 and R Shiny: The When & What of Data Viz, Part II
by Jamie Green
In When & What, we’ll first cover the major tools for a common task, and then discuss when you might want to use one instead of the others.
Our first major topic is data visualization, and the analysis is so thorough that two blogs seemed more appropriate than cramming it all into one. This is Part II (check out Part I here), which discusses D3.js and RShiny.
The Usual Suspects (cont’d): Commonly Discussed Data Viz Tools
D3.js
The astronomer Carl Sagan once said, “If you wish to make an apple pie from scratch, you must first invent the universe.” Sometimes, development using D3 feels like you’re doing just that. D3, short for Data-Driven Documents, is a JavaScript library developed by Mike Bostock and a huge community of volunteer developers. When you write code for D3, you don’t just say “put a bar chart here with these colors.” You need to tell your program what a bar chart even is: a series of rectangles of a certain fixed width, with a height equal to the value in your dataset, such that all the rectangles are aligned on the bottom of the graph. If this sounds miserable to you, then turn back now; head for open waters. Otherwise, read on.
Pros:
Flexibility — D3 relies on you, the developer, to specify exactly what you want to see. If you’re looking to make a map of the earth using the Buckminster Fuller Dymaxion Map, that’s great! A Marimekko chart with three-dimensional blocks that rotate occasionally for no particular reason? You can do that in D3. A rotating Voronoi diagram? I don’t know why you would, but go right ahead. You’re likely to reach the limitations of your imagination and sanity long before you stump JavaScript. One of the best examples of the power of JavaScript and D3 is the Visual Intro to Machine Learning, Part 1 and Part 2.
Advanced Learning Curve — The hardest part of learning D3 is getting started. Understanding how D3 creates, selects, and manipulates SVG objects just takes some time to understand. However, once you’ve reached a level of comfort with the basics, you’ll find that the more advanced D3 activities are simply extensions of those principles. If you’re ever stuck on a problem, there’s a huge support community within stackoverflow.com. You can also often find and view other developers’ portfolios, which might already include exactly what you’re trying to do —bl.ocks.org is an excellent site for these projects, since it shows you D3 code and its corresponding output.
Server hosting — If you can host a website, you can host D3. D3 is simply a library of functions developed for JavaScript, which is one of the three primary languages used in web development (the others being HTML and CSS, which you’ll also need to be conversant with to bring your D3 code to life). Just keep in mind that you may need to work with your organization’s webmaster to figure out a way to limit access to the right set of people, and configure your data pipeline such that it’s readable by your web page. You can also insert D3 into a simple app (think Flask or Django), which can easily be deployed on an AWS instance.
Cost — D3 is an open-source library, which means it’s free for everyone forever. You can download the entirety of D3 on their website, or simply have your HTML point to the latest D3 release using the following single line:
<script src=”https://d3js.org/d3.v5.min.js"></script>Integration with Analysis — JavaScript itself can’t do a ton in terms of machine learning, but that shouldn’t stop you. You can use AJAX to execute a script on your server and gather the script’s output in XML or JSON format, then use the results in your visualization.
Cons
Development Time — there’s no such thing as whipping up a quick D3 dashboard. Even the most basic dashboard can take hundreds of lines of code. Here’s an example of such a dashboard (by the bl.ocks.org user diethardsteiner) with a donut chart, a line chart, and a bar chart, and it weighs in at a whopping 801 lines of code. That said, there are shortcuts that can help; for commonly used charts, you can often find reusable code with a few easy Google searches. You can also consider any number of JavaScript libraries that simplify construction of D3-powered visualizations, such as c3.js.
Beginner Learning Curve — Many coding veterans would agree that JavaScript is not very easy for beginners. It has none of the freedom of Python and none of the logical structure of Java (to which JavaScript is related in name only). It can be difficult to understand exactly how JavaScript and D3 are manipulating your HTML objects, or how user input will be interpreted by the code. The easiest way to learn D3 is probably to take an existing D3 visualization and see what happens if you make changes here and there. What happens if I divide this y-position variable by two? What happens if I change this input from on-click to on-hover?
Shiny from RStudio (a.k.a. R Shiny)
If D3 sounds about as fun as a root canal, don’t fret — you’re not alone. If you’re still looking for a code-driven solution, then here comes R Shiny to the rescue. Made by the folks behind RStudio (the only IDE you’ll ever need for R development), R Shiny is a package written in R that simplifies the implementation of interactive R visualizations. In the same way that D3 uses HTML to define the interface and JavaScript to define the functionality, R Shiny requires a user interface (“ui.R”) file to position objects and an analysis (“server.R”) file to define what the charts are and how the user interacts with them.
Pros
Beginner and Advanced Learning Curve — If you know R (and if you’re a data practitioner, odds are that you do), R Shiny is a breeze to pick up. The only tricky parts are in mastering the server.R/ui.R framework, as well as how to use input, output, and reactive functions. But once you get the basic ideas down, you can start to play around with some code to push yourself further.
Flexibility — R Shiny doesn’t force you to build your charts from scratch like in D3; it does have some built-in visualization basics, but they’re honestly pretty awful. Instead, R visualizations are often built using the ggplot2 library. These are usually pretty easy to build — no more than a few lines for basic visualizations — and there are typically multiple ways to tackle most tasks, provided you don’t mind a static image. If you really want to kick your viz into high gear, you can integrate your ggplot2 objects with Plotly or bokeh, two excellent libraries that allow for more interactivity than base R can handle. Lastly, if you want to go beyond what even those libraries can do, you can even integrate JavaScript (and therefore D3) directly into your R Shiny dashboard. Check out http://gallery.htmlwidgets.org/ to see how others have integrated D3 into R Shiny, and https://rstudio.github.io/r2d3/ for a tutorial on how to make your own widget.
Server hosting — RStudio has a number of options for hosting Shiny apps. There’s only one free/open-source option, and it doesn’t include user authentication, but the paid options have a significant amount of support; their website details the specifics of the different options.
Cost — Outside of server hosting costs, R Shiny is completely free. If you can find a way to host it without a Shiny Server, you won’t have to shell out a dime.
Integration with Analysis — this is possibly the best part of R Shiny. When you build a Shiny dashboard, you never leave the R language, which means you can have your dashboard easily re-run analyses based on user input. The Shiny website has some great examples of this: check out this K-means clustering analysis or this Traveling Salesman solver.
Cons
Development Time — While not as daunting as D3, you still need to have a decent amount of code written before any visualization happens. This can be a hindrance for projects with very fast turnaround times.
Learning Curve — I know, I know, I put this in the Pros section, but that’s more of a comparison to D3, or for a relatively experienced R user. If coding isn’t your thing, or you’re not prepared to learn a new language, R Shiny naturally becomes a much less desirable option.
This Is The End: Some Final Thoughts on Data Visualization
When it comes to data visualization tools, there’s no silver bullet — at least, not yet. Think about what the needs are for your organization, and what level of difficulty you’re willing to tackle. But don’t choose one and stick to it dogmatically. There’s a whole world of options out there, and a good viz practitioner should know when to use each of the tools in his or her toolkit— including those beyond the four covered here.
Finally, keep in mind that it’s a poor craftsperson who blames the tools — the most important thing in data viz is putting in the requisite time, effort, and creativity to make your visualizations great. Happy visualizing!
Read some of our other great posts on data visualization here, here, and here.
_________________________________________________________________
If you liked this blog post, check out more of our work, follow us on social media (Twitter, LinkedIn, and Facebook), or join us for our free monthly Academy webinars.
