Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 10, 2015 08:29
Show Gist options
  • Save anonymous/7ab0207da06f4ee59310 to your computer and use it in GitHub Desktop.
Save anonymous/7ab0207da06f4ee59310 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Generic starter Cytoscape graph // source http://jsbin.com/mojuda
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Generic starter Cytoscape graph">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.4.4/cytoscape.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#cyto{
width:300px;height:300px;
}
#addNode {
background-color:crimson;
color:#fff;
border:0;
border-radius:4px;
padding:1em;
}
</style>
</head>
<body>
<div id="cyto">
</div>
<script id="jsbin-javascript">
//init the graph
document.addEventListener('DOMContentLoaded', function() {
cy = cytoscape({
container: document.getElementById('cyto'),
layout: { name: 'cose'},
elements: [
{
group: 'nodes',
data : {id : 'testnode'}
},{
group: 'nodes',
data : {id : 'testnode2'}
},{
group: 'nodes',
data : {id : 'testnode3'}
},{
group: 'edges',
data : {
id : 'edge1',
source: 'testnode',
target: 'testnode3'
}
},{
group: 'edges',
data : {
id : 'edge2',
source: 'testnode',
target: 'testnode2'
}
}
],
ready: function(){
window.cy = this;
}
});
}, false);
</script>
<script id="jsbin-source-css" type="text/css">#cyto{
width:300px;height:300px;
}
#addNode {
background-color:crimson;
color:#fff;
border:0;
border-radius:4px;
padding:1em;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">//init the graph
document.addEventListener('DOMContentLoaded', function() {
cy = cytoscape({
container: document.getElementById('cyto'),
layout: { name: 'cose'},
elements: [
{
group: 'nodes',
data : {id : 'testnode'}
},{
group: 'nodes',
data : {id : 'testnode2'}
},{
group: 'nodes',
data : {id : 'testnode3'}
},{
group: 'edges',
data : {
id : 'edge1',
source: 'testnode',
target: 'testnode3'
}
},{
group: 'edges',
data : {
id : 'edge2',
source: 'testnode',
target: 'testnode2'
}
}
],
ready: function(){
window.cy = this;
}
});
}, false);
</script></body>
</html>
Raw
jsbin.mojuda.css
#cyto{
width:300px;height:300px;
}
#addNode {
background-color:crimson;
color:#fff;
border:0;
border-radius:4px;
padding:1em;
}
Raw
jsbin.mojuda.js
//init the graph
document.addEventListener('DOMContentLoaded', function() {
cy = cytoscape({
container: document.getElementById('cyto'),
layout: { name: 'cose'},
elements: [
{
group: 'nodes',
data : {id : 'testnode'}
},{
group: 'nodes',
data : {id : 'testnode2'}
},{
group: 'nodes',
data : {id : 'testnode3'}
},{
group: 'edges',
data : {
id : 'edge1',
source: 'testnode',
target: 'testnode3'
}
},{
group: 'edges',
data : {
id : 'edge2',
source: 'testnode',
target: 'testnode2'
}
}
],
ready: function(){
window.cy = this;
}
});
}, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment