Created
June 1, 2022 13:43
-
-
Save mwalzer/cb654ab2f1cfb2c7588dc80fcbecc368 to your computer and use it in GitHub Desktop.
CV visualisation with pyvis
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" /> | |
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/vis-network.min.js"> </script> | |
<center> | |
<h1></h1> | |
</center> | |
<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" /> | |
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>--> | |
<style type="text/css"> | |
#mynetwork { | |
width: 100%; | |
height: 750px; | |
background-color: #a0a0a0; | |
border: 1px solid lightgray; | |
position: relative; | |
float: left; | |
} | |
/* position absolute is important and the container has to be relative or absolute as well. */ | |
div.popup { | |
position:absolute; | |
top:0px; | |
left:0px; | |
display:none; | |
background-color:#f5f4ed; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
border: 1px solid #808074; | |
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); | |
} | |
/* hide the original tooltip */ | |
.vis-network-tooltip { | |
display:none; | |
} | |
</style> | |
</head> | |
<body> | |
<div id = "mynetwork"></div> | |
<script type="text/javascript"> | |
// initialize global variables. | |
var edges; | |
var nodes; | |
var network; | |
var container; | |
var options, data; | |
// This method is responsible for drawing the graph, returns the drawn network | |
function drawGraph() { | |
var container = document.getElementById('mynetwork'); | |
// parsing and collecting nodes and edges from the python | |
nodes = new vis.DataSet([{"font": {"color": "black"}, "id": 0, "label": "Proteomics Standards Initiative Mass Spectrometry Vocabularies", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_0000000\u0027\u003eMS:0000000"}, {"font": {"color": "black"}, "id": 1, "label": "PSI-MS CV Quality Control Vocabulary", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000000\u0027\u003eMS:4000000"}, {"font": {"color": "black"}, "id": 2, "label": "QC metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000001\u0027\u003eMS:4000001"}, {"font": {"color": "black"}, "id": 3, "label": "QC metric value type", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000002\u0027\u003eMS:4000002"}, {"font": {"color": "black"}, "id": 4, "label": "single value", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000003\u0027\u003eMS:4000003"}, {"font": {"color": "black"}, "id": 5, "label": "n-tuple", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000004\u0027\u003eMS:4000004"}, {"font": {"color": "black"}, "id": 6, "label": "table", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000005\u0027\u003eMS:4000005"}, {"font": {"color": "black"}, "id": 7, "label": "matrix", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000006\u0027\u003eMS:4000006"}, {"font": {"color": "black"}, "id": 8, "label": "QC metric category", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000007\u0027\u003eMS:4000007"}, {"font": {"color": "black"}, "id": 9, "label": "ID based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000008\u0027\u003eMS:4000008"}, {"font": {"color": "black"}, "id": 10, "label": "ID free metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000009\u0027\u003eMS:4000009"}, {"font": {"color": "black"}, "id": 11, "label": "quantification based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000010\u0027\u003eMS:4000010"}, {"font": {"color": "black"}, "id": 12, "label": "single run based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000012\u0027\u003eMS:4000012"}, {"font": {"color": "black"}, "id": 13, "label": "multiple runs based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000013\u0027\u003eMS:4000013"}, {"font": {"color": "black"}, "id": 14, "label": "single spectrum based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000014\u0027\u003eMS:4000014"}, {"font": {"color": "black"}, "id": 15, "label": "multiple spectra based metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000015\u0027\u003eMS:4000015"}, {"font": {"color": "black"}, "id": 16, "label": "retention time metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000016\u0027\u003eMS:4000016"}, {"font": {"color": "black"}, "id": 17, "label": "chromatogram metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000017\u0027\u003eMS:4000017"}, {"font": {"color": "black"}, "id": 18, "label": "XIC metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000018\u0027\u003eMS:4000018"}, {"font": {"color": "black"}, "id": 19, "label": "MS metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000019\u0027\u003eMS:4000019"}, {"font": {"color": "black"}, "id": 20, "label": "ion source metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000020\u0027\u003eMS:4000020"}, {"font": {"color": "black"}, "id": 21, "label": "MS1 metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000021\u0027\u003eMS:4000021"}, {"font": {"color": "black"}, "id": 22, "label": "MS2 metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000022\u0027\u003eMS:4000022"}, {"font": {"color": "black"}, "id": 23, "label": "sample preparation metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000023\u0027\u003eMS:4000023"}, {"font": {"color": "black"}, "id": 24, "label": "environment metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000024\u0027\u003eMS:4000024"}, {"font": {"color": "black"}, "id": 25, "label": "XIC50 fraction", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000050\u0027\u003eMS:4000050"}, {"font": {"color": "black"}, "id": 26, "label": "XIC-FWHM quantiles", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000051\u0027\u003eMS:4000051"}, {"font": {"color": "black"}, "id": 27, "label": "XIC-Height quartile ratios", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000052\u0027\u003eMS:4000052"}, {"font": {"color": "black"}, "id": 28, "label": "chromatography duration", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000053\u0027\u003eMS:4000053"}, {"font": {"color": "black"}, "id": 29, "label": "TIC quarters RT fraction", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000054\u0027\u003eMS:4000054"}, {"font": {"color": "black"}, "id": 30, "label": "MS1 quarter RT fraction", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000055\u0027\u003eMS:4000055"}, {"font": {"color": "black"}, "id": 31, "label": "MS2 quarter RT fraction", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000056\u0027\u003eMS:4000056"}, {"font": {"color": "black"}, "id": 32, "label": "MS1 TIC-change quartile ratios", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000057\u0027\u003eMS:4000057"}, {"font": {"color": "black"}, "id": 33, "label": "MS1 TIC quartile ratios", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000058\u0027\u003eMS:4000058"}, {"font": {"color": "black"}, "id": 34, "label": "number of MS1 spectra", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000059\u0027\u003eMS:4000059"}, {"font": {"color": "black"}, "id": 35, "label": "number of MS2 spectra", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000060\u0027\u003eMS:4000060"}, {"font": {"color": "black"}, "id": 36, "label": "MS1 density quantiles", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000061\u0027\u003eMS:4000061"}, {"font": {"color": "black"}, "id": 37, "label": "MS2 density quantiles", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000062\u0027\u003eMS:4000062"}, {"font": {"color": "black"}, "id": 38, "label": "MS2 known precursor charges fractions", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000063\u0027\u003eMS:4000063"}, {"font": {"color": "black"}, "id": 39, "label": "MS2 unknown and likely precursor charges fractions", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000064\u0027\u003eMS:4000064"}, {"font": {"color": "black"}, "id": 40, "label": "fastest frequency for MS level 1 collection", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000065\u0027\u003eMS:4000065"}, {"font": {"color": "black"}, "id": 41, "label": "fastest frequency for MS level 2 collection", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000066\u0027\u003eMS:4000066"}, {"font": {"color": "black"}, "id": 42, "label": "MS run duration", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000067\u0027\u003eMS:4000067"}, {"font": {"color": "black"}, "id": 43, "label": "spectra half-TIC", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000068\u0027\u003eMS:4000068"}, {"font": {"color": "black"}, "id": 44, "label": "m/z acquisition range", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000069\u0027\u003eMS:4000069"}, {"font": {"color": "black"}, "id": 45, "label": "retention time acquisition range", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000070\u0027\u003eMS:4000070"}, {"font": {"color": "black"}, "id": 46, "label": "number of chromatograms", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000071\u0027\u003eMS:4000071"}, {"font": {"color": "black"}, "id": 47, "label": "observed mass accuracy", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000072\u0027\u003eMS:4000072"}, {"font": {"color": "black"}, "id": 48, "label": "QC sample metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000073\u0027\u003eMS:4000073"}, {"font": {"color": "black"}, "id": 49, "label": "high complexity QC sample metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000074\u0027\u003eMS:4000074"}, {"font": {"color": "black"}, "id": 50, "label": "low complexity QC sample metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000075\u0027\u003eMS:4000075"}, {"font": {"color": "black"}, "id": 51, "label": "QC2 sample metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000076\u0027\u003eMS:4000076"}, {"font": {"color": "black"}, "id": 52, "label": "QC1 sample metric", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000077\u0027\u003eMS:4000077"}, {"font": {"color": "black"}, "id": 53, "label": "QC2 sample mass accuracies", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000078\u0027\u003eMS:4000078"}, {"font": {"color": "black"}, "id": 54, "label": "QC2 sample intensities", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000079\u0027\u003eMS:4000079"}, {"font": {"color": "black"}, "id": 55, "label": "QC non-metric term", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000080\u0027\u003eMS:4000080"}, {"font": {"color": "black"}, "id": 56, "label": "first principal component", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000081\u0027\u003eMS:4000081"}, {"font": {"color": "black"}, "id": 57, "label": "second principal component", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000082\u0027\u003eMS:4000082"}, {"font": {"color": "black"}, "id": 58, "label": "third principal component", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000083\u0027\u003eMS:4000083"}, {"font": {"color": "black"}, "id": 59, "label": "fourth principal component", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000084\u0027\u003eMS:4000084"}, {"font": {"color": "black"}, "id": 60, "label": "fifth principal component", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000085\u0027\u003eMS:4000085"}, {"font": {"color": "black"}, "id": 61, "label": "mzQC input reference", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000086\u0027\u003eMS:4000086"}, {"font": {"color": "black"}, "id": 62, "label": "mzQC plot label", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000087\u0027\u003eMS:4000087"}, {"font": {"color": "black"}, "id": 63, "label": "batch label", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000088\u0027\u003eMS:4000088"}, {"font": {"color": "black"}, "id": 64, "label": "injection sequence label", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000089\u0027\u003eMS:4000089"}, {"font": {"color": "black"}, "id": 65, "label": "principal component analysis of MaxQuant\u0027s protein group raw intensities", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000090\u0027\u003eMS:4000090"}, {"font": {"color": "black"}, "id": 66, "label": "principal component analysis of MaxQuant\u0027s protein group lfq intensities", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000091\u0027\u003eMS:4000091"}, {"font": {"color": "black"}, "id": 67, "label": "identified MS1 feature area principal component analysis result", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000092\u0027\u003eMS:4000092"}, {"font": {"color": "black"}, "id": 68, "label": "unidentified MS1 feature area principal component analysis result", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000093\u0027\u003eMS:4000093"}, {"font": {"color": "black"}, "id": 69, "label": "batch-corrected identified MS1 feature area principal component analysis result", "shape": "dot", "title": "\u003ca href=\u0027https://www.ebi.ac.uk/ols/ontologies/ms/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMS_4000094\u0027\u003eMS:4000094"}]); | |
edges = new vis.DataSet([{"from": 25, "to": 10}, {"from": 25, "to": 12}, {"from": 26, "to": 10}, {"from": 26, "to": 12}, {"from": 26, "to": 18}, {"from": 27, "to": 10}, {"from": 27, "to": 12}, {"from": 27, "to": 18}, {"from": 28, "to": 10}, {"from": 28, "to": 12}, {"from": 28, "to": 16}, {"from": 29, "to": 10}, {"from": 29, "to": 12}, {"from": 29, "to": 16}, {"from": 29, "to": 17}, {"from": 30, "to": 10}, {"from": 30, "to": 12}, {"from": 30, "to": 16}, {"from": 30, "to": 21}, {"from": 31, "to": 10}, {"from": 31, "to": 12}, {"from": 31, "to": 16}, {"from": 31, "to": 22}, {"from": 32, "to": 10}, {"from": 32, "to": 12}, {"from": 32, "to": 17}, {"from": 32, "to": 21}, {"from": 33, "to": 10}, {"from": 33, "to": 12}, {"from": 33, "to": 17}, {"from": 33, "to": 21}, {"from": 34, "to": 10}, {"from": 34, "to": 12}, {"from": 34, "to": 21}, {"from": 35, "to": 10}, {"from": 35, "to": 12}, {"from": 35, "to": 22}, {"from": 36, "to": 10}, {"from": 36, "to": 12}, {"from": 36, "to": 21}, {"from": 37, "to": 10}, {"from": 37, "to": 12}, {"from": 37, "to": 22}, {"from": 38, "to": 10}, {"from": 38, "to": 12}, {"from": 38, "to": 20}, {"from": 38, "to": 22}, {"from": 39, "to": 10}, {"from": 39, "to": 12}, {"from": 39, "to": 20}, {"from": 39, "to": 22}, {"from": 40, "to": 10}, {"from": 40, "to": 12}, {"from": 40, "to": 21}, {"from": 41, "to": 10}, {"from": 41, "to": 12}, {"from": 41, "to": 22}, {"from": 42, "to": 10}, {"from": 42, "to": 12}, {"from": 42, "to": 19}, {"from": 43, "to": 10}, {"from": 43, "to": 22}, {"from": 43, "to": 12}, {"from": 44, "to": 10}, {"from": 44, "to": 12}, {"from": 44, "to": 19}, {"from": 45, "to": 10}, {"from": 45, "to": 12}, {"from": 45, "to": 16}, {"from": 46, "to": 10}, {"from": 46, "to": 12}, {"from": 46, "to": 17}, {"from": 47, "to": 14}, {"from": 47, "to": 9}, {"from": 47, "to": 22}, {"from": 53, "to": 51}, {"from": 53, "to": 9}, {"from": 54, "to": 51}, {"from": 54, "to": 9}, {"from": 65, "to": 9}, {"from": 65, "to": 21}, {"from": 65, "to": 13}, {"from": 66, "to": 9}, {"from": 66, "to": 21}, {"from": 66, "to": 13}, {"from": 67, "to": 9}, {"from": 67, "to": 21}, {"from": 67, "to": 13}, {"from": 68, "to": 9}, {"from": 68, "to": 21}, {"from": 68, "to": 13}, {"from": 69, "to": 9}, {"from": 69, "to": 21}, {"from": 69, "to": 13}]); | |
// adding nodes and edges to the graph | |
data = {nodes: nodes, edges: edges}; | |
var options = { | |
"configure": { | |
"enabled": false | |
}, | |
"edges": { | |
"color": { | |
"inherit": true | |
}, | |
"smooth": { | |
"enabled": true, | |
"type": "dynamic" | |
} | |
}, | |
"interaction": { | |
"dragNodes": true, | |
"hideEdgesOnDrag": false, | |
"hideNodesOnDrag": false | |
}, | |
"physics": { | |
"barnesHut": { | |
"avoidOverlap": 0, | |
"centralGravity": 0.3, | |
"damping": 0.09, | |
"gravitationalConstant": -80000, | |
"springConstant": 0.001, | |
"springLength": 250 | |
}, | |
"enabled": true, | |
"stabilization": { | |
"enabled": true, | |
"fit": true, | |
"iterations": 1000, | |
"onlyDynamicEdges": false, | |
"updateInterval": 50 | |
} | |
} | |
}; | |
network = new vis.Network(container, data, options); | |
// make a custom popup | |
var popup = document.createElement("div"); | |
popup.className = 'popup'; | |
popupTimeout = null; | |
popup.addEventListener('mouseover', function () { | |
console.log(popup) | |
if (popupTimeout !== null) { | |
clearTimeout(popupTimeout); | |
popupTimeout = null; | |
} | |
}); | |
popup.addEventListener('mouseout', function () { | |
if (popupTimeout === null) { | |
hidePopup(); | |
} | |
}); | |
container.appendChild(popup); | |
// use the popup event to show | |
network.on("showPopup", function (params) { | |
showPopup(params); | |
}); | |
// use the hide event to hide it | |
network.on("hidePopup", function (params) { | |
hidePopup(); | |
}); | |
// hiding the popup through css | |
function hidePopup() { | |
popupTimeout = setTimeout(function () { popup.style.display = 'none'; }, 500); | |
} | |
// showing the popup | |
function showPopup(nodeId) { | |
// get the data from the vis.DataSet | |
var nodeData = nodes.get(nodeId); | |
// get the position of the node | |
var posCanvas = network.getPositions([nodeId])[nodeId]; | |
if (!nodeData) { | |
var edgeData = edges.get(nodeId); | |
var poses = network.getPositions([edgeData.from, edgeData.to]); | |
var middle_x = (poses[edgeData.to].x - poses[edgeData.from].x) * 0.5; | |
var middle_y = (poses[edgeData.to].y - poses[edgeData.from].y) * 0.5; | |
posCanvas = poses[edgeData.from]; | |
posCanvas.x = posCanvas.x + middle_x; | |
posCanvas.y = posCanvas.y + middle_y; | |
popup.innerHTML = edgeData.title; | |
} else { | |
popup.innerHTML = nodeData.title; | |
// get the bounding box of the node | |
var boundingBox = network.getBoundingBox(nodeId); | |
posCanvas.x = posCanvas.x + 0.5 * (boundingBox.right - boundingBox.left); | |
posCanvas.y = posCanvas.y + 0.5 * (boundingBox.top - boundingBox.bottom); | |
}; | |
// convert coordinates to the DOM space | |
var posDOM = network.canvasToDOM(posCanvas); | |
// Give it an offset | |
posDOM.x += 10; | |
posDOM.y -= 20; | |
// show and place the tooltip. | |
popup.style.display = 'block'; | |
popup.style.top = posDOM.y + 'px'; | |
popup.style.left = posDOM.x + 'px'; | |
} | |
return network; | |
} | |
drawGraph(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A result from my q-n-d code-dump here. You need to zoom to see the labels.