-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (131 loc) · 13.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>An R package for interactive force-directed layouts within RStudio • easylayout</title>
<script src="deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="deps/bootstrap-5.3.1/bootstrap.min.css" rel="stylesheet">
<script src="deps/bootstrap-5.3.1/bootstrap.bundle.min.js"></script><link href="deps/font-awesome-6.5.2/css/all.min.css" rel="stylesheet">
<link href="deps/font-awesome-6.5.2/css/v4-shims.min.css" rel="stylesheet">
<script src="deps/headroom-0.11.0/headroom.min.js"></script><script src="deps/headroom-0.11.0/jQuery.headroom.min.js"></script><script src="deps/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script><script src="deps/clipboard.js-2.0.11/clipboard.min.js"></script><script src="deps/search-1.0.0/autocomplete.jquery.min.js"></script><script src="deps/search-1.0.0/fuse.min.js"></script><script src="deps/search-1.0.0/mark.min.js"></script><!-- pkgdown --><script src="pkgdown.js"></script><meta property="og:title" content="An R package for interactive force-directed layouts within RStudio">
<meta name="description" content="easylayout is an R package that seamlessly bridges manipulation and visualization by leveraging the user’s IDE itself (e.g., RStudio, VSCode).">
<meta property="og:description" content="easylayout is an R package that seamlessly bridges manipulation and visualization by leveraging the user’s IDE itself (e.g., RStudio, VSCode).">
</head>
<body>
<a href="#main" class="visually-hidden-focusable">Skip to contents</a>
<nav class="navbar navbar-expand-lg fixed-top bg-light" data-bs-theme="light" aria-label="Site navigation"><div class="container">
<a class="navbar-brand me-2" href="index.html">easylayout</a>
<small class="nav-text text-muted me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="">0.0.0.9000</small>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse ms-3">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="reference/index.html">Reference</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><form class="form-inline" role="search">
<input class="form-control" type="search" name="search-input" id="search-input" autocomplete="off" aria-label="Search site" placeholder="Search for" data-search-index="search.json">
</form></li>
<li class="nav-item"><a class="external-link nav-link" href="https://github.com/dalmolingroup/easylayout/" aria-label="GitHub"><span class="fa fab fa-github fa-lg"></span></a></li>
</ul>
</div>
</div>
</nav><div class="container template-home">
<div class="row">
<main id="main" class="col-md-9"><div class="section level1">
<div class="page-header"><h1 id="easylayout-an-r-package-for-interactive-force-directed-layouts-within-rstudio-">easylayout: an R package for interactive force-directed layouts within RStudio <img src="https://github.com/user-attachments/assets/87ce78cf-53cc-4c07-8238-b138d62a4ca6" height="140" align="right" style="padding-left:10px;"><a class="anchor" aria-label="anchor" href="#easylayout-an-r-package-for-interactive-force-directed-layouts-within-rstudio-"></a>
</h1></div>
<!-- badges: start -->
<p>easylayout is an R package that leverages interactive force simulations within the IDE itself (e.g., RStudio, VSCode). It is <strong>not</strong> yet another visualization library, but instead aims to interconnect existing libraries and streamline their usage into the R ecosystem.</p>
<p><img src="https://github.com/user-attachments/assets/1b91cb11-77ef-47a5-b529-3805a9785a76"></p>
<p>easylayout takes an igraph object and serializes it into a web application integrated with the IDE’s interface through a Shiny server. The web application lays out the network by simulating attraction and repulsion forces. Simulation parameters can be adjusted in real-time. An editing mode allows moving and rotating nodes. The implementation aims for performance, so that even lower-end devices are able to work with relatively large networks. Once the user finishes tinkering the layout, it is sent back to the R session to be plotted through popular libraries like ggplot2 or even the base package itself.</p>
<div class="section level2">
<h2 id="installation">Installation<a class="anchor" aria-label="anchor" href="#installation"></a>
</h2>
<p>You can install the development version of easylayout from <a href="https://github.com/" class="external-link">GitHub</a> with:</p>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="co"># install.packages("devtools")</span></span>
<span><span class="fu">devtools</span><span class="fu">::</span><span class="fu">install_github</span><span class="op">(</span><span class="st">"dalmolingroup/easylayout"</span><span class="op">)</span></span></code></pre></div>
</div>
<div class="section level2">
<h2 id="example">Example<a class="anchor" aria-label="anchor" href="#example"></a>
</h2>
<p>This is a basic example which shows you how to solve a common problem:</p>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://dalmolingroup.github.io/easylayout/">easylayout</a></span><span class="op">)</span></span>
<span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://r.igraph.org/" class="external-link">igraph</a></span><span class="op">)</span></span>
<span></span>
<span><span class="va">g</span> <span class="op"><-</span> <span class="fu">igraph</span><span class="fu">::</span><span class="fu"><a href="https://r.igraph.org/reference/erdos.renyi.game.html" class="external-link">erdos.renyi.game</a></span><span class="op">(</span>n <span class="op">=</span> <span class="fl">5000</span>, p.or.m <span class="op">=</span> <span class="fl">10000</span>, type <span class="op">=</span> <span class="st">"gnm"</span><span class="op">)</span></span>
<span></span>
<span><span class="va">number_of_vertices</span> <span class="op"><-</span> <span class="fu">igraph</span><span class="fu">::</span><span class="fu"><a href="https://r.igraph.org/reference/gorder.html" class="external-link">vcount</a></span><span class="op">(</span><span class="va">g</span><span class="op">)</span></span>
<span></span>
<span><span class="fu">igraph</span><span class="fu">::</span><span class="fu"><a href="https://r.igraph.org/reference/V.html" class="external-link">V</a></span><span class="op">(</span><span class="va">g</span><span class="op">)</span><span class="op">$</span><span class="va">label</span> <span class="op"><-</span> <span class="cn">NA</span></span>
<span><span class="fu">igraph</span><span class="fu">::</span><span class="fu"><a href="https://r.igraph.org/reference/V.html" class="external-link">V</a></span><span class="op">(</span><span class="va">g</span><span class="op">)</span><span class="op">$</span><span class="va">size</span> <span class="op"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/sample.html" class="external-link">sample</a></span><span class="op">(</span><span class="fl">1</span><span class="op">:</span><span class="fl">5</span>, <span class="va">number_of_vertices</span>, replace <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span></span>
<span><span class="fu">igraph</span><span class="fu">::</span><span class="fu"><a href="https://r.igraph.org/reference/V.html" class="external-link">V</a></span><span class="op">(</span><span class="va">g</span><span class="op">)</span><span class="op">$</span><span class="va">color</span> <span class="op"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/sample.html" class="external-link">sample</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/grDevices/palettes.html" class="external-link">rainbow</a></span><span class="op">(</span><span class="fl">5</span><span class="op">)</span>, <span class="va">number_of_vertices</span>, replace <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span></span>
<span></span>
<span><span class="fu"><a href="https://rdrr.io/r/graphics/plot.default.html" class="external-link">plot</a></span><span class="op">(</span><span class="va">g</span>, layout <span class="op">=</span> <span class="va">easylayout</span>, vertex.label <span class="op">=</span> <span class="cn">NA</span>, margin <span class="op">=</span> <span class="fl">0</span><span class="op">)</span></span></code></pre></div>
<p>You can also run easylayout as a standalone function, attributing its output to a variable in your R environment. The output is just a 2-column matrix:</p>
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">layout</span> <span class="op"><-</span> <span class="fu"><a href="reference/easylayout.html">easylayout</a></span><span class="op">(</span><span class="va">g</span><span class="op">)</span></span></code></pre></div>
<p>Once you store the final coordinates to a variable, use any plotting package to display the network. In the example below, we plot the network using ggraph.</p>
<div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="fu">ggraph</span><span class="fu">::</span><span class="fu">ggraph</span><span class="op">(</span><span class="va">g</span>, layout <span class="op">=</span> <span class="va">layout</span><span class="op">)</span> <span class="op">+</span></span>
<span> <span class="fu">ggraph</span><span class="fu">::</span><span class="fu">geom_edge_link</span><span class="op">(</span><span class="op">)</span> <span class="op">+</span></span>
<span> <span class="fu">ggraph</span><span class="fu">::</span><span class="fu">geom_node_point</span><span class="op">(</span><span class="fu">aes</span><span class="op">(</span>color <span class="op">=</span> <span class="va">color</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span> </span>
<span> <span class="fu">ggplot2</span><span class="fu">::</span><span class="fu">coord_fixed</span><span class="op">(</span><span class="op">)</span> <span class="op">+</span></span>
<span> <span class="fu">ggplot2</span><span class="fu">::</span><span class="fu">theme_void</span><span class="op">(</span><span class="op">)</span></span></code></pre></div>
</div>
<div class="section level2">
<h2 id="future-work">Future work<a class="anchor" aria-label="anchor" href="#future-work"></a>
</h2>
<p>The current implementation focuses on the R ecosystem, but using web technologies makes it easily portable to similar environments, like Jupyter Notebooks. We expect this tool to reduce the time spent tweaking network layouts, allowing researches to generate more compelling figures.</p>
</div>
</div>
</main><aside class="col-md-3"><div class="links">
<h2 data-toc-skip>Links</h2>
<ul class="list-unstyled">
<li><a href="https://github.com/dalmolingroup/easylayout/" class="external-link">Browse source code</a></li>
<li><a href="https://github.com/dalmolingroup/easylayout/issues" class="external-link">Report a bug</a></li>
</ul>
</div>
<div class="license">
<h2 data-toc-skip>License</h2>
<ul class="list-unstyled">
<li><a href="LICENSE.html">Full license</a></li>
<li><small><a href="https://opensource.org/licenses/mit-license.php" class="external-link">MIT</a> + file <a href="LICENSE-text.html">LICENSE</a></small></li>
</ul>
</div>
<div class="citation">
<h2 data-toc-skip>Citation</h2>
<ul class="list-unstyled">
<li><a href="authors.html#citation">Citing easylayout</a></li>
</ul>
</div>
<div class="developers">
<h2 data-toc-skip>Developers</h2>
<ul class="list-unstyled">
<li>Danilo Imparato <br><small class="roles"> Author, maintainer </small> <a href="https://orcid.org/0000-0001-6979-4951" target="orcid.widget" aria-label="ORCID" class="external-link"><span class="fab fa-orcid orcid" aria-hidden="true"></span></a> </li>
</ul>
</div>
<div class="dev-status">
<h2 data-toc-skip>Dev status</h2>
<ul class="list-unstyled">
<li><a href="https://github.com/dalmolingroup/easylayout/actions/workflows/R-CMD-check.yaml" class="external-link"><img src="https://github.com/dalmolingroup/easylayout/actions/workflows/R-CMD-check.yaml/badge.svg" alt="R-CMD-check"></a></li>
</ul>
</div>
</aside>
</div>
<footer><div class="pkgdown-footer-left">
<p>Developed by Danilo Imparato.</p>
</div>
<div class="pkgdown-footer-right">
<p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.1.1.</p>
</div>
</footer>
</div>
</body>
</html>