Log In Sign Up
Models:
Alyssa Salazar
AlyssaS/
VoltRon
0
Downloads: 1
Diff of /docs/interactive.html [000000] .. [413088]

Switch to unified view

a b/docs/interactive.html 

  1
  
<!DOCTYPE html>





  
  

  2
  





  
  

  3
  
<html>





  
  

  4
  





  
  

  5
  
<head>





  
  

  6
  





  
  

  7
  
<meta charset="utf-8" />





  
  

  8
  
<meta name="generator" content="pandoc" />





  
  

  9
  
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />





  
  

  10
  





  
  

  11
  





  
  

  12
  





  
  

  13
  





  
  

  14
  
<title>Interactive</title>





  
  

  15
  





  
  

  16
  
<script src="site_libs/header-attrs-2.29/header-attrs.js"></script>





  
  

  17
  
<script src="site_libs/jquery-3.6.0/jquery-3.6.0.min.js"></script>





  
  

  18
  
<meta name="viewport" content="width=device-width, initial-scale=1" />





  
  

  19
  
<link href="site_libs/bootstrap-3.3.5/css/flatly.min.css" rel="stylesheet" />





  
  

  20
  
<script src="site_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>





  
  

  21
  
<script src="site_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>





  
  

  22
  
<script src="site_libs/bootstrap-3.3.5/shim/respond.min.js"></script>





  
  

  23
  
<style>h1 {font-size: 34px;}





  
  

  24
  
       h1.title {font-size: 38px;}





  
  

  25
  
       h2 {font-size: 30px;}





  
  

  26
  
       h3 {font-size: 24px;}





  
  

  27
  
       h4 {font-size: 18px;}





  
  

  28
  
       h5 {font-size: 16px;}





  
  

  29
  
       h6 {font-size: 12px;}





  
  

  30
  
       code {color: inherit; background-color: rgba(0, 0, 0, 0.04);}





  
  

  31
  
       pre:not([class]) { background-color: white }</style>





  
  

  32
  
<script src="site_libs/jqueryui-1.13.2/jquery-ui.min.js"></script>





  
  

  33
  
<link href="site_libs/tocify-1.9.1/jquery.tocify.css" rel="stylesheet" />





  
  

  34
  
<script src="site_libs/tocify-1.9.1/jquery.tocify.js"></script>





  
  

  35
  
<script src="site_libs/navigation-1.1/tabsets.js"></script>





  
  

  36
  
<link href="site_libs/highlightjs-9.12.0/textmate.css" rel="stylesheet" />





  
  

  37
  
<script src="site_libs/highlightjs-9.12.0/highlight.js"></script>





  
  

  38
  
<link href="site_libs/font-awesome-6.5.2/css/all.min.css" rel="stylesheet" />





  
  

  39
  
<link href="site_libs/font-awesome-6.5.2/css/v4-shims.min.css" rel="stylesheet" />





  
  

  40
  





  
  

  41
  
<style type="text/css">





  
  

  42
  
  code{white-space: pre-wrap;}





  
  

  43
  
  span.smallcaps{font-variant: small-caps;}





  
  

  44
  
  span.underline{text-decoration: underline;}





  
  

  45
  
  div.column{display: inline-block; vertical-align: top; width: 50%;}





  
  

  46
  
  div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}





  
  

  47
  
  ul.task-list{list-style: none;}





  
  

  48
  
    </style>





  
  

  49
  





  
  

  50
  
<style type="text/css">code{white-space: pre;}</style>





  
  

  51
  
<script type="text/javascript">





  
  

  52
  
if (window.hljs) {





  
  

  53
  
  hljs.configure({languages: []});





  
  

  54
  
  hljs.initHighlightingOnLoad();





  
  

  55
  
  if (document.readyState && document.readyState === "complete") {





  
  

  56
  
    window.setTimeout(function() { hljs.initHighlighting(); }, 0);





  
  

  57
  
  }





  
  

  58
  
}





  
  

  59
  
</script>





  
  

  60
  





  
  

  61
  





  
  

  62
  





  
  

  63
  





  
  

  64
  





  
  

  65
  





  
  

  66
  





  
  

  67
  





  
  

  68
  





  
  

  69
  
<style type = "text/css">





  
  

  70
  
.main-container {





  
  

  71
  
  max-width: 940px;





  
  

  72
  
  margin-left: auto;





  
  

  73
  
  margin-right: auto;





  
  

  74
  
}





  
  

  75
  
img {





  
  

  76
  
  max-width:100%;





  
  

  77
  
}





  
  

  78
  
.tabbed-pane {





  
  

  79
  
  padding-top: 12px;





  
  

  80
  
}





  
  

  81
  
.html-widget {





  
  

  82
  
  margin-bottom: 20px;





  
  

  83
  
}





  
  

  84
  
button.code-folding-btn:focus {





  
  

  85
  
  outline: none;





  
  

  86
  
}





  
  

  87
  
summary {





  
  

  88
  
  display: list-item;





  
  

  89
  
}





  
  

  90
  
details > summary > p:only-child {





  
  

  91
  
  display: inline;





  
  

  92
  
}





  
  

  93
  
pre code {





  
  

  94
  
  padding: 0;





  
  

  95
  
}





  
  

  96
  
</style>





  
  

  97
  





  
  

  98
  





  
  

  99
  
<style type="text/css">





  
  

  100
  
.dropdown-submenu {





  
  

  101
  
  position: relative;





  
  

  102
  
}





  
  

  103
  
.dropdown-submenu>.dropdown-menu {





  
  

  104
  
  top: 0;





  
  

  105
  
  left: 100%;





  
  

  106
  
  margin-top: -6px;





  
  

  107
  
  margin-left: -1px;





  
  

  108
  
  border-radius: 0 6px 6px 6px;





  
  

  109
  
}





  
  

  110
  
.dropdown-submenu:hover>.dropdown-menu {





  
  

  111
  
  display: block;





  
  

  112
  
}





  
  

  113
  
.dropdown-submenu>a:after {





  
  

  114
  
  display: block;





  
  

  115
  
  content: " ";





  
  

  116
  
  float: right;





  
  

  117
  
  width: 0;





  
  

  118
  
  height: 0;





  
  

  119
  
  border-color: transparent;





  
  

  120
  
  border-style: solid;





  
  

  121
  
  border-width: 5px 0 5px 5px;





  
  

  122
  
  border-left-color: #cccccc;





  
  

  123
  
  margin-top: 5px;





  
  

  124
  
  margin-right: -10px;





  
  

  125
  
}





  
  

  126
  
.dropdown-submenu:hover>a:after {





  
  

  127
  
  border-left-color: #adb5bd;





  
  

  128
  
}





  
  

  129
  
.dropdown-submenu.pull-left {





  
  

  130
  
  float: none;





  
  

  131
  
}





  
  

  132
  
.dropdown-submenu.pull-left>.dropdown-menu {





  
  

  133
  
  left: -100%;





  
  

  134
  
  margin-left: 10px;





  
  

  135
  
  border-radius: 6px 0 6px 6px;





  
  

  136
  
}





  
  

  137
  
</style>





  
  

  138
  





  
  

  139
  
<script type="text/javascript">





  
  

  140
  
// manage active state of menu based on current page





  
  

  141
  
$(document).ready(function () {





  
  

  142
  
  // active menu anchor





  
  

  143
  
  href = window.location.pathname





  
  

  144
  
  href = href.substr(href.lastIndexOf('/') + 1)





  
  

  145
  
  if (href === "")





  
  

  146
  
    href = "index.html";





  
  

  147
  
  var menuAnchor = $('a[href="' + href + '"]');





  
  

  148
  





  
  

  149
  
  // mark the anchor link active (and if it's in a dropdown, also mark that active)





  
  

  150
  
  var dropdown = menuAnchor.closest('li.dropdown');





  
  

  151
  
  if (window.bootstrap) { // Bootstrap 4+





  
  

  152
  
    menuAnchor.addClass('active');





  
  

  153
  
    dropdown.find('> .dropdown-toggle').addClass('active');





  
  

  154
  
  } else { // Bootstrap 3





  
  

  155
  
    menuAnchor.parent().addClass('active');





  
  

  156
  
    dropdown.addClass('active');





  
  

  157
  
  }





  
  

  158
  





  
  

  159
  
  // Navbar adjustments





  
  

  160
  
  var navHeight = $(".navbar").first().height() + 15;





  
  

  161
  
  var style = document.createElement('style');





  
  

  162
  
  var pt = "padding-top: " + navHeight + "px; ";





  
  

  163
  
  var mt = "margin-top: -" + navHeight + "px; ";





  
  

  164
  
  var css = "";





  
  

  165
  
  // offset scroll position for anchor links (for fixed navbar)





  
  

  166
  
  for (var i = 1; i <= 6; i++) {





  
  

  167
  
    css += ".section h" + i + "{ " + pt + mt + "}\n";





  
  

  168
  
  }





  
  

  169
  
  style.innerHTML = "body {" + pt + "padding-bottom: 40px; }\n" + css;





  
  

  170
  
  document.head.appendChild(style);





  
  

  171
  
});





  
  

  172
  
</script>





  
  

  173
  





  
  

  174
  
<!-- tabsets -->





  
  

  175
  





  
  

  176
  
<style type="text/css">





  
  

  177
  
