1. Interactive visualizations
Beyond some of the alternative packages for plotting that are native to R, we can use R to create javascript plots that are interactive and can easily be exported to html or integrated with shiny dashboards. Again there are multiple ways this can be done, but we'll look at two. The first uses ggiraph to create html widgets out of ggplot2 objects. The other package we'll use is networkD3, which converts igraph objects into D3-dot-js network plots.
2. Generating some data
Let's first create a simple random graph to plot. We'll add a centrality attribute that will be our tool tip for the interactive plot.
3. Interactive plots with ggiraph
First we'll make our plot using ggnetwork, and specify vertex size. Next we convert that ggplot2 object to something that can be plotted by ggiraph. To do that we'll use the geom_point_interactive function to specify that we want to interact with the vertices. Finally to display it we call ggiraph, and set the code argument to the ggplot2 object.
4. ggiraph interactive plot
Now when we move the pointer over the vertex, the centrality is displayed.
5. ggiraph customization
ggiraph allows lots of customizations via injecting custom css and parameters in ggiraph function calls. In some cases we can specify things like tooltip offset within the ggiraph function. However we can also include as much customization as we want in tooltips and hovering behavior by adding custom css. In this case we add a `data_id` to use the custom CSS within the `geom_point_interactive()` function that is the same as the tooltip. Next we include some custom css that specifies behavior on mouse over. In this case changing the color of the vertex, and size of the vertex.
6. ggiraph customization
Now when we move the pointer over the vertex, the centrality is displayed like before. But now the point zooms to size 5, and changes to red. You can inject as much or as little valid CSS into ggiraph as you want.
7. Plotting with networkD3
The networkD3 package is great because it allows you to create network D3-dot-js plots all in javascript from R. However that ease of use means there's not a lot of customization options without directly editing the source javascript which is beyond the scope of this lesson. To get started all we'll do is convert our random graph using the igraph_to_networkD3 function, and then plot the links using the simpleNetwork function. We just plot the links attribute because that has all the edges to be drawn.
8. More complex networkD3
To make a more complex plot we need directly add some of the properties to the nodes attribute of the networkD3 object. We do this by adding columns to the node data frame, nd3, in this case group for community membership and then cent for centrality. These will be the size and color in our next graph, just like we've done all lesson. Finally all we do is plot the graph using the forceNetwork() function. But now we've got to specify everything we want to plot. Links and nodes, and then the source and target for drawing the lines. We give it a nodeID which is the name of the vertex, Group is the community membership and nodesize is centrality. Lastly we add a legend and a font size for the pop-up text.
9. More complex networkD3
The resulting HTML widget will highlight a vertex and connected vertices when you mouse over it, and color each vertex by community membership.
10. Let's practice!
We've covered just a couple of the options you have for creating interactive plots of graphs, now let's try it using some of the data sets we've already worked with.