D3 and Shiny App for Data Visualization.

Prabhat Kumar
24th July 2015

1. About

D3 and Shiny App for Data Visualization.

This Shiny Web Application, is about temperature variation record analysis from last 10 years. I have taken the data for every 31st January from 2006 to 2015 for my City. There is some variation recorded and i have used it to plot a histogram by using Shiny and D3 framework.

It's just to know, how is the temperature varies every year on same date. To do this, i have separated my code in some parts:

  1. data in simple ".csv" format,
  2. server.R for some reactive output display as a result of server calculations,
  3. ui.R for the user-interface definitions,
  4. d3-shiny-app.html as a partial markup page, where i have written all the D3 logic to do data visualization.

2. Working Principle

[A] This is the server logic for a Shiny Web Application:

  1. First, data is taken by server.R in "data.csv" format,
  2. Then, reactive expressions is used to get the data and translate relative paths to server-friendly paths,
  3. When, in-case of data changes, again it updates the d3 plot.

3. Working Principle...

[B] This is the User-Interface Definition for a Shiny Web Application:

  1. First, shinyUI method give header of the working app,
  2. sidebar panel to get data source from server as well as from local,
  3. If you choose from local, upload can be done in .csv format,
  4. simultaneously, main panel can take the HTML partial page through includeHTML method, where all logic written by using d3 to draw csv format based data visualization.
  5. It have also feature to redraw the canvas, when you are uploading data from local.

4. Working Principle...

[C] This is the Data Visualization Definition for a Shiny Web Application:

  1. Shiny.OutputBinding() is a custom output component, that is used for a need of output binding, it's an object created that tells Shiny how to identify instances of the component and how to interact with them.
  2. The default implementation in Shiny.OutputBinding reads the data-output-id attribute and falls back to the element's id if not present.
  3. Now, I have added d3 from CDN and called renderValue(el, data),
  4. After that, I have set canvas dimension and written logic to remove the old graph, append a new one, worked with dates, develop functions to group the bars, labels, tooltip on mouseover-mouseout events, and finally added the text label, respectively.
  5. In Last, i have register “Output Binding” - created an output binding object, that needs to tell Shiny to use it.

5. Technology

  1. R
  2. Shiny
  3. D3
  4. SVG
  5. CSS
  6. Markdown

6. Editor

  1. RStudio
  2. Sublime Text

7. Data Set

Date,Morning,Evening
01/31/2006,02.1,6.8
01/31/2007,-01.89,4.44
01/31/2008,04.10,9.50
01/31/2009,05.68,8.10
01/31/2010,04.34,6.88
01/31/2011,-01.10,05.61
01/31/2012,01.89,5.44
01/31/2013,04.10,10.22
01/31/2014,08.68,4.10
01/31/2015,02.88,09.34

8. Thanks

  • Data Source: from The Hindu News Paper.
  • Note: Since I didn't use the API to collect data, the current data might not be 100% accurate.
  • Date updated: 24-July-2015

Copyright: © 2015 Prabhat Kumar, All Rights reserved.