<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/major-update-of-d3partitionr-interactive-viz-of-nested-data-with-r-and-d3-js/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://enhancedatascience.com/2017/09/20/d3partitionr-0-5-beta/"> Enhance Data Science</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>D3partitionR is an R package to visualize interactively nested and hierarchical data using D3.js and HTML widget. These last few weeks I’ve been working on a major D3partitionR update which is now available on <a rel="nofollow" href="https://github.com/AntoineGuillot2/D3partitionR" target="_blank">GitHub</a>. As soon as enough feedbacks are collected, the package will be on uploaded on the CRAN. Until then, you can install it using devtools</p>
<pre><pre>
library(devtools)
install_github(&quot;AntoineGuillot2/D3partitionR&quot;)
</pre>
<p>Here is a quick overview of the possibilities using the Titanic data:</p>
<p><img data-orig-file="https://i0.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/ExampleD3PartitionR_EnhanceDataScience.gif?fit=1184%2C580" data-orig-size="1184,580" data-medium-file="https://i0.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/ExampleD3PartitionR_EnhanceDataScience.gif?fit=300%2C147" data-attachment-id="2317" data-image-meta="{" data-image-description="" src="https://i0.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/ExampleD3PartitionR_EnhanceDataScience.gif?resize=640%2C314" data-permalink="http://enhancedatascience.com/2017/09/20/d3partitionr-0-5-beta/exampled3partitionr_enhancedatascience/" data-large-file="https://i0.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/ExampleD3PartitionR_EnhanceDataScience.gif?fit=640%2C314" alt="Example D3PartitionR" data-image-title="Example D3PartitionR" data-comments-opened="1" class="wp-image-2317" data-recalc-dims="1"></p>
<h2>A major update</h2>
<p>This update is a major update from the previous version which will break code from 0.3.1</p>
<h3>New functionalities</h3>
<ul>
<li><strong>Additional data for nodes</strong>: Additional data can be added for some given nodes. For instance, if a comment or a link needs to be shown in the tooltip or label of some nodes, they can be added through the add_nodes_data function
<p>
<figure class="wp-caption"><img data-orig-file="https://i2.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/additionalNodesInformation.png?fit=1336%2C744" data-orig-size="1336,744" data-medium-file="https://i2.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/additionalNodesInformation.png?fit=300%2C167" data-attachment-id="2320" data-image-meta="{" data-image-description="" src="https://i2.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/additionalNodesInformation.png?resize=640%2C356" data-permalink="http://enhancedatascience.com/2017/09/20/d3partitionr-0-5-beta/additionalnodesinformation/" data-large-file="https://i2.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/additionalNodesInformation.png?fit=640%2C356" alt="Additional data for a node" data-image-title="additionalNodesInformation" sizes="(max-width: 640px) 100vw, 640px" data-comments-opened="1" class="wp-image-2320" data-recalc-dims="1"><br>
<figcaption class="wp-caption-text">You can easily add specific hyperlink or text in the tooltip</figcaption>
</figure>

<li><strong>Variable selection and computation</strong>, now, you can provide a variable for:
<ul>
<li>sizing (i.e. the size of each node)</li>
<li>color, any variable from your data.frame or from the nodes data can be used as a color.</li>
<li>label, any variable from your data.frame or from the nodes data can be used as a label.</li>
<li>tooltip, you can provide several variables to be displayed in the tooltip.</li>
<li>aggregation function, when numerical variables are provided, you can choose the aggregation function you want.</li>
</ul>
</li>
<li><strong>Coloring</strong>: The color scale can now be continuous. For instance, you can use the mean survival rate to the Titanic accident in each node, this make it easy to visualise quickly women in 1st class are more likely to survive than men in 3rd class.</li>

<figure class="wp-caption"><img data-orig-file="https://i2.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/exampleAggregationFunction.png?fit=1333%2C706" data-orig-size="1333,706" data-medium-file="https://i2.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/exampleAggregationFunction.png?fit=300%2C159" data-attachment-id="2321" data-image-meta="{" data-image-description="" src="https://i2.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/exampleAggregationFunction.png?resize=640%2C339" data-permalink="http://enhancedatascience.com/2017/09/20/d3partitionr-0-5-beta/exampleaggregationfunction/" data-large-file="https://i2.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/exampleAggregationFunction.png?fit=640%2C339" alt="Continuous color scale D3partitionR" data-image-title="Visualise survival rate with D3partitionR" sizes="(max-width: 640px) 100vw, 640px" data-comments-opened="1" class="wp-image-2321" data-recalc-dims="1"><br>
<figcaption class="wp-caption-text">Treemap to show the survival rate to the Titanic accident</figcaption>
</figure>
<ul>
<li><strong>Label:</strong> Labels providing the showing the node’s names (or any other variable) can now be added to the plot.</li>
<li><strong>Breadcrumb:</strong> To avoid overlapping, the width of each breadcrumb is now variable and dependant on the length of the word</li>
</ul>
<figure class="wp-caption"><img data-orig-file="https://i1.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/variable_breadcrumb_width.png?fit=367%2C56" data-orig-size="367,56" data-medium-file="https://i1.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/variable_breadcrumb_width.png?fit=300%2C46" data-attachment-id="2322" data-image-meta="{" data-image-description="" src="https://i1.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/variable_breadcrumb_width.png?resize=367%2C56" data-permalink="http://enhancedatascience.com/2017/09/20/d3partitionr-0-5-beta/variable_breadcrumb_width/" data-large-file="https://i1.wp.com/enhancedatascience.com/wp-content/uploads/2017/09/variable_breadcrumb_width.png?fit=367%2C56" alt="" data-image-title="Variable breadcrumb width" sizes="(max-width: 367px) 100vw, 367px" data-comments-opened="1" class="wp-image-2322" data-recalc-dims="1"><br>
<figcaption class="wp-caption-text">Variable breadcrumb width</figcaption>
</figure>
<ul>
<li><strong>Legend: </strong>By default, the legend now shows all the modalities/levels that are in the plot. To avoid wrapping, enabling the zoom_subset option will only shows the modalities in the direct children of the zoomed root.</li>
</ul>
<h3>API and backend change</h3>
<ul>
<li><strong>Easy data preprocessing</strong>, The data preparation was tedious in the previous versions. Now, you just need to aggregate your data.frame at the right level, the data.frame can directly be used in the D3partitionR functions to avoid to deal with nesting a data.frame which can be pretty complicated.</li>
</ul>
<pre><span><pre>
##Loading packages
require(<span>data.table</span>)
require(<span>D3partitionR</span>)

