Skip to content

Instantly share code, notes, and snippets.

@maxkfranz

maxkfranz/code.js

Last active April 21, 2017 09:48
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save maxkfranz/b7c65115947d9e0e8ec8 to your computer and use it in GitHub Desktop.
Save maxkfranz/b7c65115947d9e0e8ec8 to your computer and use it in GitHub Desktop.
Download ZIP
Visual style
Raw
code.js
$(function(){ // on dom ready
var cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'cose',
padding: 10,
randomize: true
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'shape': 'data(faveShape)',
'width': 'mapData(weight, 40, 80, 20, 60)',
'content': 'data(name)',
'text-valign': 'center',
'text-outline-width': 2,
'text-outline-color': 'data(faveColor)',
'background-color': 'data(faveColor)',
'color': '#fff'
})
.selector(':selected')
.css({
'border-width': 3,
'border-color': '#333'
})
.selector('edge')
.css({
'curve-style': 'bezier',
'opacity': 0.666,
'width': 'mapData(strength, 70, 100, 2, 6)',
'target-arrow-shape': 'triangle',
'source-arrow-shape': 'circle',
'line-color': 'data(faveColor)',
'source-arrow-color': 'data(faveColor)',
'target-arrow-color': 'data(faveColor)'
})
.selector('edge.questionable')
.css({
'line-style': 'dotted',
'target-arrow-shape': 'diamond'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [
{ data: { id: 'j', name: 'Jerry', weight: 65, faveColor: '#6FB1FC', faveShape: 'triangle' } },
{ data: { id: 'e', name: 'Elaine', weight: 45, faveColor: '#EDA1ED', faveShape: 'ellipse' } },
{ data: { id: 'k', name: 'Kramer', weight: 75, faveColor: '#86B342', faveShape: 'octagon' } },
{ data: { id: 'g', name: 'George', weight: 70, faveColor: '#F5A45D', faveShape: 'rectangle' } }
],
edges: [
{ data: { source: 'j', target: 'e', faveColor: '#6FB1FC', strength: 90 } },
{ data: { source: 'j', target: 'k', faveColor: '#6FB1FC', strength: 70 } },
{ data: { source: 'j', target: 'g', faveColor: '#6FB1FC', strength: 80 } },
{ data: { source: 'e', target: 'j', faveColor: '#EDA1ED', strength: 95 } },
{ data: { source: 'e', target: 'k', faveColor: '#EDA1ED', strength: 60 }, classes: 'questionable' },
{ data: { source: 'k', target: 'j', faveColor: '#86B342', strength: 100 } },
{ data: { source: 'k', target: 'e', faveColor: '#86B342', strength: 100 } },
{ data: { source: 'k', target: 'g', faveColor: '#86B342', strength: 100 } },
{ data: { source: 'g', target: 'j', faveColor: '#F5A45D', strength: 90 } }
]
},
ready: function(){
window.cy = this;
// giddy up
}
});
}); // on dom ready
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<title>Visual style</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<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>
</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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment