<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/network-visualization-part-6-d3-and-r-networkd3/"></div></div><div><a data-url="https://www.r-bloggers.com/network-visualization-part-6-d3-and-r-networkd3/" data-counturl="https://www.r-bloggers.com/network-visualization-part-6-d3-and-r-networkd3/" data-count="horizontal" data-text="Network visualization – part 6: D3 and R (networkD3)" 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="http://www.vesnam.com/Rblog/viznets6/"> Fun with R</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>I was never that much into JavaScript until I was introduced to D3.js. This open source JS library provides the features for dynamic data manipulation and visualization and allows users to become active participants in data visualization process. As such, D3.js plots are not a static “as it is” data representation, but allow users to explore data points, hierarchies among the data, filter data by groups, and similar.</p>
<p>As somebody who uses R often for data analysis, I was excited to see the some of the libraries that link R and D3, such as <a target="_blank" href="https://cran.r-project.org/web/packages/plotly/">plotly</a> and <a target="_blank" href="https://cran.r-project.org/web/packages/networkD3/">networkD3</a> (or previously https://cran.r-project.org/web/packages/d3Network/). Here, I will focus on the networkD3 package.</p>
<p>As before, the network I will use as an illustration is a weighted network of characters’ coappearances in Victor Hugo’s novel “Les Miserables” (from D. E. Knuth, The Stanford GraphBase: A Platform for Combinatorial Computing, Addison-Wesley, Reading, MA, 1993) that consists of 77 nodes, corresponding to characters, and 254 weighted edges, corresponding to the number of characters coappearances in the same chapter of the book. I used four properties to characterize this network (for the sole purpose of making visualization more interesting) – the network nodes were characterized with two properties: degree and betweenness centrality, and the network edges were characterized with two properties: weight and Dice similarity (to see more details about these properties, see <a target="_blank" href="http://www.vesnam.com/Rblog/viznets1/">Network Visualization part 1</a> blog post). For calculation of network properties, I used the <a target="_blank" href="https://cran.r-project.org/web/packages/igraph/">igraph</a> package.</p>
<p>The <a target="_blank" href="https://cran.r-project.org/web/packages/networkD3/">networkD3</a> package provides a function called <em>igraph_to_networkD3</em>, that uses an igraph object to convert it into a format that networkD3 uses to create a network representation. As I used igraph object to store my network, including node and edge properties, I was hoping that I may only need to use this function to create a visualization of my network. However, this function does not work exactly like that (which is not that surprising, given the differences in how D3.js works and how igraph object is defined). Instead, it extracts lists of nodes and edges from the igraph object, but not the information about all node and edges properties (the exception is a priori specified information about nodes membership groups/clusters, which can be derived from one or more network properties, e.g., node degree). Additionally, the <em>igraph_to_networkD3</em> function does not plot the network itself, but only extracts parameters that are later used in the <em>forceNetwork</em> function that plots the network.</p>
<p>So let’s focus on the <em>forceNetwork</em> function instead. This function creates a D3.js force directed network graph from two data frames, one containing information about network nodes and the other one containing information about network edges. In our case, these data frames, denoted as nodeList and edgeList, respectively, contain the following columns (for more details see the code at the end of this post):</p>
<p><strong>nodeList:</strong> “<em>ID</em>“, “<em>nName</em>“, “<em>nodeDegree</em>“, and “<em>nodeBetweenness</em>”<br>
<strong>edgeList:</strong> “<em>SourceID</em>“, “<em>SourceName</em>“, “<em>TargetID</em>“, “<em>TargetName</em>“, “<em>Weight</em>“, and “<em>diceSim</em>”</p>
<p>Given the information about nodes and edges stored in these data frame, we will use the <em>forceNetwork</em> function to create a network in which node size corresponds to the node betweenness value, node color corresponds to node degree, distance between two nodes and edge thickness corresponds to edge weight, and edge color corresponds to the dice similarity. Each node will be described by its name. The <em>forceNetwork</em> function expects edge list to contain pairs of interactions in form of their IDs (starting from zero). Node attributes, stored in the nodeList data frame, are expected to be ordered in the increasing order starting with the first node (ID = 0). Based on this ordering, the <em>forceNetwork</em> function will know which node ID to map to specified node property (in our example, we used node name, “<em>nName</em>“). To use more than a single property, one will have to combine two existing node properties into a new one. Basically, this means that one needs to create a new column in the nodeList data frame, as the <em>forceNetwork</em> function uses column name (string) to specify this property. Node color is defined by the “<em>Group</em>” variable – all nodes assigned to the same group will be colored the same. Hence, if we want all nodes to be colored differently, each node will be assigned to different group (one can use node ID as a group number). In our case, we colored nodes based on their degree (“<em>nodeDegree</em>“) – all nodes with the same degree will be colored the same color. Variable <em>Nodesize</em> is used to define the size of the node. We used “<em>nodeBetweenness</em>” column to define node size. To define node link, we used a JS function to calculate distance between two nodes based on the value of the edge weight. The function uses variables already defined in the <em>forceNetwork</em> function (e.g., Value, or Nodesize), not variables/column names from the node and edge data frame. Thus, if you plan to use JS to perform any type of mathematical operations, selection of variables assign to the function is important (and also limiting factor). To define link color, we will interpolate edge colors based on their dice similarity values, using the “colorRampPalette” function (similar has been done and explained in one of the previous visualization blog posts (<a target="_blank" href="http://www.vesnam.com/Rblog/viznets2/">Network Visualization Part 2</a>):</p>
<p><code>F2 &lt;- colorRampPalette(c(&quot;#FFFF00&quot;, &quot;#FF0000&quot;), bias = nrow(edgeList), space = &quot;rgb&quot;, interpolate = &quot;linear&quot;)</code><br>
<code>colCodes &lt;- F2(length(unique(edgeList$diceSim)))</code><br>
<code>edges_col &lt;- sapply(edgeList$diceSim, function(x) colCodes[which(sort(unique(edgeList$diceSim)) == x)])</code></p>
<p>We can also define node opacity, opacity of node labels when they are inactive (no mouse over their corresponding nodes), and ability to zoom. Finally, the <em>forceNetwork</em> function provides an option to include additional functionalities, as a character string with a JavaScript expression that will be evaluated when there is a click on the node.</p>
<p>While the presented options allow us to create network representation described above, networkD3 package still lacks a number of features full D3.js library has and as such, has possible application limitations. For example, we cannot use different types of nodes (beside circles), edges (directed or undirected) or line styles (dashed, curved, etc)., we cannot assign edge labels or use multiple node labels, there are no filtering or zoom-in-zoom-out options that would accounted for different network structures (node clusters as a high-level visualization vs nodes within clusters as a low-level, in-depth visualization), etc. </p>
<p>Let's go back to our example. Given the above defined node and edge data frames, we can create a D3 object (denoted as D3_network_LM) as follows:</p>
<p><code>D3_network_LM &lt;- networkD3::forceNetwork(Links = edgeList, Nodes = nodeList, Source = &quot;SourceID&quot;, Target = &quot;TargetID&quot;,Value = &quot;Weight&quot;, NodeID = &quot;nName&quot;, Nodesize = &quot;nodeBetweenness&quot;, Group = &quot;nodeDegree&quot;, height = 500, width = 1000, fontSize = 20, linkDistance = networkD3::JS(&quot;function(d) { return 10*d.value; }&quot;), linkWidth = networkD3::JS(&quot;function(d) { return d.value/5; }&quot;),opacity = 0.85, zoom = TRUE, opacityNoHover = 0.1, linkColour = edges_col)</code></p>
<p>To see the network we created, we just need to type its name:</p>
<p><code>D3_network_LM</code></p>
<div class="wp-caption"><a target="_blank" rel="attachment wp-att-445" href="http://www.vesnam.com/Rblog/network-visualization-part-6-d3-from-r-networkd3/d3_1/"><img sizes="(max-width: 300px) 100vw, 300px" alt="D3 network representation" class="wp-image-445" src="https://i1.wp.com/www.vesnam.com/Rblog/wp-content/uploads/2016/10/d3_1-300x187.jpg?resize=300%2C187" data-recalc-dims="1"></a>
<p class="wp-caption-text">D3 network representation</p>
</div>
<p>Since we allowed the <em>zoom</em> option, double click on any node will zoom in the network and allow us to see that node and its neighborhood in more details:</p>
<div class="wp-caption"><a target="_blank" rel="attachment wp-att-446" href="http://www.vesnam.com/Rblog/network-visualization-part-6-d3-from-r-networkd3/d3_2/"><img sizes="(max-width: 300px) 100vw, 300px" alt="D3 network representation - zoomed in" class="wp-image-446" src="https://i1.wp.com/www.vesnam.com/Rblog/wp-content/uploads/2016/10/d3_2-300x180.jpg?resize=300%2C180" data-recalc-dims="1"></a>
<p class="wp-caption-text">D3 network representation - zoomed in</p>
</div>
<p>Alternatively, we can save it as html file:<br>
<code>networkD3::saveNetwork(D3_network_LM, &quot;D3_LM.html&quot;, selfcontained = TRUE)</code></p>
<p>and use it independently from R: <a target="_blank" href="http://www.vesnam.com/Rblog/wp-content/uploads/2016/10/D3_LM.html">click here to see the network exported as html file</a>.</p>
<p>This example demonstrated that it is relatively easy to create a simple but still visually descriptive D3 network visualization from R with the networkD3 package. The simplicity to visualize network with networkD3 may be enough to make one ignore the lack of some features that would be available when working directly with D3, but would require significant time spent in learning D3 and designing a custom network visualization. </p>
<p>Finally, here is the code used to create the network:<br>
<div class="feedlyNoScript">
<pre><code>############################################################################################
############################################################################################
# Plotting networks in R - an example how to plot a network and 
# customize its appearance using networkD3 library
############################################################################################
############################################################################################
# Clear workspace 
# rm(list = ls())
############################################################################################

# Read a data set. 
# Data format: dataframe with 3 variables; variables 1 &amp; 2 correspond to interactions; variable 3 is weight of interaction
edgeList &lt;- read.table(&quot;lesmis.txt&quot;, header = FALSE, sep = &quot;\t&quot;)
colnames(edgeList) &lt;- c(&quot;SourceName&quot;, &quot;TargetName&quot;, &quot;Weight&quot;)

# Create a graph. Use simplyfy to ensure that there are no duplicated edges or self loops
gD &lt;- igraph::simplify(igraph::graph.data.frame(edgeList, directed=FALSE))

# Create a node list object (actually a data frame object) that will contain information about nodes
nodeList &lt;- data.frame(ID = c(0:(igraph::vcount(gD) - 1)), # because networkD3 library requires IDs to start at 0
                       nName = igraph::V(gD)$name)

# Map node names from the edge list to node IDs
getNodeID &lt;- function(x){
  which(x == igraph::V(gD)$name) - 1 # to ensure that IDs start at 0
}
# And add them to the edge list
edgeList &lt;- plyr::ddply(edgeList, .variables = c(&quot;SourceName&quot;, &quot;TargetName&quot;, &quot;Weight&quot;), 
                        function (x) data.frame(SourceID = getNodeID(x$SourceName), 
                                                TargetID = getNodeID(x$TargetName)))

############################################################################################
# Calculate some node properties and node similarities that will be used to illustrate 
# different plotting abilities and add them to the edge and node lists

# Calculate degree for all nodes
nodeList &lt;- cbind(nodeList, nodeDegree=igraph::degree(gD, v = igraph::V(gD), mode = &quot;all&quot;))

# Calculate betweenness for all nodes
betAll &lt;- igraph::betweenness(gD, v = igraph::V(gD), directed = FALSE) / (((igraph::vcount(gD) - 1) * (igraph::vcount(gD)-2)) / 2)
betAll.norm &lt;- (betAll - min(betAll))/(max(betAll) - min(betAll))
nodeList &lt;- cbind(nodeList, nodeBetweenness=100*betAll.norm) # We are scaling the value by multiplying it by 100 for visualization purposes only (to create larger nodes)
rm(betAll, betAll.norm)

#Calculate Dice similarities between all pairs of nodes
dsAll &lt;- igraph::similarity.dice(gD, vids = igraph::V(gD), mode = &quot;all&quot;)

F1 &lt;- function(x) {data.frame(diceSim = dsAll[x$SourceID +1, x$TargetID + 1])}
edgeList &lt;- plyr::ddply(edgeList, .variables=c(&quot;SourceName&quot;, &quot;TargetName&quot;, &quot;Weight&quot;, &quot;SourceID&quot;, &quot;TargetID&quot;), 
                           function(x) data.frame(F1(x)))

rm(dsAll, F1, getNodeID, gD)

############################################################################################
# We will also create a set of colors for each edge, based on their dice similarity values
# We'll interpolate edge colors based on the using the &quot;colorRampPalette&quot; function, that 
# returns a function corresponding to a collor palete of &quot;bias&quot; number of elements (in our case, that
# will be a total number of edges, i.e., number of rows in the edgeList data frame)
F2 &lt;- colorRampPalette(c(&quot;#FFFF00&quot;, &quot;#FF0000&quot;), bias = nrow(edgeList), space = &quot;rgb&quot;, interpolate = &quot;linear&quot;)
colCodes &lt;- F2(length(unique(edgeList$diceSim)))
edges_col &lt;- sapply(edgeList$diceSim, function(x) colCodes[which(sort(unique(edgeList$diceSim)) == x)])

rm(colCodes, F2)
############################################################################################
# Let's create a network

D3_network_LM &lt;- networkD3::forceNetwork(Links = edgeList, # data frame that contains info about edges
                        Nodes = nodeList, # data frame that contains info about nodes
                        Source = &quot;SourceID&quot;, # ID of source node 
                        Target = &quot;TargetID&quot;, # ID of target node
                        Value = &quot;Weight&quot;, # value from the edge list (data frame) that will be used to value/weight relationship amongst nodes
                        NodeID = &quot;nName&quot;, # value from the node list (data frame) that contains node description we want to use (e.g., node name)
                        Nodesize = &quot;nodeBetweenness&quot;,  # value from the node list (data frame) that contains value we want to use for a node size
                        Group = &quot;nodeDegree&quot;,  # value from the node list (data frame) that contains value we want to use for node color
                        height = 500, # Size of the plot (vertical)
                        width = 1000,  # Size of the plot (horizontal)
                        fontSize = 20, # Font size
                        linkDistance = networkD3::JS(&quot;function(d) { return 10*d.value; }&quot;), # Function to determine distance between any two nodes, uses variables already defined in forceNetwork function (not variables from a data frame)
                        linkWidth = networkD3::JS(&quot;function(d) { return d.value/5; }&quot;),# Function to determine link/edge thickness, uses variables already defined in forceNetwork function (not variables from a data frame)
                        opacity = 0.85, # opacity
                        zoom = TRUE, # ability to zoom when click on the node
                        opacityNoHover = 0.1, # opacity of labels when static
                        linkColour = edges_col) # edge colors

# Plot network
D3_network_LM 
         
# Save network as html file
networkD3::saveNetwork(D3_network_LM, &quot;D3_LM.html&quot;, selfcontained = TRUE)

################################################################################
# sessionInfo()
#
# R version 3.3.1 (2016-06-21)
# Platform: x86_64-redhat-linux-gnu (64-bit)
# Running under: Fedora 24 (Workstation Edition)
# 
# locale:
#   [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C               LC_TIME=en_US.UTF-8       
# [4] LC_COLLATE=en_US.UTF-8     LC_MONETARY=en_US.UTF-8    LC_MESSAGES=en_US.UTF-8   
# [7] LC_PAPER=en_US.UTF-8       LC_NAME=C                  LC_ADDRESS=C              
# [10] LC_TELEPHONE=C             LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C       
# 
# attached base packages:
#   [1] stats     graphics  grDevices utils     datasets  methods   base     
# 
# loaded via a namespace (and not attached):
#   [1] htmlwidgets_0.7  plyr_1.8.4       magrittr_1.5     htmltools_0.3.5  tools_3.3.1      igraph_1.0.1    
# [7] yaml_2.1.13      Rcpp_0.12.7      jsonlite_1.1     digest_0.6.10    networkD3_0.2.13
# 
################################################################################
</code></pre>
<p></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/network-visualization-part-6-d3-and-r-networkd3/"></div></div><div><a data-url="https://www.r-bloggers.com/network-visualization-part-6-d3-and-r-networkd3/" data-counturl="https://www.r-bloggers.com/network-visualization-part-6-d3-and-r-networkd3/" data-count="vertical" data-text="Network visualization – part 6: D3 and R (networkD3)" 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="http://www.vesnam.com/Rblog/viznets6/"> Fun with R</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/enCUvMVBRaA"></a></div></div>