clusters from curated clusters

NCBI-Codeathons · Feb 29, 2024 · 8c49cd6 · 8c49cd6
1 parent 4ac3dd3
commit 8c49cd6
Show file tree

Hide file tree

Showing 8 changed files with 425 additions and 425 deletions.
diff --git a/assets/interactive_KCNQ1_clusters.html b/assets/interactive_KCNQ1_clusters.html
diff --git a/assets/interactive_KCNQ1_clusters_curated.html b/assets/interactive_KCNQ1_clusters_curated.html
@@ -0,0 +1,127 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+
+            <script src="lib/bindings/utils.js"></script>
+            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>-->
+        <link
+          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
+          crossorigin="anonymous"
+        />
+        <script
+          src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+          integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
+          crossorigin="anonymous"
+        ></script>
+
+
+        <center>
+          <h1></h1>
+        </center>
+        <style type="text/css">
+
+             #mynetwork {
+                 width: 100%;
+                 height: 1000px;
+                 background-color: #ffffff;
+                 border: 1px solid lightgray;
+                 position: relative;
+                 float: left;
+             }
+
+
+
+
+
+
+        </style>
+    </head>
+
+
+    <body>
+        <div class="card" style="width: 100%">
+
+
+            <div id="mynetwork" class="card-body"></div>
+        </div>
+
+
+
+
+        <script type="text/javascript">
+
+              // initialize global variables.
+              var edges;
+              var nodes;
+              var allNodes;
+              var allEdges;
+              var nodeColors;
+              var originalNodes;
+              var network;
+              var container;
+              var options, data;
+              var filter = {
+                  item : '',
+                  property : '',
+                  value : []
+              };
+
+
+
+
+
+              // 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([{"color": "lightgrey", "id": 0, "label": "Hearing impairment", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 1, "label": "Cardiovascular phenotype", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 2, "label": "SUDDEN INFANT DEATH SYNDROME", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 3, "label": "not specified", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 4, "label": "See cases", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 5, "label": "Beckwith-Wiedemann syndrome", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 6, "label": "Abnormal nostril morphology", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 7, "label": "Decreased fetal movement", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 8, "label": "Cardiac arrhythmia", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 9, "label": "Conduction disorder of the heart", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 10, "label": "Inborn genetic diseases", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 11, "label": "Secondary microcephaly", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 12, "label": "Wolff-Parkinson-White pattern", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 13, "label": "Cardiomyopathy", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 14, "label": "High palate", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 15, "label": "Rare genetic deafness", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 16, "label": "Enlarged naris", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 17, "label": "Primary microcephaly", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 18, "label": "Hypertrophic cardiomyopathy", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 19, "label": "Prolonged QT interval", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 20, "label": "Abnormality of the cardiovascular system", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 21, "label": "Torsades de pointes", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 22, "label": "not provided", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 23, "label": "Abnormal cerebral white matter morphology", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 24, "label": "Diffuse white matter abnormalities", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 25, "label": "Recurrent spontaneous abortion", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 26, "label": "Toe clinodactyly", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 27, "label": "Polyhydramnios", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 28, "label": "Ear malformation", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 29, "label": "Long QT syndrome 1/2, digenic", "shape": "dot", "size": 20}, {"color": "lightgrey", "id": 30, "label": "Long QT syndrome 2", "shape": "dot", "size": 20}, {"color": "lightblue", "id": "A", "label": "Group A", "shape": "dot", "size": 60}, {"color": "lightgreen", "id": 31, "label": "Long QT syndrome 1", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 32, "label": "Long QT syndrome", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 33, "label": "Acquired susceptibility to long QT syndrome 1", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 34, "label": "Congenital long QT syndrome", "shape": "dot", "size": 40}, {"color": "lightblue", "id": "B", "label": "Group B", "shape": "dot", "size": 60}, {"color": "lightgreen", "id": 35, "label": "Generalized hypotonia", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 36, "label": "Generalized neonatal hypotonia", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 37, "label": "Neonatal hypotonia", "shape": "dot", "size": 40}, {"color": "lightblue", "id": "C", "label": "Group C", "shape": "dot", "size": 60}, {"color": "lightgreen", "id": 38, "label": "KCNQ1-related condition", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 39, "label": "KCNQ1-Related Disorders", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 40, "label": "Autosomal dominant KCNQ1-related disease", "shape": "dot", "size": 40}, {"color": "lightblue", "id": "D", "label": "Group D", "shape": "dot", "size": 60}, {"color": "lightgreen", "id": 41, "label": "Atrial fibrillation, familial, 3", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 42, "label": "Familial atrial fibrillation", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 43, "label": "Atrial fibrillation", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 44, "label": "Ventricular fibrillation", "shape": "dot", "size": 40}, {"color": "lightblue", "id": "E", "label": "Group E", "shape": "dot", "size": 60}, {"color": "lightgreen", "id": 45, "label": "Long QT syndrome 1, recessive", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 46, "label": "Jervell and Lange-Nielsen syndrome", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 47, "label": "Jervell and Lange-Nielsen syndrome 1", "shape": "dot", "size": 40}, {"color": "lightblue", "id": "F", "label": "Group F", "shape": "dot", "size": 60}, {"color": "lightgreen", "id": 48, "label": "Short QT syndrome type 2", "shape": "dot", "size": 40}, {"color": "lightgreen", "id": 49, "label": "Short QT syndrome", "shape": "dot", "size": 40}]);
+                  edges = new vis.DataSet([{"from": "A", "to": 31}, {"from": "A", "to": 32}, {"from": "A", "to": 33}, {"from": "A", "to": 34}, {"from": "B", "to": 35}, {"from": "B", "to": 36}, {"from": "B", "to": 37}, {"from": "C", "to": 38}, {"from": "C", "to": 39}, {"from": "C", "to": 40}, {"from": "D", "to": 41}, {"from": "D", "to": 42}, {"from": "D", "to": 43}, {"from": "D", "to": 44}, {"from": "E", "to": 45}, {"from": "E", "to": 46}, {"from": "E", "to": 47}, {"from": "F", "to": 48}, {"from": "F", "to": 49}]);
+
+                  nodeColors = {};
+                  allNodes = nodes.get({ returnType: "Object" });
+                  for (nodeId in allNodes) {
+                    nodeColors[nodeId] = allNodes[nodeId].color;
+                  }
+                  allEdges = edges.get({ returnType: "Object" });
+                  // adding nodes and edges to the graph
+                  data = {nodes: nodes, edges: edges};
+
+                  var options = {"nodes": {"font": {"size": 36}}, "edges": {"color": {"inherit": true}, "smooth": false}, "physics": {"forceAtlas2Based": {"gravitationalConstant": -250, "centralGravity": 0.005, "springLength": 230, "springConstant": 0.18}, "maxVelocity": 146, "solver": "forceAtlas2Based", "timestep": 0.35, "stabilization": {"iterations": 150}}};
+
+
+
+
+
+
+                  network = new vis.Network(container, data, options);
+
+
+
+
+
+
+
+
+
+
+                  return network;
+
+              }
+              drawGraph();
+        </script>
+    </body>
+</html>