Skip to content

Instantly share code, notes, and snippets.

@RafaelCosman

RafaelCosman/index.html

Created April 22, 2015 19:44
Show Gist options
  • Save RafaelCosman/55d76414a5c553e233e4 to your computer and use it in GitHub Desktop.
Save RafaelCosman/55d76414a5c553e233e4 to your computer and use it in GitHub Desktop.
Download ZIP
Cytoscape.js initialisation // source http://jsbin.com/naboxejebo
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://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: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.highlighted')
.css({
'background-color': '#61bf0c',
'line-color': '#f1bffc',
'target-arrow-color': '#61bffc',
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
}),
elements: {
nodes: [
{ data: { id: 'if' } },
{ data: { id: 'while' } },
{ data: { id: 'functions' } },
{ data: { id: 'for' } },
{ data: { id: 'Games on KA' } },
{ data: { id: 'if Challenge 1' } },
{ data: { id: 'if Challenge 2' } },
{ data: { id: 'if Challenge 3' } }
],
edges: [
{ data: { id: 'ab', weight: 3, source: 'if', target: 'while' } },
{ data: { id: 'be', weight: 4, source: 'while', target: 'functions' } },
{ data: { id: 'bc', weight: 5, source: 'while', target: 'for' } },
{ data: { id: 'ce', weight: 6, source: 'functions', target: 'Games on KA' } },
{ data: { id: '1', weight: 6, source: 'if', target: 'if Challenge 1' } },
{ data: { id: '2', weight: 6, source: 'if', target: 'if Challenge 2' } },
{ data: { id: '3', weight: 6, source: 'if', target: 'if Challenge 3' } }
]
},
layout: {
name: 'preset',
positions: {'if': {x: 300, y:100},
'while': {x: 300, y:200},
'for': {x: 200, y:300},
'functions': {x: 300, y:300},
'Games on KA': {x: 300, y:400},
'if Challenge 1': {x: 200, y:80},
'if Challenge 2': {x: 200, y:100},
'if Challenge 3': {x: 200, y:120}},
directed: true,
padding: 20
}
});
cy.zoomingEnabled(false);
cy.panningEnabled(false);
/*
cy.on('click', '#if Challenge 1', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
window.open("http://www.w3schools.com");
});
cy.on('click', '#if Challenge 2', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
window.open("http://www.w3schools.com");
});
cy.on('click', '#if Challenge 3', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
window.open("http://www.w3schools.com");
});
cy.on('click', '#if', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
cy.elements('#if').chidren().hide();
});
*/
//TODO disable dragging
}); // 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: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.highlighted')
.css({
'background-color': '#61bf0c',
'line-color': '#f1bffc',
'target-arrow-color': '#61bffc',
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
}),
elements: {
nodes: [
{ data: { id: 'if' } },
{ data: { id: 'while' } },
{ data: { id: 'functions' } },
{ data: { id: 'for' } },
{ data: { id: 'Games on KA' } },
{ data: { id: 'if Challenge 1' } },
{ data: { id: 'if Challenge 2' } },
{ data: { id: 'if Challenge 3' } }
],
edges: [
{ data: { id: 'ab', weight: 3, source: 'if', target: 'while' } },
{ data: { id: 'be', weight: 4, source: 'while', target: 'functions' } },
{ data: { id: 'bc', weight: 5, source: 'while', target: 'for' } },
{ data: { id: 'ce', weight: 6, source: 'functions', target: 'Games on KA' } },
{ data: { id: '1', weight: 6, source: 'if', target: 'if Challenge 1' } },
{ data: { id: '2', weight: 6, source: 'if', target: 'if Challenge 2' } },
{ data: { id: '3', weight: 6, source: 'if', target: 'if Challenge 3' } }
]
},
layout: {
name: 'preset',
positions: {'if': {x: 300, y:100},
'while': {x: 300, y:200},
'for': {x: 200, y:300},
'functions': {x: 300, y:300},
'Games on KA': {x: 300, y:400},
'if Challenge 1': {x: 200, y:80},
'if Challenge 2': {x: 200, y:100},
'if Challenge 3': {x: 200, y:120}},
directed: true,
padding: 20
}
});
cy.zoomingEnabled(false);
cy.panningEnabled(false);
/*
cy.on('click', '#if Challenge 1', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
window.open("http://www.w3schools.com");
});
cy.on('click', '#if Challenge 2', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
window.open("http://www.w3schools.com");
});
cy.on('click', '#if Challenge 3', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
window.open("http://www.w3schools.com");
});
cy.on('click', '#if', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
cy.elements('#if').chidren().hide();
});
*/
//TODO disable dragging
}); // on dom ready</script></body>
</html>
Raw
jsbin.naboxejebo.css
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
Raw
jsbin.naboxejebo.js
$(function(){ // on dom ready
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.highlighted')
.css({
'background-color': '#61bf0c',
'line-color': '#f1bffc',
'target-arrow-color': '#61bffc',
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
}),
elements: {
nodes: [
{ data: { id: 'if' } },
{ data: { id: 'while' } },
{ data: { id: 'functions' } },
{ data: { id: 'for' } },
{ data: { id: 'Games on KA' } },
{ data: { id: 'if Challenge 1' } },
{ data: { id: 'if Challenge 2' } },
{ data: { id: 'if Challenge 3' } }
],
edges: [
{ data: { id: 'ab', weight: 3, source: 'if', target: 'while' } },
{ data: { id: 'be', weight: 4, source: 'while', target: 'functions' } },
{ data: { id: 'bc', weight: 5, source: 'while', target: 'for' } },
{ data: { id: 'ce', weight: 6, source: 'functions', target: 'Games on KA' } },
{ data: { id: '1', weight: 6, source: 'if', target: 'if Challenge 1' } },
{ data: { id: '2', weight: 6, source: 'if', target: 'if Challenge 2' } },
{ data: { id: '3', weight: 6, source: 'if', target: 'if Challenge 3' } }
]
},
layout: {
name: 'preset',
positions: {'if': {x: 300, y:100},
'while': {x: 300, y:200},
'for': {x: 200, y:300},
'functions': {x: 300, y:300},
'Games on KA': {x: 300, y:400},
'if Challenge 1': {x: 200, y:80},
'if Challenge 2': {x: 200, y:100},
'if Challenge 3': {x: 200, y:120}},
directed: true,
padding: 20
}
});
cy.zoomingEnabled(false);
cy.panningEnabled(false);
/*
cy.on('click', '#if Challenge 1', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
window.open("http://www.w3schools.com");
});
cy.on('click', '#if Challenge 2', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
window.open("http://www.w3schools.com");
});
cy.on('click', '#if Challenge 3', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
window.open("http://www.w3schools.com");
});
cy.on('click', '#if', function(evt){
console.log( 'tap ' + evt.cyTarget.id() );
cy.elements('#if').chidren().hide();
});
*/
//TODO disable dragging
}); // on dom ready
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment