Mercurial > repos > dereeper > haplophyle
comparison test-data/cytoscape.html @ 0:6f11162b6fa2 draft
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> |