<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/an-extensive-tutorial-of-d3partitionr-0-2/"></div></div><div><a data-url="https://www.r-bloggers.com/an-extensive-tutorial-of-d3partitionr-0-2/" data-counturl="https://www.r-bloggers.com/an-extensive-tutorial-of-d3partitionr-0-2/" data-count="horizontal" data-text="An extensive tutorial of D3partitionR 0.2" class="twitter-share-button" data-via="rbloggers" href="https://twitter.com/share"></a></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://antoineguillot.wordpress.com/2016/11/20/an-extensive-tutorial-of-d3partitionr-0-2/"> R – Enhance Data</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<h3>Basis and principle of D3partitionR</h3>
<p>D3partitionR is to plot sequential and hierarchical data using treemap (and circle Tree Map), sunburst and partition chart, collapsible trees (indented or not).</p>
<p>The package only has one all-in function called D3partitionR(…) to create a partition chart. Two others functions as renderD3partitionR(…) and D3partitionROutput(…) are used to render partition charts in Shiny.</p>
<p>The goal of the tutorial will be to create a Shiny app plotting the evolution of Japan Trade from 1988 to 2015. The goal is to create the following shiny app :</p>
<p><img alt="japantradedemo" class="wp-image-540" src="https://i2.wp.com/antoineguillot.files.wordpress.com/2016/11/japantradedemo.gif?w=456&ssl=1" data-recalc-dims="1"></p>
<p>You can find all the code here:</p>
<p><a target="_blank" rel="nofollow" href="https://gitlab.com/ant-guillot/ExploringJapanTradeApp_Kaggle/tree/master">https://gitlab.com/ant-guillot/ExploringJapanTradeApp_Kaggle/tree/master</a></p>
<h3>Exploring Japan Trade from 1988 to 2015: downloading the data</h3>
<p>You can find the data we are going to use are available on Kaggle: <a target="_blank" rel="nofollow" href="https://www.kaggle.com/zanjibar/japan-trade-statistics">here</a> .</p>
<p>These data are exploring Japan import and export by countries and area and by type of goods (with several classifications).<br>
Download and unzip the data at the root of your project directory, we are going to need these later. You should have the following files in the directory:</p>
<p><img sizes="(max-width: 380px) 100vw, 380px" alt="2016-11-20-19_34_36-japantrade_article" class="wp-image-533" src="https://i1.wp.com/antoineguillot.files.wordpress.com/2016/11/2016-11-20-19_34_36-japantrade_article.png?w=456&ssl=1" data-recalc-dims="1"></p>
<h3>Creating the project.</h3>
<p>First, let’s create a Rstudio Shiny Project, then you can download the package we’ll need:</p>
<ul>
<li>shinydashboard</li>
<li>highcharter</li>
<li>data.table</li>
<li>D3partitionR</li>
</ul>
<h3>Creating the layout:</h3>
<p><img sizes="(max-width: 596px) 100vw, 596px" alt="japan_trade" class="wp-image-385" src="https://i0.wp.com/antoineguillot.files.wordpress.com/2016/10/japan_trade.png?resize=456%2C224&ssl=1" data-recalc-dims="1"></p>
<p>That’s what we want the final application to look like. Basically it contains:</p>
<ul>
<li>tabBox with two tabs, in each tabs:
<ul>
<li>A box with a time interval input and a radio button to switch between import and export</li>
<li>A partition chart to have a global overview over the period</li>
<li>A time series to see the evolution on the different area and segment (linked with the partition chart).</li>
</ul>
</li>
</ul>
<p>To create the layout, we need to:</p>
<ol>
<li>create an ui.r and server.r</li>
<li>properly modify the ui.r
<ol>
<li>add the package we need (also do this in server.R):
<pre>
library(shiny)
library(D3partitionR)
library(data.table)
library(highcharter)
require(shinydashboard)
</pre>
</li>
<li>Create the dashboard layout (the body will be create later)
<pre>
dashboardPage(
 dashboardHeader(disable = TRUE),
 dashboardSidebar(disable = TRUE),
 body
)
</pre>
</li>
<li>creating the body and the boxes
<pre>
body=dashboardBody(fluidPage(
h2(&quot;Exploring Japan trade from 1988 to 2015&quot;,align=&quot;center&quot;,style=&quot;font-variant: small-caps;&quot;),
tabBox(width = 12,
tabPanel(
&quot;Export and import by country&quot;,fluidRow(
box(width=12,title=&quot;Options&quot;,solidHeader = T,status = &quot;primary&quot;)
,box(width = 6,height = 800),
box(width=6,height = 800)
)
),
tabPanel(
&quot;Export and import by type of product&quot;,fluidRow(
box(width=12,title=&quot;Options&quot;,solidHeader = T,status = &quot;primary&quot;)
,box(solidHeader=T,width = 6,height = 700),
box(solidHeader=T,width=6)
)
)
)
)
) </pre>
</li>
</ol>
</li>
</ol>
<p>Your code should look this way:</p>
<pre>

