Skip to content

Commit 37092bd

Browse files
bthieurmelbthieurmel
committed
pres
1 parent 1ee2174 commit 37092bd

11 files changed

+848
-0
lines changed

‎visNetwork/pres/images/R.jpg

54.2 KB
Loading

‎visNetwork/pres/images/bandeau_colloque_R_Grenoble_2018.jpg

226 KB
Loading

‎visNetwork/pres/images/data_medium.png

11.4 KB
Loading

‎visNetwork/pres/presentation.Rmd

+197
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
---
2+
output:
3+
slidy_presentation:
4+
highlight: haddock
5+
duration: 15
6+
footer: "Quatrièmes Rencontres R - visNetwork - [email protected]"
7+
---
8+
9+
10+
<div style="text-align:center" markdown="1">
11+
<br><br><br><br><br><br>
12+
<h1>visNetwork, an R package for network visualization</h1>
13+
<h2>Quatrièmes Rencontres R</h2>
14+
<h3>B.Thieurmel - [email protected]</h3>
15+
<h3>26/06/2015</h3>
16+
<img src="images/R.jpg" alt="Drawing" style="width: 200px;"/>
17+
<img src="images/data_medium.png" alt="Drawing" style="width: 400px;"/>
18+
19+
20+
</div>
21+
22+
## Introduction
23+
24+
More and more visualization tools are available with R :
25+
26+
* growing use of Javascript libraries in packages since a few years ([rCharts](http://rcharts.io/), [googleVis](http://cran.r-project.org/web/packages/googleVis/vignettes/googleVis_examples.html), ...)
27+
* amazing [shiny and shiny server](http://shiny.rstudio.com/) tools
28+
* [htmlwidgets](http://www.htmlwidgets.org/), a new 'best-seller' R package for JavaScript data visualization in the next years ?
29+
+ facilitate JavaScript visualization libraries integration
30+
+ use in R console, or with RStudio viewer
31+
+ embed widgets in R Markdown documents and Shiny web applications
32+
+ and save in .html file
33+
+ already a lot of children !
34+
+ [leaflet](http://rstudio.github.io/leaflet/) : creating dynamic maps
35+
+ [dygraphs](http://rstudio.github.io/dygraphs/) : time-series
36+
+ [DT](http://rstudio.github.io/DT/) : interactive HTML tables
37+
+ [threejs](https://github.com/bwlewis/rthreejs/) : 3D scatterplot and 3D globe
38+
+ [rpivotTable](https://github.com/smartinsightsfromdata/rpivotTable) : data exploration, drag'n'drop functionality
39+
+ [networkD3](http://christophergandrud.github.io/networkD3/) : network and sankey diagrams using D3.js
40+
+ [sparkline](https://github.com/htmlwidgets/sparkline) : jquery sparkline
41+
+ ...
42+
43+
## visNetwork
44+
45+
**visNetwork** is a R package for network visualization, using [vis.js](http://visjs.org/) javascript library
46+
47+
* easy to use
48+
* custom shapes, styles, colors, sizes, ...
49+
* works smooth on any modern browser for up to a few thousand nodes and edges
50+
* clustering support foo handle a larger amount of nodes
51+
* interactivity controls (zoom, physics, movement of nodes, tooltip)
52+
53+
<br>
54+
Based on [htmlwidgets](http://www.htmlwidgets.org/), so :
55+
56+
* compatible with [shiny ](http://shiny.rstudio.com/), R Markdown documents, RStudio viewer, R
57+
58+
<br>
59+
Actually only available on [DataKnowledge github](https://github.com/DataKnowledge)
60+
61+
```{r, eval = FALSE}
62+
# for install visNetwork
63+
devtools::install_github("dataknowledge/visNetwork")
64+
```
65+
66+
67+
```{r, echo = FALSE, message = FALSE}
68+
require(visNetwork, quietly = TRUE)
69+
```
70+
71+
## Minimal example
72+
73+
**visNetwork** needs at least two informations :
74+
75+
* a __nodes__ data.frame, with __id__ column
76+
* a __edges__ data.frame, with __from__ and __to__ columns
77+
78+
```{r}
79+
nodes <- data.frame(id = 1:3)
80+
edges <- data.frame(from = c(1,2), to = c(1,3))
81+
visNetwork(nodes = nodes, edges = edges, width = "1000px", height = "300px")
82+
83+
visNetwork(nodes = nodes, edges = edges)
84+
85+
visNetwork(nodes = nodes, edges = edges, width = "1000px", height = "300px")
86+
```
87+
88+
## Simple individual nodes and edges customization
89+
90+
* Adding more variables on nodes and edges data.frames
91+
<br><br>
92+
```{r}
93+
nodes <- data.frame(id = 1:4,
94+
label = paste("Node", 1:4), # add labels on nodes
95+
group = c("GrA", "GrB"), # control groups on nodes (adding a color per group)
96+
value = 1:4, # control size adding value
97+
shape = c("square", "triangle", "box", "circle"), # control shape of nodes
98+
title = paste0("<p>", 1:4,"<br>Node Tooltip !</p>")) # add tooltip information (html)
99+
100+
edges <- data.frame(from = c(1,1,2,3),
101+
to = c(2,3,4,2),
102+
color = c("purple", "green"), # add color of edges
103+
style = c("line", "arrow",
104+
"arrow-center", "dash-line"), # control line style
105+
label = paste("Edge", 1:4), # add labels on nodes
106+
title = paste0("Edge Tooltip ", 1:4)) # add tooltip information (character)
107+
```
108+
<br>
109+
110+
* Numerous additional options are available(label alignment, opacity, font and border style, size control, ...)
111+
112+
----
113+
114+
```{r, echo = FALSE}
115+
visNetwork(nodes, edges, width = "1000px", height = "600px")
116+
```
117+
118+
## Global nodes/edges configuration
119+
120+
* Set global options for nodes and edges using _visNodes_ and _visEdges_, and use options per group using _visGroups_.
121+
<br>
122+
```{r}
123+
nodes <- data.frame(id = 1:5, group = c(rep("A", 2), rep("B", 3)))
124+
edges <- data.frame(from = c(2,5,3,3), to = c(1,2,4,2))
125+
126+
visNetwork(nodes, edges, width = "100%", height = "300px") %>%
127+
visNodes(shape = "square") %>%
128+
visEdges(arrow ="from") %>%
129+
visGroups(groupname = "A", color = "darkblue") %>%
130+
visGroups(groupname = "B", color = "red")
131+
```
132+
133+
## Options
134+
A lot of configuration options are available in *visOptions* :
135+
136+
```{r, echo=FALSE}
137+
nb <- 10
138+
nodes <- data.frame(id = 1:nb, label = paste("Label", 1:nb),
139+
group = sample(LETTERS[1:3], nb, replace = TRUE), value = 1:nb,
140+
title = paste0("<p>", 1:nb,"<br>Tooltip !</p>"), stringsAsFactors = FALSE)
141+
142+
edges <- data.frame(from = trunc(runif(nb)*(nb-1))+1,
143+
to = trunc(runif(nb)*(nb-1))+1,
144+
value = rnorm(nb, 10), label = paste("Edge", 1:nb),
145+
title = paste0("<p>", 1:nb,"<br>Edge Tooltip !</p>"))
146+
```
147+
148+
* Highlight nearest nodes and edges clicking on a node
149+
150+
```{r, eval = FALSE}
151+
visNetwork(nodes, edges) %>% visOptions(highlightNearest = TRUE)
152+
```
153+
154+
```{r, echo = FALSE}
155+
visNetwork(nodes, edges, width = "100%", height = "450px") %>% visOptions(highlightNearest = TRUE) %>%
156+
visPhysics(stabilization = list(iterations = 2000))
157+
```
158+
159+
----
160+
161+
* Add legend on groups
162+
```{r, eval = FALSE}
163+
visNetwork(nodes, edges, width = "100%", legend = TRUE)
164+
```
165+
166+
```{r, echo = FALSE}
167+
visNetwork(nodes, edges, width = "100%", legend = TRUE, height = "575px") %>%
168+
visPhysics(stabilization = list(iterations = 2000))
169+
```
170+
171+
----
172+
173+
* Select by node id
174+
```{r, eval = FALSE}
175+
visNetwork(nodes, edges, width = "100%") %>% visOptions(highlightNearest = TRUE, nodesIdSelection = TRUE)
176+
```
177+
178+
```{r, echo = FALSE}
179+
visNetwork(nodes, edges, width = "100%", height = "575px") %>% visOptions( highlightNearest = TRUE, nodesIdSelection = TRUE) %>%
180+
visPhysics(stabilization = list(iterations = 2000))
181+
```
182+
183+
184+
----
185+
186+
* Data Manipulation
187+
188+
```{r, eval = FALSE}
189+
visNetwork(nodes, edges, width = "100%") %>% visOptions(dataManipulation = TRUE)
190+
```
191+
192+
```{r, echo = FALSE}
193+
visNetwork(nodes, edges, width = "100%", height = "575px") %>% visOptions(manipulation = TRUE) %>%
194+
visPhysics(stabilization = list(iterations = 2000))
195+
```
196+
197+

‎visNetwork/pres/presentation.html

+210
Large diffs are not rendered by default.

‎visNetwork/pres/temp.R

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
You can add informations and customize network simply using more variables on nodes and edges data.frames. For example :
2+
3+
4+
* both nodes and edges variables
5+
+ __label__ : add labels
6+
+ __value__ : control size
7+
+ __title__ : add tooltip
8+
+ __color__ : color
9+
+ ...
10+
11+
* On nodes only
12+
+ __group__ : Add configurabled groups
13+
+ __shape__ : Shape of nodes
14+
+ __x__ and/or __y__ : position
15+
+ ...
16+
17+
* On edges only
18+
+ __style__ : line style for the edge
19+
+ ...

‎visNetwork/pres/templates/default.dzslides

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<meta charset="utf-8">
4+
$for(author-meta)$
5+
<meta name="author" content="$author-meta$" />
6+
$endfor$
7+
$if(date-meta)$
8+
<meta name="dcterms.date" content="$date-meta$" />
9+
$endif$
10+
<title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
11+
<style type="text/css">code{white-space: pre;}</style>
12+
$if(highlighting-css)$
13+
<style type="text/css">
14+
$highlighting-css$
15+
</style>
16+
$endif$
17+
$if(css)$
18+
$for(css)$
19+
<link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/>
20+
$endfor$
21+
$else$
22+
<style>
23+
html { background-color: black; }
24+
body { background-color: white; border-radius: 12px}
25+
/* A section is a slide. It's size is 800x600, and this will never change */
26+
section {
27+
font-family: Arial, serif;
28+
font-size: 20pt;
29+
}
30+
address, blockquote, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, ol, p, pre, table, ul, dl { padding: 10px 20px 10px 20px; }
31+
h1, h2, h3 {
32+
text-align: center;
33+
margin: 10pt 10pt 20pt 10pt;
34+
}
35+
ul, ol {
36+
margin: 10px 10px 10px 50px;
37+
}
38+
section.titleslide h1 { margin-top: 200px; }
39+
h1.title { margin-top: 150px; }
40+
h1 { font-size: 180%; }
41+
h2 { font-size: 120%; }
42+
h3 { font-size: 100%; }
43+
q { quotes: "“" "”" "‘" "’"; }
44+
blockquote { font-style: italic }
45+
/* Figures are displayed full-page, with the caption on
46+
top of the image/video */
47+
figure {
48+
background-color: black;
49+
}
50+
figcaption {
51+
margin: 70px;
52+
}
53+
footer {
54+
position: absolute;
55+
bottom: 0;
56+
width: 100%;
57+
padding: 40px;
58+
text-align: right;
59+
background-color: #F3F4F8;
60+
border-top: 1px solid #CCC;
61+
}
62+
63+
/* Transition effect */
64+
/* Feel free to change the transition effect for original
65+
animations. See here:
66+
https://developer.mozilla.org/en/CSS/CSS_transitions
67+
How to use CSS3 Transitions: */
68+
section {
69+
-moz-transition: left 400ms linear 0s;
70+
-webkit-transition: left 400ms linear 0s;
71+
-ms-transition: left 400ms linear 0s;
72+
transition: left 400ms linear 0s;
73+
}
74+
75+
/* Before */
76+
section { left: -150%; }
77+
/* Now */
78+
section[aria-selected] { left: 0; }
79+
/* After */
80+
section[aria-selected] ~ section { left: +150%; }
81+
82+
/* Incremental elements */
83+
84+
/* By default, visible */
85+
.incremental > * { opacity: 1; }
86+
87+
/* The current item */
88+
.incremental > *[aria-selected] { color: red; opacity: 1; }
89+
90+
/* The items to-be-selected */
91+
.incremental > *[aria-selected] ~ * { opacity: 0.2; }
92+
</style>
93+
$endif$
94+
$if(math)$
95+
$math$
96+
$endif$
97+
$for(header-includes)$
98+
$header-includes$
99+
$endfor$
100+
</head>
101+
<body>
102+
$if(title)$
103+
<section class="title">
104+
<h1 class="title">$title$</h1>
105+
$if(subtitle)$
106+
<h1 class="subtitle">$subtitle$</h1>
107+
$endif$
108+
$for(author)$
109+
<h2 class="author">$author$</h2>
110+
$endfor$
111+
<h3 class="date">$date$</h3>
112+
</section>
113+
$endif$
114+
$for(include-before)$
115+
$include-before$
116+
$endfor$
117+
$body$
118+
$for(include-after)$
119+
$include-after$
120+
$endfor$
121+
$dzslides-core$
122+
</body>
123+
</html>

0 commit comments

Comments
 (0)