<span>##Reading data</span>
<span>titanic_data</span><span>=</span>fread(<span><span>&quot;</span>train.csv<span>&quot;</span></span>)

<span>##Agregating data to have unique sequence for the 4 variables</span>
<span>var_names</span><span>=</span>c(<span><span>'</span>Sex<span>'</span></span>,<span><span>'</span>Embarked<span>'</span></span>,<span><span>'</span>Pclass<span>'</span></span>,<span><span>'</span>Survived<span>'</span></span>)
<span>data_plot</span><span>=</span><span>titanic_data</span>[,.<span>N</span>,<span>by</span><span>=</span><span>var_names</span>]
<span>data_plot</span>[,(<span>var_names</span>)<span>:</span><span>=</span>lapply(<span>var_names</span>,<span>function</span>(<span>x</span>){<span>data_plot</span>[[<span>x</span>]]<span>=</span>paste0(<span>x</span>,<span><span>'</span> <span>'</span></span>,<span>data_plot</span>[[<span>x</span>]])
  })]
</pre></span>
<ul>
<li><strong>The R API is greatly improved</strong>, D3partitionR are now S3 objects with a clearly named list of function to add data and to modify the chart appearance and parameters. Using pipes now makes D3partitionR syntax looks gg-like</li>
</ul>
<pre><span><pre>
##Treemap
D3partitionR()%<span>></span>%
  add_data(<span>data_plot</span>,<span>count</span> <span>=</span> <span><span>'</span>N<span>'</span></span>,<span>steps</span><span>=</span>c(<span><span>'</span>Sex<span>'</span></span>,<span><span>'</span>Embarked<span>'</span></span>,<span><span>'</span>Pclass<span>'</span></span>,<span><span>'</span>Survived<span>'</span></span>))%<span>></span>%
  set_chart_type(<span><span>'</span>treemap<span>'</span></span>)%<span>></span>%
  plot()

<span>##Circle treemap</span>
D3partitionR()%<span>></span>%
    add_data(<span>data_plot</span>,<span>count</span> <span>=</span> <span><span>'</span>N<span>'</span></span>,<span>steps</span><span>=</span>c(<span><span>'</span>Sex<span>'</span></span>,<span><span>'</span>Embarked<span>'</span></span>,<span><span>'</span>Pclass<span>'</span></span>,<span><span>'</span>Survived<span>'</span></span>))%<span>></span>%
    set_chart_type(<span><span>'</span>circle_treemap<span>'</span></span>)%<span>></span>%
    plot()
</pre></span>
<p><strong>Style consistency</strong> among the different type of chart. Now, it’s easy to switch from a treemap to a circle treemap or a sunburst and keep consistent styling policy.</p>
<p><strong>Update to d3.js V4 and modularization</strong>. Each type of charts now has its own file and function. This function draws the chart at its root level with labels and colors, it returns a zoom function. The on-click actions (such as the breadcrumb update or the legend update) and the hover action (tooltips) are defined in a ‘global’ function.</p>
<p>Hence, adding new visualizations will be easy, the drawing and zooming script will just need to be adapted to this previous template.</p>
<h2>What’s next</h2>
<p>Thanks to the several feedbacks that will be collected during next week, a stable release version should soon be on the CRAN. I will also post more ressources on D3partitionR with use cases and example of Shiny Applications build on it.</p>
<p>The post <a rel="nofollow" href="http://enhancedatascience.com/2017/09/20/d3partitionr-0-5-beta/" target="_blank">Major update of D3partitionR: Interactive viz’ of nested data with R and D3.js</a> appeared first on <a rel="nofollow" href="http://enhancedatascience.com/" target="_blank">Enhance Data Science</a>.</p>

				
		
<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://enhancedatascience.com/2017/09/20/d3partitionr-0-5-beta/"> Enhance Data Science</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 rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/_LfCXNR3g0I" height="1"></a></div></pre></pre></ul></pre>