Mercurial > repos > dereeper > cytoscape

comparison test-data/network.html @ 0:e3beb33f88f0 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:02:10 -0400
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:e3beb33f88f0
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 'pie-0-background-color': '#ed292a',
39 'pie-0-background-size': 'mapData(group0, 0, 10, 0, 100)',
40 'pie-1-background-color': '#ed292a',
41 'pie-1-background-size': 'mapData(group1, 0, 10, 0, 100)',
42 'pie-2-background-color': '#82ABA0',
43 'pie-2-background-size': 'mapData(group2, 0, 10, 0, 100)',
44 'pie-3-background-color': '#2255a6',
45 'pie-3-background-size': 'mapData(group3, 0, 10, 0, 100)',
46 'pie-4-background-color': '#6ebe43',
47 'pie-4-background-size': 'mapData(group4, 0, 10, 0, 100)',
48 'pie-5-background-color': '#e76599',
49 'pie-5-background-size': 'mapData(group5, 0, 10, 0, 100)',
50 'pie-6-background-color': '#662e91',
51 'pie-6-background-size': 'mapData(group6, 0, 10, 0, 100)',
52 'pie-7-background-color': '#c180ff',
53 'pie-7-background-size': 'mapData(group7, 0, 10, 0, 100)',
54 'pie-8-background-color': '#ea8b2f',
55 'pie-8-background-size': 'mapData(group8, 0, 10, 0, 100)',
56 'pie-9-background-color': '#fff100',
57 'pie-9-background-size': 'mapData(group9, 0, 10, 0, 100)',
58 'pie-10-background-color': '#666666',
59 'pie-10-background-size': 'mapData(group10, 0, 10, 0, 100)',
60 'pie-11-background-color': '#01ffff',
61 'pie-11-background-size': 'mapData(group11, 0, 10, 0, 100)',
62 'pie-12-background-color': '#bfbfbf',
63 'pie-12-background-size': 'mapData(group12, 0, 10, 0, 100)',
64 'pie-13-background-color': '#2ac966',
65 'pie-13-background-size': 'mapData(group13, 0, 10, 0, 100)',
66 'pie-14-background-color': '#666666',
67 'pie-14-background-size': 'mapData(group14, 0, 10, 0, 100)',
68 'pie-15-background-color': '',
69 'pie-15-background-size': 'mapData(group15, 0, 10, 0, 100)',
70
71 }),
72 "elements": {"nodes": [{ "data": { "id": "MV1", "width": 0.1} },
73 { "data": { "id": "MV2", "width": 0.1} },
74 { "data": { "id": "MV3", "width": 0.1} },
75 { "data": { "id": "haplo1", "width": 1.2000000000000002 } },
76 { "data": { "id": "haplo2", "width": 0.8 } },
77 { "data": { "id": "haplo3", "width": 5.0 } },
78 { "data": { "id": "haplo4", "width": 0.8 } },
79 { "data": { "id": "haplo5", "width": 0.8 } },
80 { "data": { "id": "haplo6", "width": 0.8 } },
81 { "data": { "id": "haplo7", "width": 0.8 } },
82 { "data": { "id": "haplo8", "width": 0.8 } }],
83 "edges": [
84 { "data": { "id": "haplo4MV1", "weight": 1, "source": "haplo4", "target": "MV1"} },
85 { "data": { "id": "haplo3haplo4", "weight": 1, "source": "haplo3", "target": "haplo4"} },
86 { "data": { "id": "haplo4haplo6", "weight": 1, "source": "haplo4", "target": "haplo6"} },
87 { "data": { "id": "haplo1MV1", "weight": 1, "source": "haplo1", "target": "MV1"} },
88 { "data": { "id": "haplo1haplo2", "weight": 1, "source": "haplo1", "target": "haplo2"} },
89 { "data": { "id": "haplo7MV2", "weight": 1, "source": "haplo7", "target": "MV2"} },
90 { "data": { "id": "MV2MV3", "weight": 1, "source": "MV2", "target": "MV3"} },
91 { "data": { "id": "haplo5MV3", "weight": 1, "source": "haplo5", "target": "MV3"} },
92 { "data": { "id": "MV1MV2", "weight": 1, "source": "MV1", "target": "MV2"} },
93 { "data": { "id": "haplo8MV3", "weight": 1, "source": "haplo8", "target": "MV3"} }]}
94 ,
95 layout: {
96 name: 'cose',
97 padding: 10
98 },
99
100 ready: function(){
101 window.cy = this;
102 }
103 });
104
105 });
106
107 </script>
108 </head>
109 <body>
110 <div id="cy">
111 </div>