library(shiny)
library(D3partitionR)
library(data.table)
library(highcharter)
require(shinydashboard)
#Body which contains the boxes
body=dashboardBody(fluidPage(
h2(&quot;Exploring Japan trade from 1988 to 2015&quot;,align=&quot;center&quot;,style=&quot;font-variant: small-caps;&quot;),
tabBox(width = 12,
tabPanel(
&quot;Export and import by country&quot;,fluidRow(
#Options box where our slider input and the import/export switch will be put
box(width=12,title=&quot;Options&quot;,solidHeader = T,status = &quot;primary&quot;)
,box(D3partitionROutput(&quot;D3Part1&quot;),width = 6,height = 800),
box(highchartOutput(&quot;Graph&quot;,height = &quot;600px&quot;),width=6)
)
),
tabPanel(
&quot;Export and import by type of product&quot;,fluidRow(
box(width=12,title=&quot;Options&quot;,solidHeader = T,status = &quot;primary&quot;)
,box(solidHeader=T,width = 6,height = 700),
box(solidHeader=T,width=6)
)
)
)
)
)
dashboardPage(
dashboardHeader(disable = TRUE),
dashboardSidebar(disable = TRUE),
body
)
</pre>
<p>When running server.r, you should get:</p>
<p><img sizes="(max-width: 338px) 100vw, 338px" alt="step1_app" class="wp-image-421" src="https://i2.wp.com/antoineguillot.files.wordpress.com/2016/10/step1_app.png?resize=338%2C169&ssl=1" data-recalc-dims="1"></p>
<p>Well that’s not very useful, let’s add some data and visualisation.</p>
<h3>Data processing (server.R)</h3>
<p>The data from kaggle need some preprocessing before being used.</p>
<ul>
<li>Replace hs2, hs4, hs6, area, country codification by their current name and save the data.table as an .RDS</li>
</ul>
<pre>
year_latest = data.table(read.csv(&quot;year_latest.csv&quot;))
hs2_eng = data.table(read.csv(&quot;hs2_eng.csv&quot;))
hs4_eng = data.table(read.csv(&quot;hs4_eng.csv&quot;))
hs6_eng = data.table(read.csv(&quot;hs6_eng.csv&quot;))
country_eng = data.table(read.csv(&quot;country_eng.csv&quot;))
year_latest = merge(year_latest,hs2_eng,by=&quot;hs2&quot;)
year_latest = merge(year_latest,hs4_eng,by=&quot;hs4&quot;)
year_latest = merge(year_latest,hs6_eng,by=&quot;hs6&quot;)
year_latest = merge(year_latest,country_eng,by=&quot;Country&quot;)
</pre>
<ul>
<li>Put the data under the proper format to use it with D3partitionR: data for the first tab</li>
</ul>
<pre>
#Selecting variable we want to plot
year_latest_proc=year_latest[,.(hs2_name,hs4_name,hs6_name,Country_name,Area,Year,VY,exp_imp)]
#Summing the value of exchanges
year_latest_proc_year=year_latest[,.(Value=sum(VY)),by=c(&quot;Country_name&quot;,&quot;Area&quot;,&quot;Year&quot;,&quot;hs2_name&quot;,&quot;exp_imp&quot;)]
year_latest_proc_year[,tot_value:=sum(Value),by=c(&quot;Country_name&quot;,&quot;Area&quot;,&quot;hs2_name&quot;,&quot;exp_imp&quot;)]
year_latest_proc_year[,prev_value:=sum(Value),by=c(&quot;Country_name&quot;,&quot;Area&quot;,&quot;exp_imp&quot;)]
#Deletion of small exchange (to have a fluid visualisation)
year_latest_proc_year[tot_value/prev_value&lt;0.02,hs2_name:=&quot;Other&quot;]
year_latest_proc_year=unique(year_latest_proc_year[,.(Value=sum(Value)),by=c(&quot;Country_name&quot;,&quot;Area&quot;,&quot;hs2_name&quot;,&quot;Year&quot;,&quot;exp_imp&quot;)])
#Path construction, the path need to be a list with the different steps
year_latest_proc_year[,path_str:=paste(paste(&quot;World&quot;,Area,Country_name,sep=&quot;/&quot;),hs2_name)]
year_latest_proc_year[,path:=strsplit(path_str,&quot;/&quot;)]
</pre>
<h3>Adding the top inputs: time range and import/export switch</h3>
<p>We wan the users of our apps to be able to select a specific time range to understand the japan commerce during this time range. Our input will be a slider one:</p>
<ul>
<li>The maximum and the minimum will be the ones from our data</li>
<li>The step size will be one since we only have yearly data.</li>
</ul>
<pre>
#Line to add in our options box
column(3, sliderInput(&quot;DateRange1&quot;, &quot;Time selection:&quot;,min = 1988, max = 2015, value = c(1988, 2015)))
</pre>
<p>We also want to add a switch input to let the user choose between import and export:</p>
<pre>
#Line to add in our options box, just after the previous line
column(width=3,radioButtons(&quot;exchangeToShow&quot;,label=&quot;Exchanges to show&quot;,choices=c(&quot;import&quot;,&quot;export&quot;)))
</pre>
<p>This input need to be converted in a condition that will be used to do some subsetting.</p>
<pre>
#Converting the input in a &quot;string condition&quot;
#To ba added to the server
 exchangesType=reactive({
switch(input$exchangeToShow,
&quot;import&quot;=&quot;exp_imp==2&quot;,
&quot;export&quot;=&quot;exp_imp==1&quot;
)
})
</pre>
<h3>Selecting the data accordingly to our input</h3>
<p>The input being built, the data need to be properly subsetted.</p>
<pre>
year_latest_proc_noyear_reac=reactive({
#Selecting data in the time range
year_latest_proc_noyear=unique(year_latest[Year>=input$DateRange1[1] &amp; Year &lt;=input$DateRange1[2],.(Value=sum(VY)),by=c(&quot;Country_name&quot;,&quot;Area&quot;,&quot;hs2_name&quot;,&quot;exp_imp&quot;)])
#Summing accordingly (we need to sum to have non timed data for the partition plot)
year_latest_proc_noyear[,prev_value:=sum(Value),by=c(&quot;Country_name&quot;,&quot;Area&quot;,&quot;exp_imp&quot;)]
year_latest_proc_noyear[Value/prev_value&lt;0.02,hs2_name:=&quot;Other&quot;]
year_latest_proc_noyear=unique(year_latest_proc_noyear[,.(Value=sum(Value)),by=c(&quot;Country_name&quot;,&quot;Area&quot;,&quot;hs2_name&quot;,&quot;exp_imp&quot;)])
#Building the path for the partition chart
year_latest_proc_noyear[,path_str:=paste(&quot;World&quot;,Area,Country_name,hs2_name,sep=&quot;/&quot;)]
year_latest_proc_noyear[,path:=strsplit(path_str,&quot;/&quot;)]
#Subsetting to get only the import or export
#Keeping only the value and path columns that are needed by the partition chart
year_latest_proc_noyear[eval(parse(text=exchangesType())),.(Value=sum(Value),path),by=c(&quot;Country_name&quot;,&quot;Area&quot;,&quot;hs2_name&quot;,&quot;path_str&quot;)]
})
</pre>
<h3>Building the partition chart:</h3>
<p>Once the data have been pre-processed building the partitionChart is easy.</p>
<pre>
output$D3Part1 = renderD3partitionR(
D3partitionR(data =list(path=year_latest_proc_noyear_reac()$path,
value=year_latest_proc_noyear_reac()$Value),Input=list(enabled=T,Id=&quot;D3Part1&quot;,clickedStep=T,currentPath=T,visiblePaths=T,visibleLeaf=T,visibleNode=T),width = 600,height = 600))
</pre>
<p>Some comments on the param:</p>
<ul>
<li>The data param is taking a list with a value item and the list of path linked to each value.</li>
<li>The input param allow us to use the partition chart as an input:
<ul>
<li>Clicked step send the name of the clicked step</li>
<li>Current path send back the position in the chart</li>
<li>Visible path, visible leaf and visible node send all the visible  paths/leaf/nodes from the current point of view.</li>
</ul>
</li>
</ul>
<p>When running the app, you should now see the partition chart summarizing the japan trade over your selected range.</p>
<h3>Building the evolution over time plot:</h3>
<pre>
output$Graph&lt;-renderHighchart(
hchart(unique(year_latest_proc_year[path_str%like%input$D3Part1$clickedStep &amp; eval(parse(text=exchangesType())) &amp; Year>=input$DateRange1[1] &amp; Year &lt;=input$DateRange1[2],
.(Value=sum(Value)),
by=c(&quot;Year&quot;,&quot;hs2_name&quot;)][order(Year)]), &quot;line&quot;, x = Year, y = Value, group = hs2_name)
)
</pre>
<p>As you can see, you can directly access the input from the partition chart using input$D3part1. The inputs are send to shiny as a list, so you need to select the inputs you’re interested in. Here, we want to see the evolution of trade between Japan and our selected area/country, using :</p>
<pre>path_str%like%input$D3Part1$clickedStep</pre>
<p>we are selecting all the path our clicked step belong to.</p>
<h3><span>Important comment:</span></h3>
<p>The app is now working, however the data preprocessing may take a big amount of time (around 1 to 2 minutes on my computer). To avoid that, you can run the preprocess step and save the aggregated data as a RDS. Thus, you’ll just have to load this RDS, which will be faster !</p>
<pre>year_latest= readRDS(&quot;data_aggr.RDS&quot;)</pre>
<h3>Conclusion and comments:</h3>
<p>With all this code, you should get a 1st working tab. The process to create the second one is pretty much the same.<br>
You can also try the modify the type of partition visualisation using type=”treeMap” or type=”partitionChart” or type=”sunburst”.</p>
<p>Thanks for reading, and I hope you enjoyed this walk-through !</p>
<p>Antoine</p>
<p> <a target="_blank" rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/antoineguillot.wordpress.com/350/"><img alt="" src="http://feeds.wordpress.com/1.0/comments/antoineguillot.wordpress.com/350/" border="0"></a> <img alt="" src="https://i1.wp.com/pixel.wp.com/b.gif?resize=1%2C1&ssl=1" border="0" data-recalc-dims="1"></p>
<p><div><div><div><div data-width="55" data-show-faces="false" data-send="true" data-layout="box_count" data-height="62" data-href="https://www.r-bloggers.com/an-extensive-tutorial-of-d3partitionr-0-2/"></div></div><div><a data-url="https://www.r-bloggers.com/an-extensive-tutorial-of-d3partitionr-0-2/" data-counturl="https://www.r-bloggers.com/an-extensive-tutorial-of-d3partitionr-0-2/" data-count="vertical" data-text="An extensive tutorial of D3partitionR 0.2" class="twitter-share-button" data-via="rbloggers" href="https://twitter.com/share"></a></div><div></div></div><div></div></div>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://antoineguillot.wordpress.com/2016/11/20/an-extensive-tutorial-of-d3partitionr-0-2/"> R – Enhance Data</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/?s=data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/?s=Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/?s=map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/?s=animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/?s=RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/?s=sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/?s=LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/?s=SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/?s=eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/?s=git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/?s=hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/?s=Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/?s=PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/?s=time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/?s=trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/9wfd2zWNW5w"></a></div>