.tabset-dropdown > .nav-tabs {





  
  

  178
  
  display: inline-table;





  
  

  179
  
  max-height: 500px;





  
  

  180
  
  min-height: 44px;





  
  

  181
  
  overflow-y: auto;





  
  

  182
  
  border: 1px solid #ddd;





  
  

  183
  
  border-radius: 4px;





  
  

  184
  
}





  
  

  185
  





  
  

  186
  
.tabset-dropdown > .nav-tabs > li.active:before, .tabset-dropdown > .nav-tabs.nav-tabs-open:before {





  
  

  187
  
  content: "\e259";





  
  

  188
  
  font-family: 'Glyphicons Halflings';





  
  

  189
  
  display: inline-block;





  
  

  190
  
  padding: 10px;





  
  

  191
  
  border-right: 1px solid #ddd;





  
  

  192
  
}





  
  

  193
  





  
  

  194
  
.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {





  
  

  195
  
  content: "\e258";





  
  

  196
  
  font-family: 'Glyphicons Halflings';





  
  

  197
  
  border: none;





  
  

  198
  
}





  
  

  199
  





  
  

  200
  
.tabset-dropdown > .nav-tabs > li.active {





  
  

  201
  
  display: block;





  
  

  202
  
}





  
  

  203
  





  
  

  204
  
.tabset-dropdown > .nav-tabs > li > a,





  
  

  205
  
.tabset-dropdown > .nav-tabs > li > a:focus,





  
  

  206
  
.tabset-dropdown > .nav-tabs > li > a:hover {





  
  

  207
  
  border: none;





  
  

  208
  
  display: inline-block;





  
  

  209
  
  border-radius: 4px;





  
  

  210
  
  background-color: transparent;





  
  

  211
  
}





  
  

  212
  





  
  

  213
  
.tabset-dropdown > .nav-tabs.nav-tabs-open > li {





  
  

  214
  
  display: block;





  
  

  215
  
  float: none;





  
  

  216
  
}





  
  

  217
  





  
  

  218
  
.tabset-dropdown > .nav-tabs > li {





  
  

  219
  
  display: none;





  
  

  220
  
}





  
  

  221
  
</style>





  
  

  222
  





  
  

  223
  
<!-- code folding -->





  
  

  224
  





  
  

  225
  





  
  

  226
  





  
  

  227
  
<style type="text/css">





  
  

  228
  





  
  

  229
  
#TOC {





  
  

  230
  
  margin: 25px 0px 20px 0px;





  
  

  231
  
}





  
  

  232
  
@media (max-width: 768px) {





  
  

  233
  
#TOC {





  
  

  234
  
  position: relative;





  
  

  235
  
  width: 100%;





  
  

  236
  
}





  
  

  237
  
}





  
  

  238
  





  
  

  239
  
@media print {





  
  

  240
  
.toc-content {





  
  

  241
  
  /* see https://github.com/w3c/csswg-drafts/issues/4434 */





  
  

  242
  
  float: right;





  
  

  243
  
}





  
  

  244
  
}





  
  

  245
  





  
  

  246
  
.toc-content {





  
  

  247
  
  padding-left: 30px;





  
  

  248
  
  padding-right: 40px;





  
  

  249
  
}





  
  

  250
  





  
  

  251
  
div.main-container {





  
  

  252
  
  max-width: 1200px;





  
  

  253
  
}





  
  

  254
  





  
  

  255
  
div.tocify {





  
  

  256
  
  width: 20%;





  
  

  257
  
  max-width: 260px;





  
  

  258
  
  max-height: 85%;





  
  

  259
  
}





  
  

  260
  





  
  

  261
  
@media (min-width: 768px) and (max-width: 991px) {





  
  

  262
  
  div.tocify {





  
  

  263
  
    width: 25%;





  
  

  264
  
  }





  
  

  265
  
}





  
  

  266
  





  
  

  267
  
@media (max-width: 767px) {





  
  

  268
  
  div.tocify {





  
  

  269
  
    width: 100%;





  
  

  270
  
    max-width: none;





  
  

  271
  
  }





  
  

  272
  
}





  
  

  273
  





  
  

  274
  
.tocify ul, .tocify li {





  
  

  275
  
  line-height: 20px;





  
  

  276
  
}





  
  

  277
  





  
  

  278
  
.tocify-subheader .tocify-item {





  
  

  279
  
  font-size: 0.90em;





  
  

  280
  
}





  
  

  281
  





  
  

  282
  
.tocify .list-group-item {





  
  

  283
  
  border-radius: 0px;





  
  

  284
  
}





  
  

  285
  





  
  

  286
  
.tocify-subheader {





  
  

  287
  
  display: inline;





  
  

  288
  
}





  
  

  289
  
.tocify-subheader .tocify-item {





  
  

  290
  
  font-size: 0.95em;





  
  

  291
  
}





  
  

  292
  





  
  

  293
  
</style>





  
  

  294
  





  
  

  295
  





  
  

  296
  





  
  

  297
  
</head>





  
  

  298
  





  
  

  299
  
<body>





  
  

  300
  





  
  

  301
  





  
  

  302
  
<div class="container-fluid main-container">





  
  

  303
  





  
  

  304
  





  
  

  305
  
<!-- setup 3col/9col grid for toc_float and main content  -->





  
  

  306
  
<div class="row">





  
  

  307
  
<div class="col-xs-12 col-sm-4 col-md-3">





  
  

  308
  
<div id="TOC" class="tocify">





  
  

  309
  
</div>





  
  

  310
  
</div>





  
  

  311
  





  
  

  312
  
<div class="toc-content col-xs-12 col-sm-8 col-md-9">





  
  

  313
  





  
  

  314
  





  
  

  315
  





  
  

  316
  





  
  

  317
  
<div class="navbar navbar-default  navbar-fixed-top" role="navigation">





  
  

  318
  
  <div class="container">





  
  

  319
  
    <div class="navbar-header">





  
  

  320
  
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbar" data-bs-target="#navbar">





  
  

  321
  
        <span class="icon-bar"></span>





  
  

  322
  
        <span class="icon-bar"></span>





  
  

  323
  
        <span class="icon-bar"></span>





  
  

  324
  
      </button>





  
  

  325
  
      <a class="navbar-brand" href="index.html">VoltRon</a>





  
  

  326
  
    </div>





  
  

  327
  
    <div id="navbar" class="navbar-collapse collapse">





  
  

  328
  
      <ul class="nav navbar-nav">





  
  

  329
  
        <li>





  
  

  330
  
  <a href="tutorials.html">Explore</a>





  
  

  331
  
</li>





  
  

  332
  
<li class="dropdown">





  
  

  333
  
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">





  
  

  334
  
    Vignette





  
  

  335
  
     





  
  

  336
  
    <span class="caret"></span>





  
  

  337
  
  </a>





  
  

  338
  
  <ul class="dropdown-menu" role="menu">





  
  

  339
  
    <li class="dropdown-submenu">





  
  

  340
  
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Spatial Data Integration</a>





  
  

  341
  
      <ul class="dropdown-menu" role="menu">





  
  

  342
  
        <li>





  
  

  343
  
          <a href="registration.html">Spatial Data Alignment</a>





  
  

  344
  
        </li>





  
  

  345
  
        <li>





  
  

  346
  
          <a href="multiomic.html">Multi-omic Integration</a>





  
  

  347
  
        </li>





  
  

  348
  
        <li>





  
  

  349
  
          <a href="nicheclustering.html">Niche Clustering</a>





  
  

  350
  
        </li>





  
  

  351
  
      </ul>





  
  

  352
  
    </li>





  
  

  353
  
    <li class="dropdown-submenu">





  
  

  354
  
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Downstream Analysis</a>





  
  

  355
  
      <ul class="dropdown-menu" role="menu">





  
  

  356
  
        <li>





  
  

  357
  
          <a href="roianalysis.html">ROI Analysis</a>





  
  

  358
  
        </li>





  
  

  359
  
        <li>





  
  

  360
  
          <a href="spotanalysis.html">Cell/Spot Analysis</a>





  
  

  361
  
        </li>





  
  

  362
  
        <li>





  
  

  363
  
          <a href="moleculeanalysis.html">Molecule Analysis</a>





  
  

  364
  
        </li>





  
  

  365
  
        <li>





  
  

  366
  
          <a href="pixelanalysis.html">Pixels (Image Only) Analysis</a>





  
  

  367
  
        </li>





  
  

  368
  
      </ul>





  
  

  369
  
    </li>





  
  

  370
  
    <li class="dropdown-submenu">





  
  

  371
  
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Utilities</a>





  
  

  372
  
      <ul class="dropdown-menu" role="menu">





  
  

  373
  
        <li>





  
  

  374
  
          <a href="interactive.html">Interactive Utilities</a>





  
  

  375
  
        </li>





  
  

  376
  
        <li>





  
  

  377
  
          <a href="importingdata.html">Importing Spatial Data</a>





  
  

  378
  
        </li>





  
  

  379
  
        <li>





  
  

  380
  
          <a href="voltronobjects.html">Working with VoltRon Objects</a>





  
  

  381
  
        </li>





  
  

  382
  
        <li>





  
  

  383
  
          <a href="conversion.html">Converting VoltRon Objects</a>





  
  

  384
  
        </li>





  
  

  385
  
        <li>





  
  

  386
  
          <a href="ondisk.html">OnDisk-based Analysis Utilities</a>





  
  

  387
  
        </li>





  
  

  388
  
      </ul>





  
  

  389
  
    </li>





  
  

  390
  
  </ul>





  
  

  391
  
</li>





  
  

  392
  
      </ul>





  
  

  393
  
      <ul class="nav navbar-nav navbar-right">





  
  

  394
  
        <li class="dropdown">





  
  

  395
  
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">





  
  

  396
  
    <span class="fa fa-envelope-o"></span>





  
  

  397
  
     





  
  

  398
  
    Contact





  
  

  399
  
     





  
  

  400
  
    <span class="caret"></span>





  
  

  401
  
  </a>





  
  

  402
  
  <ul class="dropdown-menu" role="menu">





  
  

  403
  
    <li>





  
  

  404
  
      <a href="https://bioinformatics.mdc-berlin.de">Altuna Lab/BIMSB Bioinfo</a>





  
  

  405
  
    </li>





  
  

  406
  
    <li>





  
  

  407
  
      <a href="https://www.mdc-berlin.de/landthaler">Landthaler Lab/BIMSB</a>





  
  

  408
  
    </li>





  
  

  409
  
  </ul>





  
  

  410
  
</li>





  
  

  411
  
<li class="dropdown">





  
  

  412
  
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">





  
  

  413
  
    <span class="fa fa-github"></span>





  
  

  414
  
     





  
  

  415
  
    GitHub





  
  

  416
  
     





  
  

  417
  
    <span class="caret"></span>





  
  

  418
  
  </a>





  
  

  419
  
  <ul class="dropdown-menu" role="menu">





  
  

  420
  
    <li>





  
  

  421
  
      <a href="https://github.com/BIMSBbioinfo/VoltRon">VoltRon</a>





  
  

  422
  
    </li>





  
  

  423
  
    <li>





  
  

  424
  
      <a href="https://github.com/BIMSBbioinfo">BIMSB Bioinfo</a>





  
  

  425
  
    </li>





  
  

  426
  
  </ul>





  
  

  427
  
</li>





  
  

  428
  
      </ul>





  
  

  429
  
    </div><!--/.nav-collapse -->





  
  

  430
  
  </div><!--/.container -->





  
  

  431
  
</div><!--/.navbar -->





  
  

  432
  





  
  

  433
  
<div id="header">





  
  

  434
  





  
  

  435
  





  
  

  436
  





  
  

  437
  
<h1 class="title toc-ignore">Interactive</h1>





  
  

  438
  





  
  

  439
  
</div>





  
  

  440
  





  
  

  441
  





  
  

  442
  
<style>





  
  

  443
  
.title{





  
  

  444
  
  display: none;





  
  

  445
  
}





  
  

  446
  
body {





  
  

  447
  
  text-align: justify





  
  

  448
  
}





  
  

  449
  
.center {





  
  

  450
  
  display: block;





  
  

  451
  
  margin-left: auto;





  
  

  452
  
  margin-right: auto;





  
  

  453
  
}





  
  

  454
  
</style>





  
  

  455
  
<style type="text/css">





  
  

  456
  
.watch-out {





  
  

  457
  
  color: black;





  
  

  458
  
}





  
  

  459
  
</style>





  
  

  460
  
<p><br></p>





  
  

  461
  
<div id="interactive-annotation" class="section level1">





  
  

  462
  
<h1>Interactive Annotation</h1>





  
  

  463
  
<p><strong>VoltRon</strong> includes interactive applications to select





  
  

  464
  
and manually label spatial points by drawing polygons and circles. As an





  
  

  465
  
example, we will use a Spot-based spatial transcriptomic assay,





  
  

  466
  
specifically the <strong>Mouse Brain Serial Section 1/2</strong>





  
  

  467
  
datasets, analyzed in the <a href="nicheclustering.html">Niche





  
  

  468
  
Clustering</a> tutorial. You can find the already analyzed data stored





  
  

  469
  
as a VoltRon object <a





  
  

  470
  
href="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/NicheClustering/Visium&amp;Visium_data_decon_analyzed.rds">here</a></p>





  
  

  471
  
<pre class="r watch-out"><code>MBrain_Sec &lt;- readRDS(&quot;Visium&amp;Visium_data_decon_analyzed.rds&quot;)</code></pre>





  
  

  472
  
<p>We can start annotating the spatial assay. By passing arguments used





  
  

  473
  
by the <strong>vrSpatialPlot</strong> function to visualize labels





  
  

  474
  
(e.g. clusters), we can better select regions within tissue sections for





  
  

  475
  
annotation.</p>





  
  

  476
  
<pre class="r watch-out"><code>MBrain_Sec &lt;- annotateSpatialData(MBrain_Sec, assay = &quot;Assay1&quot;, 





  
  

  477
  
                                  group.by = &quot;clusters&quot;, label = &quot;annotation&quot;)</code></pre>





  
  

  478
  
<p><img width="100%" height="100%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_annotation.png" class="center"></p>





  
  

  479
  
<p><br></p>





  
  

  480
  
<p>Here, <strong>annotateSpatialData</strong> function not only labels





  
  

  481
  
spots with within regions of interests (ROIs) selected by the user, but





  
  

  482
  
also records these regions in ROI assays within the same layer of the





  
  

  483
  
annotated Visium assay. The new assay type will be given the name





  
  

  484
  
<strong>ROIAnnotations</strong> if otherwise not specified using the





  
  

  485
  
<strong>annotation_assay</strong> arguement in the function.</p>





  
  

  486
  
<pre class="r watch-out"><code>MBrain_Sec </code></pre>





  
  

  487
  
<pre><code>VoltRon Object 





  
  

  488
  
Anterior: 





  
  

  489
  
  Layers: Section1 Section2 





  
  

  490
  
Posterior: 





  
  

  491
  
  Layers: Section1 Section2 





  
  

  492
  
Assays: Visium_decon(Main) Visium ROIAnnotation </code></pre>





  
  

  493
  
<pre class="r watch-out"><code>MBrain_Sec@sample.metadata </code></pre>





  
  

  494
  
<pre><code>&gt; MBrain_Sec@sample.metadata





  
  

  495
  
               Assay    Layer    Sample





  
  

  496
  
Assay1        Visium Section1  Anterior





  
  

  497
  
Assay2        Visium Section2  Anterior





  
  

  498
  
Assay3        Visium Section1 Posterior





  
  

  499
  
Assay4        Visium Section2 Posterior





  
  

  500
  
Assay5 ROIAnnotation Section1  Anterior</code></pre>





  
  

  501
  
<p>The new annotations are available in the metadata of the spot assay





  
  

  502
  
(default assay in this object) and can be visualized if wanted.</p>





  
  

  503
  
<pre class="r watch-out"><code>head(Metadata(MBrain_Sec))</code></pre>





  
  

  504
  
<pre><code>                          Count        Assay    Layer   Sample clusters annotation





  
  

  505
  
AAACAAGTATCTCCCA-1_Assay1     1 Visium_decon Section1 Anterior        1   Region 3





  
  

  506
  
AAACACCAATAACTGC-1_Assay1     1 Visium_decon Section1 Anterior        3  undefined





  
  

  507
  
AAACAGAGCGACTCCT-1_Assay1     1 Visium_decon Section1 Anterior        4  undefined





  
  

  508
  
AAACAGCTTTCAGAAG-1_Assay1     1 Visium_decon Section1 Anterior        5   Region 1





  
  

  509
  
AAACAGGGTCTATATT-1_Assay1     1 Visium_decon Section1 Anterior        5   Region 1





  
  

  510
  
AAACATGGTGAGAGGA-1_Assay1     1 Visium_decon Section1 Anterior        3  undefined</code></pre>





  
  

  511
  
<pre class="r watch-out"><code>vrSpatialPlot(MBrain_Sec, assay = &quot;Assay1&quot;, group.by = &quot;annotation&quot;)</code></pre>





  
  

  512
  
<p><img width="80%" height="80%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_annotation_plot.png" class="center"></p>





  
  

  513
  
<p><br></p>





  
  

  514
  
<p>You can also overlay the ROI annotations with the clustered spots to





  
  

  515
  
visualize multiple assays in the same time.</p>





  
  

  516
  
<pre class="r watch-out"><code>library(ggnewscale)





  
  

  517
  
vrSpatialPlot(MBrain_Sec, assay = &quot;Assay1&quot;, group.by = &quot;clusters&quot;) |&gt; 





  
  

  518
  
  addSpatialLayer(MBrain_Sec, assay = &quot;Assay5&quot;, group.by = &quot;annotation&quot;, alpha = 0.7)</code></pre>





  
  

  519
  
<p><img width="80%" height="80%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_annotation_example_overlay_plot.png" class="center"></p>





  
  

  520
  
<p><br></p>





  
  

  521
  
</div>





  
  

  522
  
<div id="interactive-visualization" class="section level1">





  
  

  523
  
<h1>Interactive Visualization</h1>





  
  

  524
  
<p>VoltRon incorporates utilities</p>





  
  

  525
  
<ul>





  
  

  526
  
<li><strong>(i)</strong> to convert VoltRon objects into other spatial





  
  

  527
  
data objects and files that could be used platforms, and</li>





  
  

  528
  
<li><strong>(ii)</strong> to incorporate wrapper functions to call





  
  

  529
  
methods from package that achieves interactive visualization</li>





  
  

  530
  
</ul>





  
  

  531
  
<p><br></p>





  
  

  532
  
<div id="vitessce" class="section level2">





  
  

  533
  
<h2>Vitessce</h2>





  
  

  534
  
<p>We will transform VoltRon objects of Xenium data into zarr arrays,





  
  

  535
  
and use them for interactive visualization in <a





  
  

  536
  
href="http://vitessce.io/">Vitessce</a>. We should first download the





  
  

  537
  
vitessceR package which incorporates wrapper function to visualize zarr





  
  

  538
  
arrays interactively in R.</p>





  
  

  539
  
<pre class="r watch-out"><code>if (!require(&quot;devtools&quot;, quietly = TRUE))





  
  

  540
  
    install.packages(&quot;devtools&quot;)





  
  

  541
  
if (!require(&quot;vitessceR&quot;, quietly = TRUE))





  
  

  542
  
    devtools::install_github(&quot;Artur-man/vitessceR&quot;)</code></pre>





  
  

  543
  
<p>We can convert the VoltRon object into an anndata object and save it





  
  

  544
  
as a a zarr array using the <strong>as.AnnData</strong> function which





  
  

  545
  
will create the array in the specified location. We use the





  
  

  546
  
<strong>flip_coordinates=TRUE</strong> argument to flip the coordinates





  
  

  547
  
of cells vertically, hence match it with the top to bottom system of the





  
  

  548
  
background DAPI image. Also, we can save an OMETIFF file of the DAPI





  
  

  549
  
image using <strong>create.ometiff</strong> arguement to be used by





  
  

  550
  
vitessceR later.</p>





  
  

  551
  
<pre class="r watch-out"><code>xenium_data &lt;- as.AnnData(xenium_data, file = &quot;xenium_data.zarr&quot;, assay = &quot;Xenium&quot;, 





  
  

  552
  
                          flip_coordinates = TRUE, create.ometiff = TRUE)</code></pre>





  
  

  553
  
<p><br></p>





  
  

  554
  
<p>We can use the zarr file directly in the





  
  

  555
  
<strong>vrSpatialPlot</strong> function to visualize the zarr array





  
  

  556
  
interactively in Rstudio viewer. The <strong>reduction</strong>





  
  

  557
  
arguement allows the umap of the Xenium data to be visualized alongside





  
  

  558
  
with the spatial coordinates of the Xenium cells (thus associated cell





  
  

  559
  
segmentations).</p>





  
  

  560
  
<pre class="r watch-out"><code>vrSpatialPlot(&quot;xenium_data.zarr&quot;, group.by = &quot;clusters&quot;, reduction = &quot;umap&quot;)</code></pre>





  
  

  561
  
<p><img width="90%" height="90%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_vitessce.png" class="center"></p>





  
  

  562
  
<p><br></p>





  
  

  563
  
<p>The vitessce application in the viewer pane allows visualizing





  
  

  564
  
background DAPI image and segmentations simultaneously while allowing





  
  

  565
  
users to zoom in and control the pane for advanced visualization.</p>





  
  

  566
  
<p><img width="90%" height="90%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_vitessce_zoom.png" class="center"></p>





  
  

  567
  
<p><br></p>





  
  

  568
  
</div>





  
  

  569
  
<div id="tissuumaps" class="section level2">





  
  

  570
  
<h2>TissUUmaps</h2>





  
  

  571
  
<p>To use <strong>TissUUmaps</strong> for interactive investigation of





  
  

  572
  
your spatial omic data, we first need to convert the VoltRon object into





  
  

  573
  
an anndata object. However, this time we save the anndata object as an





  
  

  574
  
h5ad array using again the <strong>as.AnnData</strong> function which





  
  

  575
  
will create the array in the specified location. We use the





  
  

  576
  
<strong>flip_coordinates=TRUE</strong> argument to flip the coordinates





  
  

  577
  
of cells vertically, hence match it with the top to bottom system of the





  
  

  578
  
background DAPI image.</p>





  
  

  579
  
<pre class="r watch-out"><code>as.AnnData(xenium_data, file = &quot;xenium_data.h5ad&quot;, assay = &quot;Xenium&quot;, flip_coordinates = TRUE)</code></pre>





  
  

  580
  
<p>To use <strong>TissUUmaps</strong>, you can follow the instructions





  
  

  581
  
<a href="https://tissuumaps.github.io/installation/">here</a>. Once





  
  

  582
  
installed and executed, simply drag and drop the h5ad file to the main





  
  

  583
  
panel of the application</p>





  
  

  584
  
<p><img width="100%" height="100%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_tissuumaps.png" class="center"></p>





  
  

  585
  
<p><br></p>





  
  

  586
  
</div>





  
  

  587
  
<div id="voltron" class="section level2">





  
  

  588
  
<h2>VoltRon</h2>





  
  

  589
  
<p>You can also use the built-in Shiny-based interactive visualizers of





  
  

  590
  
the VoltRon package by calling <strong>interactive=TRUE</strong>. You





  
  

  591
  
can zoom in by drawing a box on the plot and double-clicking in the





  
  

  592
  
selected area.</p>





  
  

  593
  
<pre class="r watch-out"><code>vrSpatialPlot(xenium_data, group.by = &quot;clusters&quot;, plot.segments = TRUE, interactive = TRUE)</code></pre>





  
  

  594
  
<p><img width="85%" height="85%" src="https://bimsbstatic.mdc-berlin.de/landthaler/VoltRon/Package/images/interactive_voltron.png" class="center"></p>





  
  

  595
  
<p><br></p>





  
  

  596
  
</div>





  
  

  597
  
</div>





  
  

  598
  





  
  

  599
  





  
  

  600
  





  
  

  601
  
</div>





  
  

  602
  
</div>





  
  

  603
  





  
  

  604
  
</div>





  
  

  605
  





  
  

  606
  
<script>





  
  

  607
  





  
  

  608
  
// add bootstrap table styles to pandoc tables





  
  

  609
  
function bootstrapStylePandocTables() {





  
  

  610
  
  $('tr.odd').parent('tbody').parent('table').addClass('table table-condensed');





  
  

  611
  
}





  
  

  612
  
$(document).ready(function () {





  
  

  613
  
  bootstrapStylePandocTables();





  
  

  614
  
});





  
  

  615
  





  
  

  616
  





  
  

  617
  
</script>





  
  

  618
  





  
  

  619
  
<!-- tabsets -->





  
  

  620
  





  
  

  621
  
<script>





  
  

  622
  
$(document).ready(function () {





  
  

  623
  
  window.buildTabsets("TOC");





  
  

  624
  
});





  
  

  625
  





  
  

  626
  
$(document).ready(function () {





  
  

  627
  
  $('.tabset-dropdown > .nav-tabs > li').click(function () {





  
  

  628
  
    $(this).parent().toggleClass('nav-tabs-open');





  
  

  629
  
  });





  
  

  630
  
});





  
  

  631
  
</script>





  
  

  632
  





  
  

  633
  
<!-- code folding -->





  
  

  634
  





  
  

  635
  
<script>





  
  

  636
  
$(document).ready(function ()  {





  
  

  637
  





  
  

  638
  
    // temporarily add toc-ignore selector to headers for the consistency with Pandoc





  
  

  639
  
    $('.unlisted.unnumbered').addClass('toc-ignore')





  
  

  640
  





  
  

  641
  
    // move toc-ignore selectors from section div to header





  
  

  642
  
    $('div.section.toc-ignore')





  
  

  643
  
        .removeClass('toc-ignore')





  
  

  644
  
        .children('h1,h2,h3,h4,h5').addClass('toc-ignore');





  
  

  645
  





  
  

  646
  
    // establish options





  
  

  647
  
    var options = {





  
  

  648
  
      selectors: "h1,h2,h3",





  
  

  649
  
      theme: "bootstrap3",





  
  

  650
  
      context: '.toc-content',





  
  

  651
  
      hashGenerator: function (text) {





  
  

  652
  
        return text.replace(/[.\\/?&!#<>]/g, '').replace(/\s/g, '_');





  
  

  653
  
      },





  
  

  654
  
      ignoreSelector: ".toc-ignore",





  
  

  655
  
      scrollTo: 0





  
  

  656
  
    };





  
  

  657
  
    options.showAndHide = false;





  
  

  658
  
    options.smoothScroll = false;





  
  

  659
  





  
  

  660
  
    // tocify





  
  

  661
  
    var toc = $("#TOC").tocify(options).data("toc-tocify");





  
  

  662
  
});





  
  

  663
  
</script>





  
  

  664
  





  
  

  665
  
<!-- dynamically load mathjax for compatibility with self-contained -->





  
  

  666
  
<script>





  
  

  667
  
  (function () {





  
  

  668
  
    var script = document.createElement("script");





  
  

  669
  
    script.type = "text/javascript";





  
  

  670
  
    script.src  = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";





  
  

  671
  
    document.getElementsByTagName("head")[0].appendChild(script);





  
  

  672
  
  })();





  
  

  673
  
</script>





  
  

  674
  





  
  

  675
  
</body>





  
  

  676
  
</html>