Mercurial > repos > dereeper > haplophyle

comparison test-data/cytoscape.html @ 0:6f11162b6fa2 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
planemo upload commit 11382afe87364aaafb19973470d5066229a6e34f
author dereeper
date Tue, 14 Aug 2018 08:04:23 -0400
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:6f11162b6fa2
1 <!DOCTYPE html>
2 <html><head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <link href="http://sniplay.southgreen.fr/cytoscape/Pie_style/style.css" rel="stylesheet">
5 <meta charset="utf-8">
6 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
7 <title>Pie style</title>
8 <script src="http://sniplay.southgreen.fr/cytoscape/Pie_style/jquery.js"></script>
9 <script src="http://sniplay.southgreen.fr/cytoscape/Pie_style/cytoscape.js"></script>
10 <script type="text/javascript">
11 $(function(){ // on dom ready
12
13 $('#cy').cytoscape({
14
15 style: cytoscape.stylesheet()
16 .selector(':selected')
17 .css({
18 'background-color': 'black',
19 'line-color': 'black',
20 'opacity': 1
21 })
22 .selector('.faded')
23 .css({
24 'opacity': 0.25,
25 'text-opacity': 0
26 })
27 .selector('edge')
28 .css({
29 'width': 1,
30 'line-color': 'black',
31 })
32 .selector('node')
33 .css({
34 'width': 'mapData(width, 0, 10, 0, 100)',
35 'height': 'mapData(width, 0, 10, 0, 100)',
36 'content': 'data(id)',
37 'pie-size': '98%',
38
39 }),
40 elements: {
41 nodes: [
42 { data: { id: 'MV1', width: 0.1} },
43 { data: { id: 'MV2', width: 0.1} },
44 { data: { id: 'MV3', width: 0.1} },
45 { data: { id: 'haplo1', width: 1.2000000000000002 } },
46 { data: { id: 'haplo2', width: 0.8 } },
47 { data: { id: 'haplo3', width: 5.0 } },
48 { data: { id: 'haplo4', width: 0.8 } },
49 { data: { id: 'haplo5', width: 0.8 } },
50 { data: { id: 'haplo6', width: 0.8 } },
51 { data: { id: 'haplo7', width: 0.8 } },
52 { data: { id: 'haplo8', width: 0.8 } },
53 ],
54 edges: [
55 { data: { id: 'haplo7MV2', weight: 1, source: 'haplo7', target: 'MV2'} },
56 { data: { id: 'haplo4haplo6', weight: 1, source: 'haplo4', target: 'haplo6'} },
57 { data: { id: 'haplo1haplo2', weight: 1, source: 'haplo1', target: 'haplo2'} },
58 { data: { id: 'haplo1MV1', weight: 1, source: 'haplo1', target: 'MV1'} },
59 { data: { id: 'haplo4MV1', weight: 1, source: 'haplo4', target: 'MV1'} },
60 { data: { id: 'haplo3haplo4', weight: 1, source: 'haplo3', target: 'haplo4'} },
61 { data: { id: 'MV2MV3', weight: 1, source: 'MV2', target: 'MV3'} },
62 { data: { id: 'haplo5MV3', weight: 1, source: 'haplo5', target: 'MV3'} },
63 { data: { id: 'MV1MV2', weight: 1, source: 'MV1', target: 'MV2'} },
64 { data: { id: 'haplo8MV3', weight: 1, source: 'haplo8', target: 'MV3'} },
65
66 ]
67 },
68 layout: {
69 name: 'cose',
70 padding: 10
71 },
72
73 ready: function(){
74 window.cy = this;
75 }
76 });
77
78 });
79
80 </script>
81 </head>
82 <body>
83 <div id="cy">
84 </div>