maxkfranz

$(function(){ // on dom ready

var cy = cytoscape({
  
  container: document.getElementById('cy'),
  
  boxSelectionEnabled: false,
  autounselectify: true,
  minZoom: 0.5,
  maxZoom: 2,

maxkfranz

$(function(){ // on dom ready

var cy = cytoscape({
  container: document.getElementById('cy'),
  
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'width': '60px',
        'height': '60px',

maxkfranz

$(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

$(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

// 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;

maxkfranz

{
  "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

var cy;

$(function(){ // on dom ready

cy = cytoscape({
  container: document.getElementById('cy'),
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(name)',

maxkfranz

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

{
  "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

dummy file to create gist