Mercurial > repos > dereeper > haplophyle
diff test-data/cytoscape.html @ 0:6f11162b6fa2 draft
planemo upload commit 11382afe87364aaafb19973470d5066229a6e34f
author | dereeper |
---|---|
date | Tue, 14 Aug 2018 08:04:23 -0400 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/test-data/cytoscape.html Tue Aug 14 08:04:23 2018 -0400 @@ -0,0 +1,84 @@ +<!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%', + + }), +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: 'haplo7MV2', weight: 1, source: 'haplo7', target: 'MV2'} }, +{ data: { id: 'haplo4haplo6', weight: 1, source: 'haplo4', target: 'haplo6'} }, +{ data: { id: 'haplo1haplo2', weight: 1, source: 'haplo1', target: 'haplo2'} }, +{ data: { id: 'haplo1MV1', weight: 1, source: 'haplo1', target: 'MV1'} }, +{ data: { id: 'haplo4MV1', weight: 1, source: 'haplo4', target: 'MV1'} }, +{ data: { id: 'haplo3haplo4', weight: 1, source: 'haplo3', target: 'haplo4'} }, +{ 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>