Skip to content

Instantly share code, notes, and snippets.

View maxkfranz's full-sized avatar

Max Franz maxkfranz

189 followers · 37 following
View GitHub Profile
@maxkfranz
maxkfranz / code.js
Last active April 21, 2017 09:48
Visual style
$(function(){ // on dom ready
var cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'cose',
padding: 10,
randomize: true
},
@maxkfranz
maxkfranz / index.html
Last active April 11, 2017 19:13
cose-bilkent compound
<!DOCTYPE>
<html>
<head>
<title>cytoscape-cose-bilkent.js demo (compound)</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
@maxkfranz
maxkfranz / index.html
Last active April 11, 2017 19:12
cytoscape-code-bilkent demo
<!DOCTYPE>
<html>
<head>
<title>cytoscape-cose-bilkent.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
@maxkfranz
maxkfranz / code.js
Last active April 11, 2017 19:08
Multiple instances
$(function(){ // on dom ready
var elesJson = {
nodes: [
{ data: { id: 'a', foo: 3, bar: 5, baz: 7 } },
{ data: { id: 'b', foo: 7, bar: 1, baz: 3 } },
{ data: { id: 'c', foo: 2, bar: 7, baz: 6 } },
{ data: { id: 'd', foo: 9, bar: 5, baz: 2 } },
{ data: { id: 'e', foo: 2, bar: 4, baz: 5 } }
],
@maxkfranz
maxkfranz / code.js
Last active April 11, 2017 19:03
Pie style
$(function(){ // on dom ready
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'width': '60px',
'height': '60px',
@maxkfranz
maxkfranz / index.html
Last active April 11, 2017 18:56
cytoscape-spread demo
<!DOCTYPE>
<html>
<head>
<title>cytoscape-spread.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
@maxkfranz
maxkfranz / code.js
Last active April 11, 2017 18:36
Performance tuning
$(function(){ // on dom ready
var cy = cytoscape({
// these options hide parts of the graph during interaction
//hideEdgesOnViewport: true,
//hideLabelsOnViewport: true,
// this is an alternative that uses a bitmap during interaction
// textureOnViewport: true,
@maxkfranz
maxkfranz / index.html
Last active April 11, 2017 18:30
Tokyo railways demo
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Tokyo railways]" />
<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>Tokyo railways</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
@maxkfranz
maxkfranz / code.js
Last active April 11, 2017 18:27
Cola demo
var cy;
$(function(){ // on dom ready
cy = cytoscape({
container: document.getElementById('cy'),
style: [{"selector":"core","style":{"selection-box-color":"#AAD8FF","selection-box-border-color":"#8BB0D0","selection-box-opacity":"0.5"}},{"selector":"node","style":{"width":"mapData(score, 0, 0.006769776522008331, 20, 60)","height":"mapData(score, 0, 0.006769776522008331, 20, 60)","content":"data(name)","font-size":"12px","text-valign":"center","text-halign":"center","background-color":"#555","text-outline-color":"#555","text-outline-width":"2px","color":"#fff","overlay-padding":"6px","z-index":"10"}},{"selector":"node[?attr]","style":{"shape":"rectangle","background-color":"#aaa","text-outline-color":"#aaa","width":"16px","height":"16px","font-size":"6px","z-index":"1"}},{"selector":"node[?query]","style":{"background-clip":"none","background-fit":"contain"}},{"selector":"node:selected","style":{"border-width":"6px","border-color":"#AAD8FF","border-opacity":"0.5","background-color":"#77828C","t
@maxkfranz
maxkfranz / code.js
Last active January 24, 2017 18:50
Animated BFS
$(function(){ // on dom ready
var cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: cytoscape.stylesheet()
.selector('node')