Mercurial > repos > dereeper > cytoscape

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="http://sniplay.southgreen.fr/cytoscape/Pie_style/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Pie style</title>
<script src="http://sniplay.southgreen.fr/cytoscape/Pie_style/jquery.js"></script>
<script src="http://sniplay.southgreen.fr/cytoscape/Pie_style/cytoscape.js"></script>
<script type="text/javascript">
$(function(){ // on dom ready

$('#cy').cytoscape({

  style: cytoscape.stylesheet()
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'opacity': 1
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      })
    .selector('edge')
      .css({
                'width': 1,
                'line-color': 'black',
      })
    .selector('node')
      .css({
        'width': 'mapData(width, 0, 10, 0, 100)',
        'height': 'mapData(width, 0, 10, 0, 100)',
        'content': 'data(id)',
        'pie-size': '98%',
        'pie-0-background-color': '#ed292a',
'pie-0-background-size': 'mapData(group0, 0, 10, 0, 100)',
'pie-1-background-color': '#ed292a',
'pie-1-background-size': 'mapData(group1, 0, 10, 0, 100)',
'pie-2-background-color': '#82ABA0',
'pie-2-background-size': 'mapData(group2, 0, 10, 0, 100)',
'pie-3-background-color': '#2255a6',
'pie-3-background-size': 'mapData(group3, 0, 10, 0, 100)',
'pie-4-background-color': '#6ebe43',
'pie-4-background-size': 'mapData(group4, 0, 10, 0, 100)',
'pie-5-background-color': '#e76599',
'pie-5-background-size': 'mapData(group5, 0, 10, 0, 100)',
'pie-6-background-color': '#662e91',
'pie-6-background-size': 'mapData(group6, 0, 10, 0, 100)',
'pie-7-background-color': '#c180ff',
'pie-7-background-size': 'mapData(group7, 0, 10, 0, 100)',
'pie-8-background-color': '#ea8b2f',
'pie-8-background-size': 'mapData(group8, 0, 10, 0, 100)',
'pie-9-background-color': '#fff100',
'pie-9-background-size': 'mapData(group9, 0, 10, 0, 100)',
'pie-10-background-color': '#666666',
'pie-10-background-size': 'mapData(group10, 0, 10, 0, 100)',
'pie-11-background-color': '#01ffff',
'pie-11-background-size': 'mapData(group11, 0, 10, 0, 100)',
'pie-12-background-color': '#bfbfbf',
'pie-12-background-size': 'mapData(group12, 0, 10, 0, 100)',
'pie-13-background-color': '#2ac966',
'pie-13-background-size': 'mapData(group13, 0, 10, 0, 100)',
'pie-14-background-color': '#666666',
'pie-14-background-size': 'mapData(group14, 0, 10, 0, 100)',
'pie-15-background-color': '',
'pie-15-background-size': 'mapData(group15, 0, 10, 0, 100)',

      }),
"elements": {"nodes": [{ "data": { "id": "MV1", "width": 0.1} },
{ "data": { "id": "MV2", "width": 0.1} },
{ "data": { "id": "MV3", "width": 0.1} },
{ "data": { "id": "haplo1", "width": 1.2000000000000002 } },
{ "data": { "id": "haplo2", "width": 0.8 } },
{ "data": { "id": "haplo3", "width": 5.0 } },
{ "data": { "id": "haplo4", "width": 0.8 } },
{ "data": { "id": "haplo5", "width": 0.8 } },
{ "data": { "id": "haplo6", "width": 0.8 } },
{ "data": { "id": "haplo7", "width": 0.8 } },
{ "data": { "id": "haplo8", "width": 0.8 } }],
"edges": [
{ "data": { "id": "haplo4MV1", "weight": 1, "source": "haplo4", "target": "MV1"} },
{ "data": { "id": "haplo3haplo4", "weight": 1, "source": "haplo3", "target": "haplo4"} },
{ "data": { "id": "haplo4haplo6", "weight": 1, "source": "haplo4", "target": "haplo6"} },
{ "data": { "id": "haplo1MV1", "weight": 1, "source": "haplo1", "target": "MV1"} },
{ "data": { "id": "haplo1haplo2", "weight": 1, "source": "haplo1", "target": "haplo2"} },
{ "data": { "id": "haplo7MV2", "weight": 1, "source": "haplo7", "target": "MV2"} },
{ "data": { "id": "MV2MV3", "weight": 1, "source": "MV2", "target": "MV3"} },
{ "data": { "id": "haplo5MV3", "weight": 1, "source": "haplo5", "target": "MV3"} },
{ "data": { "id": "MV1MV2", "weight": 1, "source": "MV1", "target": "MV2"} },
{ "data": { "id": "haplo8MV3", "weight": 1, "source": "haplo8", "target": "MV3"} }]}
  ,
layout: {
        name: 'cose',
    padding: 10
  },

  ready: function(){
    window.cy = this;
  }
});

});

</script>
</head>
<body>
<div id="cy">
</div>
author	dereeper
date	Tue, 14 Aug 2018 08:02:10 -0400
parents
children