Skip to content

Instantly share code, notes, and snippets.

@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 / index.html
Last active March 29, 2021 09:58
cytoscape-dagre demo
<!DOCTYPE>
<html>
<head>
<title>cytoscape-dagre.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: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
core {
active-bg-color: #fff;
active-bg-opacity: 0.333;
}
edge {
curve-style: haystack;
haystack-radius: 0;
opacity: 0.333;
width: 2;
@maxkfranz
maxkfranz / README
Last active March 8, 2020 09:24
wine-and-cheese-demo
dummy file to create gist
@maxkfranz
maxkfranz / wine-and-cheese.json
Created November 14, 2014 18:44
wine-and-cheese.json
{
"format_version" : "1.0",
"generated_by" : "cytoscape-3.2.0",
"target_cytoscapejs_version" : "~2.1",
"data" : {
"selected" : true,
"__Annotations" : [ ],
"shared_name" : "WineCheeseNetwork",
"SUID" : 52,
"name" : "WineCheeseNetwork"
@maxkfranz
maxkfranz / gist:2c23fe9a23d0cc8d43af
Last active December 12, 2016 18:21
tokyo-railways-style.cycss
node {
background-color: white;
border-color: black;
content: data(station_name);
width: 20;
height: 20;
min-zoomed-font-size: 12;
color: #fff;
font-size: 16;
z-index: 1;
@maxkfranz
maxkfranz / code.js
Last active August 29, 2015 14:08
Cytoscape.js architecture
var cy;
$(function(){ // on dom ready
cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
@maxkfranz
maxkfranz / japan-railways.json
Last active August 29, 2015 14:08
japan-railways.json
This file has been truncated, but you can view the full file.
{
"format_version" : "1.0",
"generated_by" : "cytoscape-3.1.1",
"target_cytoscapejs_version" : "~2.1",
"data" : {
"selected" : true,
"__Annotations" : [ "" ],
"shared_name" : "graph_final.csv",
"SUID" : 62,
"name" : "main_islands_japan"
@maxkfranz
maxkfranz / code.js
Last active July 5, 2017 14:24
Cytoscape.js & Angular
// a very simple example of angular/cytoscape.js integration
// context (rightclick/2finger) drag to resize in graph
// use text boxes to resize in angular
var app = angular.module('app', []);
// use a factory instead of a directive, because cy.js is not just for visualisation; you need access to the graph model and events etc
app.factory('peopleGraph', [ '$q', function( $q ){
var cy;