Skip to content

Instantly share code, notes, and snippets.

@hekike

hekike/index.html

Created March 29, 2015 14:06
Show Gist options
  • Save hekike/434727ac60fccd4d937b to your computer and use it in GitHub Desktop.
Save hekike/434727ac60fccd4d937b to your computer and use it in GitHub Desktop.
Download ZIP
Cytoscape.js initialisation // source http://jsbin.com/xirukoluvi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/springy/2.5.0/springy.min.js"></script>
<script src="https://rawgit.com/cpettitt/dagre/master/dist/dagre.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="code.js"></script>
<style id="jsbin-css">
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="cy"></div>
<script id="jsbin-javascript">
$(function(){ // on dom ready
var cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [
{ data: { id: 'user' } },
{ data: { id: '1' } },
{ data: { id: '1.req', parent: '1' } },
{ data: { id: '1.res', parent: '1' } },
{ data: { id: '1.1', parent: '1' } },
{ data: { id: '1.1.req', parent: '1.1' } },
{ data: { id: '1.1.res', parent: '1.1' } },
{ data: { id: '1.2', parent: '1' } },
{ data: { id: '1.2.req', parent: '1.2' } },
{ data: { id: '1.2.res', parent: '1.2' } },
{ data: { id: '2' } },
{ data: { id: '2.req', parent: '2' } },
{ data: { id: '2.res', parent: '2' } },
{ data: { id: '2.1', parent: '2' } },
{ data: { id: '2.1.req', parent: '2.1' } },
{ data: { id: '2.1.res', parent: '2.1' } },
{ data: { id: '2.2', parent: '2' } },
{ data: { id: '2.2.req', parent: '2.2' } },
{ data: { id: '2.2.res', parent: '2.2' } },
{ data: { id: '3' } },
{ data: { id: '3.req', parent: '3' } },
{ data: { id: '3.res', parent: '3' } },
{ data: { id: '4' } },
{ data: { id: '4.req', parent: '4' } },
{ data: { id: '4.res', parent: '4' } },
],
edges: [
{ data: { id: 'uto1', source: 'user', target: '1.req' } },
{ data: { id: '1to1.1', source: '1.req', target: '1.1.req' } },
// req left
{ data: { id: '1to2', source: '1.1.req', target: '2.req' } },
{ data: { id: '2to2.1', source: '2.req', target: '2.1.req' } },
{ data: { id: '2to3', source: '2.1.req', target: '3.req' } },
{ data: { id: '3to3', source: '3.req', target: '3.res' } },
// res left
{ data: { id: '3to2', source: '3.res', target: '2.1.res' } },
{ data: { id: '2to2', source: '2.1.res', target: '2.res' } },
{ data: { id: '2to1', source: '2.res', target: '1.1.res' } },
{ data: { id: '1.1to1', source: '1.1.res', target: '1.res' } },
{ data: { id: '1tou', source: '1.res', target: 'user' } },
// req right
{ data: { id: '1to4', source: '1.2.req', target: '4.req' } },
{ data: { id: '4to4', source: '4.req', target: '4.res' } },
{ data: { id: '4to1', source: '4.res', target: '1.2.res' } },
{ data: { id: '1.2to1', source: '1.2.res', target: '1.res' } },
]
},
layout: {
name: 'cose',
nestingFactor: 1,
fit: true,
nodeRepulsion: 700000
}
});
}); // on dom ready
</script>
<script id="jsbin-source-css" type="text/css">body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(function(){ // on dom ready
var cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [
{ data: { id: 'user' } },
{ data: { id: '1' } },
{ data: { id: '1.req', parent: '1' } },
{ data: { id: '1.res', parent: '1' } },
{ data: { id: '1.1', parent: '1' } },
{ data: { id: '1.1.req', parent: '1.1' } },
{ data: { id: '1.1.res', parent: '1.1' } },
{ data: { id: '1.2', parent: '1' } },
{ data: { id: '1.2.req', parent: '1.2' } },
{ data: { id: '1.2.res', parent: '1.2' } },
{ data: { id: '2' } },
{ data: { id: '2.req', parent: '2' } },
{ data: { id: '2.res', parent: '2' } },
{ data: { id: '2.1', parent: '2' } },
{ data: { id: '2.1.req', parent: '2.1' } },
{ data: { id: '2.1.res', parent: '2.1' } },
{ data: { id: '2.2', parent: '2' } },
{ data: { id: '2.2.req', parent: '2.2' } },
{ data: { id: '2.2.res', parent: '2.2' } },
{ data: { id: '3' } },
{ data: { id: '3.req', parent: '3' } },
{ data: { id: '3.res', parent: '3' } },
{ data: { id: '4' } },
{ data: { id: '4.req', parent: '4' } },
{ data: { id: '4.res', parent: '4' } },
],
edges: [
{ data: { id: 'uto1', source: 'user', target: '1.req' } },
{ data: { id: '1to1.1', source: '1.req', target: '1.1.req' } },
// req left
{ data: { id: '1to2', source: '1.1.req', target: '2.req' } },
{ data: { id: '2to2.1', source: '2.req', target: '2.1.req' } },
{ data: { id: '2to3', source: '2.1.req', target: '3.req' } },
{ data: { id: '3to3', source: '3.req', target: '3.res' } },
// res left
{ data: { id: '3to2', source: '3.res', target: '2.1.res' } },
{ data: { id: '2to2', source: '2.1.res', target: '2.res' } },
{ data: { id: '2to1', source: '2.res', target: '1.1.res' } },
{ data: { id: '1.1to1', source: '1.1.res', target: '1.res' } },
{ data: { id: '1tou', source: '1.res', target: 'user' } },
// req right
{ data: { id: '1to4', source: '1.2.req', target: '4.req' } },
{ data: { id: '4to4', source: '4.req', target: '4.res' } },
{ data: { id: '4to1', source: '4.res', target: '1.2.res' } },
{ data: { id: '1.2to1', source: '1.2.res', target: '1.res' } },
]
},
layout: {
name: 'cose',
nestingFactor: 1,
fit: true,
nodeRepulsion: 700000
}
});
}); // on dom ready</script></body>
</html>
Raw
jsbin.xirukoluvi.css
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
Raw
jsbin.xirukoluvi.js
$(function(){ // on dom ready
var cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [
{ data: { id: 'user' } },
{ data: { id: '1' } },
{ data: { id: '1.req', parent: '1' } },
{ data: { id: '1.res', parent: '1' } },
{ data: { id: '1.1', parent: '1' } },
{ data: { id: '1.1.req', parent: '1.1' } },
{ data: { id: '1.1.res', parent: '1.1' } },
{ data: { id: '1.2', parent: '1' } },
{ data: { id: '1.2.req', parent: '1.2' } },
{ data: { id: '1.2.res', parent: '1.2' } },
{ data: { id: '2' } },
{ data: { id: '2.req', parent: '2' } },
{ data: { id: '2.res', parent: '2' } },
{ data: { id: '2.1', parent: '2' } },
{ data: { id: '2.1.req', parent: '2.1' } },
{ data: { id: '2.1.res', parent: '2.1' } },
{ data: { id: '2.2', parent: '2' } },
{ data: { id: '2.2.req', parent: '2.2' } },
{ data: { id: '2.2.res', parent: '2.2' } },
{ data: { id: '3' } },
{ data: { id: '3.req', parent: '3' } },
{ data: { id: '3.res', parent: '3' } },
{ data: { id: '4' } },
{ data: { id: '4.req', parent: '4' } },
{ data: { id: '4.res', parent: '4' } },
],
edges: [
{ data: { id: 'uto1', source: 'user', target: '1.req' } },
{ data: { id: '1to1.1', source: '1.req', target: '1.1.req' } },
// req left
{ data: { id: '1to2', source: '1.1.req', target: '2.req' } },
{ data: { id: '2to2.1', source: '2.req', target: '2.1.req' } },
{ data: { id: '2to3', source: '2.1.req', target: '3.req' } },
{ data: { id: '3to3', source: '3.req', target: '3.res' } },
// res left
{ data: { id: '3to2', source: '3.res', target: '2.1.res' } },
{ data: { id: '2to2', source: '2.1.res', target: '2.res' } },
{ data: { id: '2to1', source: '2.res', target: '1.1.res' } },
{ data: { id: '1.1to1', source: '1.1.res', target: '1.res' } },
{ data: { id: '1tou', source: '1.res', target: 'user' } },
// req right
{ data: { id: '1to4', source: '1.2.req', target: '4.req' } },
{ data: { id: '4to4', source: '4.req', target: '4.res' } },
{ data: { id: '4to1', source: '4.res', target: '1.2.res' } },
{ data: { id: '1.2to1', source: '1.2.res', target: '1.res' } },
]
},
layout: {
name: 'cose',
nestingFactor: 1,
fit: true,
nodeRepulsion: 700000
}
});
}); // on dom ready
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment