Using sparklines in R projects

Reading time:

time

min

tutorials

By:

Filip Stachura

January 25, 2016

Today we are going to show you how to use a tinny but useful library called <a href="https://github.com/htmlwidgets/sparkline">sparkline</a>. Sparkline itself is a small widget that uses jQuery under the hood<a class="footnote" href="#fn:1">1</a>. Both technologies - jQuery and the widget itselt are implemented in JavaScript. JavaScript has superpowers when it comes to visualizations and almost always exceeds anything we can get with other languages. That’s the main reason why people using Python, R or anything else want to use JavaScript. In case of R it is possible thanks to htmlwidgets<a class="footnote" href="#fn:3">2</a> package, which we are going to describe in another article. <h1 id="examples">Examples</h1> Lets get straight to the point and look at some examples. Install: As this package is not available at CRAN we need to install it with devtools<a class="footnote" href="#fn:2">3</a>: <figure class="highlight"> <pre><code class="language-r" data-lang="r">library(devtools) # install_github('htmlwidgets/sparkline')</code></pre> </figure> We need some data to play with. In this case we’re going to use weather forecasts for New York: <figure class="highlight"> <pre><code class="language-r" data-lang="r">library(SmarterPoland) library(sparkline) warsawWeather <- getWeatherForecast(getOption("DarkSkyApiKey"), city = "New York") nextWeekTemperature <- warsawWeather$by.day$temperatureMaxCelsius sparkline(nextWeekTemperature)</code></pre> </figure>  <script type="application/json" data-for="htmlwidget-0ffe020476f2096cad8b">{"x":{"values":[27.3111111111111,28.1666666666667,23.3277777777778,26.4333333333333,27.0444444444444,30.7666666666667,31.7166666666667,31.1],"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script> <h1 id="types-of-charts">Types of charts</h1> Sparkline has several flavors. <ol><li>Bar chart <script type="application/json" data-for="htmlwidget-11903b480a4888c98132">{"x":{"values":[27.3111111111111,28.1666666666667,23.3277777777778,26.4333333333333,27.0444444444444,30.7666666666667,31.7166666666667,31.1],"options":{"type":"bar","height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script> where we can adjust bar colors<script type="application/json" data-for="htmlwidget-283c6a57d7062fc7b7b7">{"x":{"values":[27.3111111111111,28.1666666666667,23.3277777777778,26.4333333333333,27.0444444444444,30.7666666666667,31.7166666666667,31.1],"options":{"type":"bar","barColor":"red","height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script></li><li>Boxplot: <script type="application/json" data-for="htmlwidget-1c30c9d8bd5d0b0b01b5">{"x":{"values":[27.3111111111111,28.1666666666667,23.3277777777778,26.4333333333333,27.0444444444444,30.7666666666667,31.7166666666667,31.1],"options":{"type":"box","height":20,"width":"400px"},"width":"400px","height":20},"evals":[],"jsHooks":[]}</script></li><li>Bullet graph: <script type="application/json" data-for="htmlwidget-813cfd434c834b7749db">{"x":{"values":[7,8.5,5,8,10],"options":{"type":"bullet","height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script></li><li>And of course pie chart: <script type="application/json" data-for="htmlwidget-1620d6d0cf5988408a5b">{"x":{"values":[-2,-3,0,3,-4,4,1,5,2,-1],"options":{"type":"pie","height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script></li></ol> You can also use two types tristate and discrete, however I’ve never used those two until this time (check out documentation if you curious!). I’ve shown how you can pass arguments to plots in the examples. A Precise explaination of all options and configurations is available in <a href="http://omnipotent.net/jquery.sparkline">jQuery plugin documentation</a>. <h1 id="boosting">Boosting</h1> It gets even better if we embed sparkline within tables with data. Familiar with formattable? You will be! <div id="htmlwidget_container"> <div id="htmlwidget-8685" class="formattable_widget html-widget-static-bound" style="width: 100%;"> <table class=" table table-condensed"> <thead> <tr> <th class="text-right">Large</th> <th class="text-right">small</th> <th class="text-right">Rank</th> </tr> </thead> <tbody> <tr> <td align="right">A</td> <td align="right">d</td> <td align="right"><script type="application/json" data-for="htmlwidget-2541">{"x":{"values":[3,4,1,5,2],"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script></td> </tr> <tr> <td align="right">B</td> <td align="right">c</td> <td align="right"><script type="application/json" data-for="htmlwidget-2541">{"x":{"values":[3,4,1,5,2],"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script></td> </tr> <tr> <td align="right">C</td> <td align="right">b</td> <td align="right"><script type="application/json" data-for="htmlwidget-2541">{"x":{"values":[3,4,1,5,2],"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script></td> </tr> <tr> <td align="right">D</td> <td align="right">a</td> <td align="right"><script type="application/json" data-for="htmlwidget-2541">{"x":{"values":[3,4,1,5,2],"options":{"height":20,"width":60},"width":60,"height":20},"evals":[],"jsHooks":[]}</script></td> </tr> </tbody> </table> </div> </div> <figure class="highlight"> <pre><code class="language-r" data-lang="r">library(formattable) library(sparkline) formattable( data.frame(Large = LETTERS[1:4], small = letters[4:1], Rank = NA), list( "Rank"=function(z) { sapply( paste0(text='`r htmltools::tagList(sparkline(sample(5)))`') ,function(md) knitr::knit(text=md, quiet=T) ) } ) )</code></pre> </figure> <label class="margin-toggle" style="font-size: 0.8em; text-decoration: underline;" for="‘mn-trick’"> sticky note</label><input id="‘mn-trick’" class="margin-toggle" type="checkbox" />I had to use a small trick here. Who knows what I did? Formattable lets you do that and more when it comes to presenting your data in readable form. It has its own htmlwidget as well. <h1 id="what-next">What next?</h1> For those of you who think that charts in the browser are mainstream I recommend working with command line. spark <label class="margin-toggle sidenote-number" for="‘sn-sick’"></label><input id="‘sn-sick’" class="margin-toggle" type="checkbox" />Not the best choice when it comes to the name of the library. is a simillar package to sparkline, but it renders charts straight in the command line! <figure class="highlight"> <pre><code class="language-text" data-lang="text">## ▄▂▁▃▃▁▅▆▅▇▇▆▅▃▄▄▅▃▂▁▁▂▃▃▃▃▂▅▅▅▄████ ## ▁▃▁▂▂▁▂▄▄▆▇▇▇██▇█▇▇▆▆▇▇▇█▇▆▇▇▇▆▇██▇ ## ▅▄▁▁▂▁▂▄▄▄▄▄▄▄▄▄▅▅▆▅▄▄▄▅▅▄▄▆▆▆▆████ ## ▁▁▁▂▂▂▂▃▄▃▅▆▆▅▅▆▇▇▇▇▇▇▇▇█▇▆▇█▆▆▇███</code></pre> </figure> <style> .post-image-image { background-position: center; } </style> <div class="footnotes"> <ol><li id="fn:1"><a href="https://jquery.com/">jQuery</a> is an old but still very popular library that allows to quickly implement various actions on websites (like animations, DOM manipulations, async calls). jQuery is replaced more and more often with some modern tools, but for some basic projects this is still good way to go. <a class="reversefootnote" href="#fnref:1">↩</a>[REF]: <a href="https://jquery.com/">jQuery</a> is an old but still very popular library that allows to quickly implement various actions on websites (like animations, DOM manipulations, async calls). jQuery is replaced more and more often with some modern tools, but for some basic projects this is still good way to go.[/REF]</li><li id="fn:3">Not the patient type? <a href="http://www.htmlwidgets.org/index.html">htmlwidgets</a> <a class="reversefootnote" href="#fnref:3">↩</a></li><li id="fn:2">I assume you have devtools installed. If not run install.packages(“devtools”). If like me, you prefer to use most recent version of packages look at the README.md in github repository <a href="https://github.com/hadley/devtools">devtools</a>. <a class="reversefootnote" href="#fnref:2">↩</a></li></ol> </div>