In order to master the technique of creating widgets, we will construct an interactive dashboard application which includes a variety of htmlwidgets based on c3.js. A screenshot of the end result can be seen below. A live version of a more complete version of our dashboard can be seen here (this app is best viewed on a high res screen).
Shiny.addCustomMessageHandler and the R Shiny function
sendCustomMessage. A great introduction to these functions is offered in this blog post, and we will discuss each function in detail within the tutorials as well.
The data in the dashboard represents data from an insurance company that screens persons who apply for a new insurance during underwriting. Underwriting is the process in which an insurance company assesses whether or not it should accept a person into their portfolio. If the risk for specific type of claims is deemed too high, the insurer may decide to reject an application. For the purposes of the tutorials, we use a toy dataset of 20,000 rows which looks like this:
id date score result branch product process label 1 1 2014-04-10 0 GREEN Generated Property Claims Phone 2 2 2015-10-22 60 AMBER Generated Property New car Phone 3 3 2015-11-10 150 RED Damage Property Acceptance Internet 4 4 2015-11-06 25 GREEN Damage Liability Claims Phone 5 5 2014-09-29 10 GREEN Damage Pets Acceptance Internet 6 6 2014-01-28 5 GREEN Damage Property New driver Agency
Each row represents a new screening. The column
id provides a unique case, while the column
date indicates the date at which a person was screened. The column
score indicates the risk score estimated by the insurance company. Higher scores indicate that the person has a higher estimated probability to file a claim or to commit fraud somewhere in the future. The column
result refers to a discretized version of the score column. For our dashboard this is the most important variable. Scores between 0 and 50 are mapped to GREEN, while scores from 51 to 75 are mapped to AMBER. Scores above 100 are mapped to RED, which indicates the highest risk group. The final four columns indicate the
label associated with the policy application. The exact meaning of these categories depends on the insurer. Their main purpose is to help the insurer to process new policy applications more quickly.
In the screenshot above, the four gauges indicate the percentage of RED cases for a specific time period. You can select the percentages for different risk groups with the drop-down menu on the left. The four pie charts indicate the distribution of the screenings over the various processes, labels, product and branches. The bar + line chart is an example of a c3.js combination chart with dual y-axes and a single x-axis indicating time. The gray bars indicate the total number of screenings for each week (left y-axis), while the green, amber and red lines correspond to the percentage of cases which are estimated as GREEN, AMBER or RED, respectively (right y-axis). Finally, the bottom chart shows the same information, but this time as a stacked area chart. The toggle button on the left allows you to toggle between displaying percentages or absolute counts.