Skip to content

Instantly share code, notes, and snippets.

@maxkfranz

maxkfranz/code.js

Last active April 28, 2017 14:10
Show Gist options
  • Save maxkfranz/621d51ea7de19608127e to your computer and use it in GitHub Desktop.
Save maxkfranz/621d51ea7de19608127e to your computer and use it in GitHub Desktop.
Download ZIP
Initialisation
Raw
code.js
document.addEventListener('DOMContentLoaded', function(){ // on dom ready
var cy = cytoscape({
container: document.querySelector('#cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'background-color': '#999',
'text-outline-color': '#999'
})
.selector('edge')
.css({
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#ccc',
'line-color': '#ccc',
'width': 1
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [
{ data: { id: 'j', name: 'Jerry' } },
{ data: { id: 'e', name: 'Elaine' } },
{ data: { id: 'k', name: 'Kramer' } },
{ data: { id: 'g', name: 'George' } }
],
edges: [
{ data: { source: 'j', target: 'e' } },
{ data: { source: 'j', target: 'k' } },
{ data: { source: 'j', target: 'g' } },
{ data: { source: 'e', target: 'j' } },
{ data: { source: 'e', target: 'k' } },
{ data: { source: 'k', target: 'j' } },
{ data: { source: 'k', target: 'e' } },
{ data: { source: 'k', target: 'g' } },
{ data: { source: 'g', target: 'j' } }
]
},
layout: {
name: 'grid',
padding: 10
}
});
cy.on('tap', 'node', function(e){
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', function(e){
if( e.cyTarget === cy ){
cy.elements().removeClass('faded');
}
});
}); // on dom ready
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[An example of getting started with Cytoscape.js]" />
<link href="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>Cytoscape.js initialisation</title>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="code.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Raw
style.css
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#info {
color: #c88;
font-size: 1em;
position: absolute;
z-index: -1;
left: 1em;
top: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment