higlass-scalable-insets
Version:
Scalable Insets track for highlighting and exploring annotations in HiGlass
599 lines (591 loc) • 22.4 kB
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="Fritz Lekschas">
<meta name="description" content="A new technique for interactively exploring and navigating large numbers of annotations in images.">
<meta name="keywords" content="HiGlass, Plugin Tracks, Insets, Matrices, Hi-C, Genome Interaction Maps, Loops, Domains, TADs, 3D Genome, Exploration, Navigation, Guidance, Multiscale, 2D, Visualization">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="HiGlass Scalable Insets for Hi-C Matrices">
<meta itemprop="description" content="A new technique for interactively exploring and navigating large numbers of annotated patterns like loops or domains in Hi-C matrices for exploring the 3D genome.">
<meta itemprop="image" content="http://scalable-insets.lekschas.de/images/teaser-hic.jpg">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@flekschas">
<meta name="twitter:title" content="HiGlass Scalable Insets for Hi-C Matrices">
<meta name="twitter:description" content="A new technique for interactively exploring and navigating large numbers of annotated patterns like loops or domains in Hi-C matrices for exploring the 3D genome.">
<meta name="twitter:creator" content="@flekschas">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://scalable-insets.lekschas.de/images/teaser-hic.jpg">
<!-- Open Graph -->
<meta property="og:title" content="HiGlass Scalable Insets for Hi-C Matrices" />
<meta property="og:description" content="A new technique for interactively exploring and navigating large numbers of annotated patterns like loops or domains in Hi-C matrices for exploring the 3D genome." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/flekschas/higlass-scalable-insets" />
<meta property="og:image" content="http://scalable-insets.lekschas.de/images/teaser-hic.jpg" />
<title>HiGlass Scalable Insets for Hi-C Matrices</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="hglib.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-dark.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
</head>
<body>
<header id="topbar" tabindex="0">
<div id="title-wrapper" class="flex-c flex-jc-sb">
<h1 id="title">Scalable Insets</h1>
<ul class="flex-c menu">
<a href="/" class="no-select">Image</a>
<a href="/map.html" class="no-select">Map</a>
<a href="/hic.html" class="no-select active">Hi-C</a>
</ul>
</div>
<section id="description">
<p>
A new technique for interactively exploring and navigating large numbers of annotations in <a href="/">gigapixel images</a>, <a href="/map.html">geographic maps</a>, and genome interaction matrices. <em class="more">More</em>
</p>
<div id="description-more">
<p>
This example visualizes loops and TADs in <a href="https://www.ncbi.nlm.nih.gov/pubmed/25497547" target="_blank">Rao et al. 2014</a>'s Hi-C matrix using <a href="https://higlass.io" target="_blank">HiGlass</a>.
</p>
<div id="links" class="flex-c flex-jc-sb">
<a href="https://www.youtube.com/watch?v=7Bn4mNLl3WQ" target="_blank">Video</a>
<a href="https://github.com/flekschas/higlass-scalable-insets" target="_blank">Source code</a>
<a href="http://scalable-insets.lekschas.de/" target="_blank">More info</a>
</div>
</div>
</section>
</header>
<div id="demo"></div>
<script type="text/javascript" src="higlass-scalable-insets.min.js"></script></body>
<script src="hglib.js"></script>
<script>
const viewConfig = {
editable: false,
zoomFixed: false,
trackSourceServers: [
'http://higlass.io/api/v1',
],
exportViewUrl: 'http://higlass.io/api/v1/viewconfs/',
views: [
{
uid: 'aa',
initialXDomain: [
2369671819.231136,
2380392537.7446365,
],
initialYDomain: [
2372031264.2694373,
2377536245.92563,
],
autocompleteSource: 'http://higlass.io/api/v1/suggest/?d=OHJakQICQD6gTD7skx4EWA&',
genomePositionSearchBoxVisible: true,
chromInfoPath: '//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv',
tracks: {
top: [],
left: [],
center: [
{
uid: 'c1',
type: 'combined',
height: 592,
contents: [
{
server: '//higlass.io/api/v1',
tilesetUid: 'CQMd6V_cRw6iCI_-Unl3PQ',
type: 'heatmap',
position: 'center',
options: {
colorRange: [
'#ffffff',
'#fff3d0',
'#ffd787',
'#ffaa00',
'#ae5507',
'#5a2009',
'#000000',
],
colorbarPosition: 'hidden',
colorbarLabelsPosition: 'outside',
maxZoom: null,
labelPosition: 'hidden',
name: 'Rao et al. (2014) GM12878 MboI (allreps) 1kb',
trackBorderWidth: 0,
trackBorderColor: 'black',
heatmapValueScaling: 'log',
scaleStartPercent: '0.00000',
scaleEndPercent: '1.00000',
},
uid: 'heatmap1',
name: 'Rao et al. (2014) GM12878 MboI (allreps) 1kb',
transforms: [
{
name: 'ICE',
value: 'weight',
},
],
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'Pj-GSgp0SlqpKhuLJkhzFQ',
uid: 'anno-tads-1',
type: '2d-rectangle-domains',
options: {
patternType: 'tad',
labelColor: 'black',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: 'black',
rectangleDomainFillColor: 'grey',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: 'black',
rectangleDomainOpacity: 0,
rectanlgeMinSize: 1,
name: 'Forcato et al (2017) Rao_RepA1_GM12878_domainCaller.txt.multires.db',
},
position: 'center',
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'cNse-dLjS8OvE-1xT-ZUgA',
uid: 'anno-tads-2',
type: '2d-rectangle-domains',
options: {
patternType: 'tad',
labelColor: 'black',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: 'black',
rectangleDomainFillColor: 'grey',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: 'black',
rectangleDomainStrokeWidth: 1,
rectangleDomainStrokeOpacity: 1,
rectangleDomainOpacity: 0,
rectanlgeMinSize: 1,
name: 'Forcato et al (2017) Rao_RepA_GM12878_Arrowhead.txt.multires.db',
},
position: 'center',
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'UH5yId-URvCwCaxOrYGa8w',
uid: 'anno-tads-2a',
type: '2d-rectangle-domains',
options: {
patternType: 'tad',
labelColor: 'black',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: 'black',
rectangleDomainFillColor: 'grey',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: 'black',
rectangleDomainOpacity: 0,
rectanlgeMinSize: 1,
name: 'Forcato et al (2017) Rao_RepA1_GM12878_Arrowhead.txt.multires.db',
},
position: 'center',
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'cs3PLbfDTKO0fso6UewTPQ',
uid: 'anno-tads-3',
type: '2d-rectangle-domains',
options: {
patternType: 'tad',
labelColor: 'black',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: 'black',
rectangleDomainFillColor: 'grey',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: 'black',
rectangleDomainOpacity: 0,
rectanlgeMinSize: 1,
name: 'Forcato et al (2017) Rao_RepA1_GM12878_HiCseg.txt.multires.db',
},
position: 'center',
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'OjpPD5gFQuSlQuxMTmLEVg',
uid: 'anno-tads-4',
type: '2d-rectangle-domains',
options: {
patternType: 'tad',
labelColor: 'black',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: 'black',
rectangleDomainFillColor: 'grey',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: 'black',
rectangleDomainOpacity: 0,
rectanlgeMinSize: 1,
name: 'Forcato et al (2017) Rao_RepA1_GM12878_InsulationScore.txt.multires.db',
},
position: 'center',
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'MwkxoQuDSiKCNbgjp_oajQ',
uid: 'anno-tads-5',
type: '2d-rectangle-domains',
options: {
patternType: 'tad',
labelColor: 'black',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: 'black',
rectangleDomainFillColor: 'grey',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: 'black',
rectangleDomainOpacity: 0,
rectanlgeMinSize: 1,
name: 'Forcato et al (2017) Rao_RepA1_GM12878_TADBit.txt.multires.db',
},
position: 'center',
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'LJKrbbQ5SeKDIPaLFP0diA',
uid: 'anno-tads-6',
type: '2d-rectangle-domains',
options: {
patternType: 'tad',
labelColor: 'black',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: 'black',
rectangleDomainFillColor: 'grey',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: 'black',
rectangleDomainOpacity: 0,
rectanlgeMinSize: 1,
name: 'Forcato et al (2017) Rao_RepA1_GM12878_TADtree.txt.multires.db',
},
position: 'center',
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'P6aAKSc5SrKZmLwv7zM5DA',
uid: 'anno-tads-7',
type: '2d-rectangle-domains',
options: {
patternType: 'tad',
labelColor: 'black',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: 'black',
rectangleDomainFillColor: 'grey',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: 'black',
rectangleDomainOpacity: 0,
rectanlgeMinSize: 1,
name: 'Forcato et al (2017) Rao_RepA1_GM12878_armatus.txt.multires.db',
},
position: 'center',
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'Pj-GSgp0SlqpKhuLJkhzFQ',
uid: 'anno-tads-8',
type: '2d-rectangle-domains',
options: {
patternType: 'tad',
labelColor: 'black',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: 'black',
rectangleDomainFillColor: 'grey',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: 'black',
rectangleDomainOpacity: 1,
rectanlgeMinSize: 1,
name: 'Forcato et al (2017) Rao_RepA1_GM12878_domainCaller.txt.multires.db',
},
position: 'center',
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'HunfK2D3R9iBdIq-YNYjiw',
uid: 'anno-loops-1',
type: '2d-rectangle-domains',
options: {
patternType: 'loop',
labelColor: '',
labelPosition: 'hidden',
trackBorderWidth: 0,
trackBorderColor: '',
rectangleDomainFillColor: 'grey',
rectangleDomainFillOpacity: 0,
rectangleDomainStrokeColor: '',
rectangleDomainStrokeWidth: 1,
rectangleDomainOpacity: 1,
rectanlgeMinSize: 0.01,
name: 'Rao et al (2014) GM12878 (primary+replicate) HiCCUPS Loops',
},
position: 'center',
},
{
server: '//higlass.io/api/v1',
tilesetUid: 'CQMd6V_cRw6iCI_-Unl3PQ',
// server: '//localhost:8001/api/v1',
// tilesetUid: 'rao-gm12878-1kbmr',
uid: 'insets-loops',
type: 'insets',
chromInfoPath: '//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv',
dataType: 'cooler',
options: {
aggregation: 'pile',
isLogTransform: ['tad'],
isIgnoreDiag: 2,
minClusterSize: 2,
maxPreviews: 8,
previewSpacing: 1,
minSize: 16,
maxSize: 24,
sizeStepSize: 2,
padding: 0.2,
paddingCustom: {
5000: 8,
10000: 4,
25000: 2,
50000: 0.5,
100000: 0.2,
200000: 0.15,
},
resolution: 32,
resolutionCustom: {
10000: 10,
100000: 16,
},
scale: 3,
onClickScale: 2,
fill: 'white',
fillOpacity: 1,
// fading: [64, 80],
borderColor: 'black',
borderWidth: 2,
borderOpacity: 1,
leaderLineColor: 'black',
leaderLineWidth: 2,
leaderLineOpacity: 1,
dropDistance: 1,
dropBlur: 3,
dropOpacity: 0.8,
opacity: 1,
showClusterSize: true,
isDraggingEnabled: true,
scaleSizeBy: 'clusterSize',
focusColor: '#0093e5',
clusterSizeColor: 'white',
indicatorColor: 'white',
colorRange: [
'#ffffff',
'#fff3d0',
'#ffd787',
'#ffaa00',
'#ae5507',
'#5a2009',
'#000000',
],
},
},
],
position: 'center',
options: {},
},
],
right: [],
bottom: [],
gallery: [
{
server: '//higlass.io/api/v1',
tilesetUid: 'CQMd6V_cRw6iCI_-Unl3PQ',
// server: '//localhost:8001/api/v1',
// tilesetUid: 'rao-gm12878-1kbmr',
uid: 'insets',
type: 'insets',
chromInfoPath: '//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv',
dataType: 'cooler',
width: 120,
height: 120,
options: {
aggregation: 'pile',
isLogTransform: ['tad'],
isIgnoreDiag: 2,
maxPreviews: 8,
previewSpacing: 1,
minSize: 16,
maxSize: 24,
sizeStepSize: 2,
padding: 0.2,
paddingCustom: {
5000: 8,
10000: 4,
25000: 2,
50000: 0.5,
100000: 0.2,
200000: 0.15,
},
paddingLoci: 0.5,
paddingLociCustom: {
25000: 0,
50000: 0.3,
},
resolution: 32,
resolutionCustom: {
10000: 10,
100000: 16,
},
scale: 3,
onClickScale: 2,
fill: 'white',
fillOpacity: 1,
// fading: [64, 80],
borderColor: 'black',
borderWidth: 2,
borderOpacity: 1,
leaderLineColor: 'black',
leaderLineWidth: 2,
leaderLineOpacity: 1,
leaderLineFading: {
0: 1,
0.35: 0.33,
0.65: 0.33,
1: 1,
},
leaderLineStubWidthMin: 2,
leaderLineStubWidthMax: 4,
leaderLineStubLength: 12,
leaderLineDynamic: true,
leaderLineDynamicMinDist: 24,
leaderLineDynamicMaxDist: 120,
dropDistance: 1,
dropBlur: 3,
dropOpacity: 0.8,
showClusterSize: true,
isDraggingEnabled: true,
scaleSizeBy: 'clusterSize',
focusColor: '#0093e5',
clusterSizeColor: 'white',
indicatorColor: 'white',
colorRange: [
'#ffffff',
'#fff3d0',
'#ffd787',
'#ffaa00',
'#ae5507',
'#5a2009',
'#000000',
],
},
},
],
},
metaTracks: [
{
uid: 'c2a',
type: 'annotations-to-insets',
insetsTrack: 'insets',
options: {
annotationTracks: [
'anno-tads-1',
'anno-tads-2',
'anno-tads-3',
'anno-tads-4',
'anno-tads-5',
'anno-tads-7',
'anno-tads-8',
// 'anno-loops-1',
],
excludeTracks: [
// 'anno-tads-1',
// 'anno-tads-2',
// 'anno-tads-3',
// 'anno-tads-4',
'anno-tads-5',
'anno-tads-7',
'anno-tads-8',
// 'anno-loops-1',
],
insetThreshold: 96,
clusterAmong: 'patternType',
gridSize: 48,
minClusterSize: 3,
maxClusterDiameter: 48,
insetOriginPadding: 16,
boostContext: 1,
boostDetails: 1,
boostLocality: 1,
boostLayout: 1,
boostLayoutInit: 100,
},
},
{
uid: 'c2a2',
type: 'annotations-to-insets',
insetsTrack: 'insets-loops',
options: {
annotationTracks: [
'anno-tads-1',
'anno-tads-2',
'anno-tads-3',
'anno-tads-4',
'anno-tads-5',
'anno-tads-7',
'anno-loops-1',
],
excludeTracks: [
'anno-tads-1',
'anno-tads-2',
'anno-tads-3',
'anno-tads-4',
'anno-tads-5',
'anno-tads-7',
// 'anno-loops-1',
],
insetThreshold: 64,
clusterAmong: 'patternType',
gridSize: 48,
minClusterSize: 3,
maxClusterDiameter: 48,
insetOriginPadding: 6,
boostContext: 1,
boostDetails: 1,
boostLocality: 25,
boostLayout: 1,
boostLayoutInit: 100,
},
},
],
layout: {
w: 12,
h: 12,
x: 0,
y: 0,
i: 'aa',
moved: false,
static: false,
},
},
],
zoomLocks: {
locksByViewUid: {},
locksDict: {},
},
locationLocks: {
locksByViewUid: {},
locksDict: {},
},
};
window.hgApi = window.hglib.viewer(
document.getElementById('demo'), viewConfig, { bounded: true },
);
</script>
</html>