JSFiddle

  • toovio-playground #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    function roll(fraction) {
      return Math.random() < fraction;
    }
    
    function rando(min, max) {
      return min + (Math.random() * (max - min));
    }
    
    // Generate some data
    function generateElements() {
      var elements = {
        nodes: [],
        edges: []
      }
      var MODEL_COUNT = 60;
      var SEGMENT_COUNT = 30;
      var EDGE_LIKELIHOOD = 0.08;
      var models = [];
      var segments = [];
    
      _.times(MODEL_COUNT, function(i) {
        models.push({
          data: {
            id: 'm' + i,
            title: 'Model ' + i,
            lift: rando(4, 8),
            accept_rate: rando(1, 12),
            volume: rando(500, 3000)
          },
          classes: 'model'
        });
      })
      _.times(SEGMENT_COUNT, function(i) {
        segments.push({
          data: {
            id: 's' + i,
            title: 'Data ' + i,
          },
          classes: 'segment'
        });
      })
    
      elements.nodes = models.concat(segments);
    
      _.each(segments, function(source) {
        _.each(models, function(target) {
          if (roll(EDGE_LIKELIHOOD) && source.data.id !== target.data.id) {
            elements.edges.push({
              data: {
                source: source.data.id,
                target: target.data.id,
                id: source.data.id + target.data.id,
                boost: rando(1, 10)
              }
            });
          }
        })
      });
    
      console.log('generateElements', elements);
      return elements;
    }
    
    var COLA_LAYOUT = {
      name: 'cola',
      animate: true, // whether to show the layout as it's running
      refresh: 1, // number of ticks per frame; higher is faster but more jerky
      maxSimulationTime: 2000, // max length in ms to run the layout
      ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
      fit: true, // on every layout reposition of nodes, fit the viewport
      padding: 30, // padding around the simulation
      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
    
      // layout event callbacks
      //ready: function(){}, // on layoutready
      //stop: function(){}, // on layoutstop
    
      // positioning options
      randomize: true, // use random node positions at beginning of layout
      avoidOverlap: true, // if true, prevents overlap of node bounding boxes
      handleDisconnected: true, // if true, avoids disconnected components from overlapping
      nodeSpacing: function(node) {
        if (node.hasClass('model')) return 60;
        return 5;
      }, // extra spacing around nodes
      flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
      alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
    
      // different methods of specifying edge length
      // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
      edgeLength: undefined, // sets edge length directly in simulation
      edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
      edgeJaccardLength: undefined, // jaccard edge length in simulation
    
      // iterations of cola algorithm; uses default values on undefined
      unconstrIter: undefined, // unconstrained initial layout iterations
      userConstIter: undefined, // initial layout iterations with user-specified constraints
      allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
    
      // infinite layout options
      infinite: false // overrides all other options for a forces-all-the-time mode
    };
    
    function getBorderStyle(node){
    	var lift = node.data('lift');
    	if (lift < 5) return 'dotted';
      //if (lift < 6) return 'dashed';
      if (lift < 7) return 'solid';
      return 'double';
    }
    
    var cy = cytoscape({
      container: document.getElementById('cy'),
      elements: generateElements(),
      layout: COLA_LAYOUT,
      style: [{
          selector: 'node.model',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'color': 'white',
            'text-outline-color': '#333',
            'text-outline-width': 2,
            'text-outline-opacity': .8,
            'shape': 'circle',
            'height': 'mapData(volume, 500, 3000, 90, 200)',
            'width': 'mapData(volume, 500, 3000, 90, 200)',
            'border-width': 'mapData(lift, 4, 8, 6, 30)',
            'border-color': 'black',
            'border-style': 'double',
            // blue-to-red
            //'background-color': 'mapData(accept_rate, 1, 12, red, blue)',
            // blue-to-almost-white
            'background-color': 'mapData(accept_rate, 0, 12, white, rgb(230,50, 000))',
    
          }
        }, {
          selector: 'node.segment',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'height': 'label',
            'width': 'label',
            'shape': 'roundrectangle',
            'padding': 10,
            'background-color': 'rgb(50,190,255)'
          }
        },
    
        {
          selector: 'edge',
          style: {
            'width': 'data(boost)',
            'line-color': '#999',
            'target-arrow-color': '#999',
            'target-arrow-shape': 'triangle',
            'target-arrow-size': 20,
            'opacity': 0.3,
          }
        },
        // Highlights  
        {
          selector: 'node.model.highlight',
          style: {
            'text-outline-color': '#000',
            'border-width': 6,
            'border-color': '#000',
            'z-index': 2
          }
        }, {
          selector: 'node.segment.highlight',
          style: {
            'border-width': 3,
            'border-color': '#000',
            'z-index': 2
          }
        }, {
          selector: 'edge.highlight',
          style: {
            'opacity': 1,
            'line-color': '#000',
            'z-index': 2
          }
        }
      ]
    });
    
    function clearHighlights() {
      cy.elements('.highlight').removeClass('highlight');
      $('#detail').hide();
    }
    
    function showDetail(element) {
      $('#detail').show().html(_.map(element.data(), function(value, key) {
        return '<li><em>' + key + '</em>' + '<strong>' + value + '</strong></li>';
      }));
    }
    
    cy.on('tap', function(event) {
      console.log('tap', event);
      var evtTarget = event ...
  • toovio-playground #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    function roll(fraction) {
      return Math.random() < fraction;
    }
    
    function rando(min, max) {
      return min + (Math.random() * (max - min));
    }
    
    // Generate some data
    function generateElements() {
      var elements = {
        nodes: [],
        edges: []
      }
      var MODEL_COUNT = 60;
      var SEGMENT_COUNT = 30;
      var EDGE_LIKELIHOOD = 0.08;
      var models = [];
      var segments = [];
    
      _.times(MODEL_COUNT, function(i) {
        models.push({
          data: {
            id: 'm' + i,
            title: 'Model ' + i,
            lift: rando(4, 8),
            accept_rate: rando(1, 12),
            volume: rando(500, 3000)
          },
          classes: 'model'
        });
      })
      _.times(SEGMENT_COUNT, function(i) {
        segments.push({
          data: {
            id: 's' + i,
            title: 'Data ' + i,
          },
          classes: 'segment'
        });
      })
    
      elements.nodes = models.concat(segments);
    
      _.each(segments, function(source) {
        _.each(models, function(target) {
          if (roll(EDGE_LIKELIHOOD) && source.data.id !== target.data.id) {
            elements.edges.push({
              data: {
                source: source.data.id,
                target: target.data.id,
                id: source.data.id + target.data.id,
                boost: rando(1, 10)
              }
            });
          }
        })
      });
    
      console.log('generateElements', elements);
      return elements;
    }
    
    var COLA_LAYOUT = {
      name: 'cola',
      animate: true, // whether to show the layout as it's running
      refresh: 1, // number of ticks per frame; higher is faster but more jerky
      maxSimulationTime: 2000, // max length in ms to run the layout
      ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
      fit: true, // on every layout reposition of nodes, fit the viewport
      padding: 30, // padding around the simulation
      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
    
      // layout event callbacks
      //ready: function(){}, // on layoutready
      //stop: function(){}, // on layoutstop
    
      // positioning options
      randomize: true, // use random node positions at beginning of layout
      avoidOverlap: true, // if true, prevents overlap of node bounding boxes
      handleDisconnected: true, // if true, avoids disconnected components from overlapping
      nodeSpacing: function(node) {
        if (node.hasClass('model')) return 60;
        return 5;
      }, // extra spacing around nodes
      flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
      alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
    
      // different methods of specifying edge length
      // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
      edgeLength: undefined, // sets edge length directly in simulation
      edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
      edgeJaccardLength: undefined, // jaccard edge length in simulation
    
      // iterations of cola algorithm; uses default values on undefined
      unconstrIter: undefined, // unconstrained initial layout iterations
      userConstIter: undefined, // initial layout iterations with user-specified constraints
      allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
    
      // infinite layout options
      infinite: false // overrides all other options for a forces-all-the-time mode
    };
    
    function getBorderStyle(node){
    	var lift = node.data('lift');
    	if (lift < 5) return 'dotted';
      //if (lift < 6) return 'dashed';
      if (lift < 7) return 'solid';
      return 'double';
    }
    
    var cy = cytoscape({
      container: document.getElementById('cy'),
      elements: generateElements(),
      layout: COLA_LAYOUT,
      style: [{
          selector: 'node.model',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'color': 'white',
            'text-outline-color': '#333',
            'text-outline-width': 2,
            'text-outline-opacity': .8,
            'shape': 'circle',
            'height': 'mapData(volume, 500, 3000, 90, 200)',
            'width': 'mapData(volume, 500, 3000, 90, 200)',
            'border-width': 'mapData(lift, 4, 8, 6, 30)',
            'border-color': 'black',
            'border-style': 'double',
            // blue-to-red
            //'background-color': 'mapData(accept_rate, 1, 12, red, blue)',
            // blue-to-almost-white
            'background-color': 'mapData(accept_rate, 0, 12, white, rgb(230,50, 000))',
    
          }
        }, {
          selector: 'node.segment',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'height': 'label',
            'width': 'label',
            'shape': 'roundrectangle',
            'padding': 10,
            'background-color': 'rgb(50,190,255)'
          }
        },
    
        {
          selector: 'edge',
          style: {
            'width': 'data(boost)',
            'line-color': '#999',
            'target-arrow-color': '#999',
            'target-arrow-shape': 'triangle',
            'target-arrow-size': 20,
            'opacity': 0.3,
          }
        },
        // Highlights  
        {
          selector: 'node.model.highlight',
          style: {
            'text-outline-color': '#000',
            'border-width': 6,
            'border-color': '#000',
            'z-index': 2
          }
        }, {
          selector: 'node.segment.highlight',
          style: {
            'border-width': 3,
            'border-color': '#000',
            'z-index': 2
          }
        }, {
          selector: 'edge.highlight',
          style: {
            'opacity': 1,
            'line-color': '#000',
            'z-index': 2
          }
        }
      ]
    });
    
    function clearHighlights() {
      cy.elements('.highlight').removeClass('highlight');
      $('#detail').hide();
    }
    
    function showDetail(element) {
      $('#detail').show().html(_.map(element.data(), function(value, key) {
        return '<li><em>' + key + '</em>' + '<strong>' + value + '</strong></li>';
      }));
    }
    
    cy.on('tap', function(event) {
      console.log('tap', event);
      var evtTarget = event ...
  • toovio-playground

    No-Library (pure JS), HTML, CSS, JavaScript

    function roll(fraction) {
      return Math.random() < fraction;
    }
    
    function rando(min, max) {
      return min + (Math.random() * (max - min));
    }
    
    // Generate some data
    function generateElements() {
      var elements = {
        nodes: [],
        edges: []
      }
      var MODEL_COUNT = 60;
      var SEGMENT_COUNT = 30;
      var EDGE_LIKELIHOOD = 0.08;
      var models = [];
      var segments = [];
    
      _.times(MODEL_COUNT, function(i) {
        models.push({
          data: {
            id: 'm' + i,
            title: 'Model ' + i,
            lift: rando(4, 8),
            accept_rate: rando(1, 12),
            volume: rando(500, 3000)
          },
          classes: 'model'
        });
      })
      _.times(SEGMENT_COUNT, function(i) {
        segments.push({
          data: {
            id: 's' + i,
            title: 'Data ' + i,
          },
          classes: 'segment'
        });
      })
    
      elements.nodes = models.concat(segments);
    
      _.each(segments, function(source) {
        _.each(models, function(target) {
          if (roll(EDGE_LIKELIHOOD) && source.data.id !== target.data.id) {
            elements.edges.push({
              data: {
                source: source.data.id,
                target: target.data.id,
                id: source.data.id + target.data.id,
                boost: rando(1, 10)
              }
            });
          }
        })
      });
    
      console.log('generateElements', elements);
      return elements;
    }
    
    var COLA_LAYOUT = {
      name: 'cola',
      animate: true, // whether to show the layout as it's running
      refresh: 1, // number of ticks per frame; higher is faster but more jerky
      maxSimulationTime: 2000, // max length in ms to run the layout
      ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
      fit: true, // on every layout reposition of nodes, fit the viewport
      padding: 30, // padding around the simulation
      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
    
      // layout event callbacks
      //ready: function(){}, // on layoutready
      //stop: function(){}, // on layoutstop
    
      // positioning options
      randomize: true, // use random node positions at beginning of layout
      avoidOverlap: true, // if true, prevents overlap of node bounding boxes
      handleDisconnected: true, // if true, avoids disconnected components from overlapping
      nodeSpacing: function(node) {
        if (node.hasClass('model')) return 60;
        return 5;
      }, // extra spacing around nodes
      flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
      alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
    
      // different methods of specifying edge length
      // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
      edgeLength: undefined, // sets edge length directly in simulation
      edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
      edgeJaccardLength: undefined, // jaccard edge length in simulation
    
      // iterations of cola algorithm; uses default values on undefined
      unconstrIter: undefined, // unconstrained initial layout iterations
      userConstIter: undefined, // initial layout iterations with user-specified constraints
      allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
    
      // infinite layout options
      infinite: false // overrides all other options for a forces-all-the-time mode
    };
    
    
    var cy = cytoscape({
      container: document.getElementById('cy'),
      elements: generateElements(),
      layout: COLA_LAYOUT,
      style: [{
          selector: 'node.model',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'color': 'white',
            'text-outline-color': '#333',
            'text-outline-width': 2,
            'text-outline-opacity': .8,
            'shape': 'circle',
            'height': 'mapData(lift, 4, 8, 80, 160)',
            'width': 'mapData(lift, 4, 8, 80, 160)',
            'border-width': 3,
            'border-color': 'mapData(accept_rate, -1, 12, white, rgb(120,10,00))',
            // blue-to-red
            //'background-color': 'mapData(accept_rate, 1, 12, red, blue)',
            // blue-to-almost-white
            'background-color': 'mapData(accept_rate, 0, 12, white, rgb(230,50, 000))',
    
          }
        }, {
          selector: 'node.segment',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'height': 'label',
            'width': 'label',
            'shape': 'roundrectangle',
            'padding': 10,
            'background-color': 'rgb(50,190,255)'
          }
        },
    
        {
          selector: 'edge',
          style: {
            'width': 'data(boost)',
            'line-color': '#999',
            'target-arrow-color': '#999',
            'target-arrow-shape': 'triangle',
            'target-arrow-size': 20,
            'opacity': 0.3,
          }
        },
        // Highlights  
        {
          selector: 'node.model.highlight',
          style: {
            'text-outline-color': '#000',
            'border-width': 6,
            'border-color': '#000',
            'z-index': 2
          }
        }, {
          selector: 'node.segment.highlight',
          style: {
            'border-width': 3,
            'border-color': '#000',
            'z-index': 2
          }
        }, {
          selector: 'edge.highlight',
          style: {
            'opacity': 1,
            'line-color': '#000',
            'z-index': 2
          }
        }
      ]
    });
    
    function clearHighlights() {
      cy.elements('.highlight').removeClass('highlight');
      $('#detail').hide();
    }
    
    function showDetail(element) {
      $('#detail').show().html(_.map(element.data(), function(value, key) {
        return '<li><em>' + key + '</em>' + '<strong>' + value + '</strong></li>';
      }));
    }
    
    cy.on('tap', function(event) {
      console.log('tap', event);
      var evtTarget = event ...
  • toovio-playground

    No-Library (pure JS), HTML, CSS, JavaScript

    function roll(fraction) {
      return Math.random() < fraction;
    }
    
    function rando(min, max) {
      return min + (Math.random() * (max - min));
    }
    
    // Generate some data
    function generateElements() {
      var elements = {
        nodes: [],
        edges: []
      }
      var MODEL_COUNT = 40;
      var SEGMENT_COUNT = 20;
      var EDGE_LIKELIHOOD = 0.1;
      var models = [];
      var segments = [];
    
      _.times(MODEL_COUNT, function(i) {
        models.push({
          data: {
            id: 'm' + i,
            title: 'Model ' + i,
            lift: rando(4, 8),
            accept_rate: rando(1, 12),
            volume: rando(500, 3000)
          },
          classes: 'model'
        });
      })
      
      // Sort by... acc rate?
      models = _.sortBy(models, function(model){
      	return model.data.accept_rate;
      });
      
      _.times(SEGMENT_COUNT, function(i) {
        segments.push({
          data: {
            id: 's' + i,
            title: 'Data ' + i,
          },
          classes: 'segment'
        });
      })
     
      elements.nodes = models.concat(segments);
    
      _.each(segments, function(source) {
        _.each(models, function(target) {
          if (roll(EDGE_LIKELIHOOD) && source.data.id !== target.data.id) {
            elements.edges.push({
              data: {
                source: source.data.id,
                target: target.data.id,
                id: source.data.id + target.data.id,
                boost: rando(1, 10)
              }
            });
          }
        })
      });
    
      console.log('generateElements', elements);
      return elements;
    }
    
    var LAYOUT = {
      name: 'concentric',
    
      fit: true, // whether to fit the viewport to the graph
      padding: 30, // the padding on fit
      startAngle: 1 / 2 * Math.PI, // where nodes start in radians
      sweep: undefined, // how many radians should be between the first and last node (defaults to full circle)
      clockwise: false, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)
      equidistant: false, // whether levels have an equal radial distance betwen them, may cause bounding box overflow
      minNodeSpacing: 10, // min spacing between outside of nodes (used for radius adjustment)
      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
      avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
      height: undefined, // height of layout area (overrides container height)
      width: undefined, // width of layout area (overrides container width)
      concentric: function( node ){ // returns numeric value for each node, placing higher nodes in levels towards the centre
      //return node.degree();
      		if (node.hasClass('segment')) return 30;
          //if (node.data('lift') > 6) return 20;
          return 10;
      
      },
      levelWidth: function( nodes ){ // the variation of concentric values in ...
  • toovio-playground #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    function roll(fraction) {
      return Math.random() < fraction;
    }
    
    function rando(min, max) {
      return min + (Math.random() * (max - min));
    }
    
    // Generate some data
    function generateElements() {
      var elements = {
        nodes: [],
        edges: []
      }
      var MODEL_COUNT = 100;
      var SEGMENT_COUNT = 50;
      var EDGE_LIKELIHOOD = 0.05;
      var models = [];
      var segments = [];
    
      _.times(MODEL_COUNT, function(i) {
        models.push({
          data: {
            id: 'm' + i,
            title: 'Model ' + i,
            lift: rando(4, 8),
            accept_rate: rando(1, 12),
            volume: rando(500, 3000)
          },
          classes: 'model'
        });
      })
      _.times(SEGMENT_COUNT, function(i) {
        segments.push({
          data: {
            id: 's' + i,
            title: 'Data ' + i,
          },
          classes: 'segment'
        });
      })
    
      elements.nodes = models.concat(segments);
    
      _.each(segments, function(source) {
        _.each(models, function(target) {
          if (roll(EDGE_LIKELIHOOD) && source.data.id !== target.data.id) {
            elements.edges.push({
              data: {
                source: source.data.id,
                target: target.data.id,
                id: source.data.id + target.data.id,
                boost: rando(1, 10)
              }
            });
          }
        })
      });
    
      console.log('generateElements', elements);
      return elements;
    }
    
    var COLA_LAYOUT = {
      name: 'cola',
      animate: true, // whether to show the layout as it's running
      refresh: 1, // number of ticks per frame; higher is faster but more jerky
      maxSimulationTime: 2000, // max length in ms to run the layout
      ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
      fit: true, // on every layout reposition of nodes, fit the viewport
      padding: 30, // padding around the simulation
      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
    
      // layout event callbacks
      //ready: function(){}, // on layoutready
      //stop: function(){}, // on layoutstop
    
      // positioning options
      randomize: true, // use random node positions at beginning of layout
      avoidOverlap: true, // if true, prevents overlap of node bounding boxes
      handleDisconnected: true, // if true, avoids disconnected components from overlapping
      nodeSpacing: function(node) {
        if (node.hasClass('model')) return 60;
        return 5;
      }, // extra spacing around nodes
      flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
      alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
    
      // different methods of specifying edge length
      // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
      edgeLength: undefined, // sets edge length directly in simulation
      edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
      edgeJaccardLength: undefined, // jaccard edge length in simulation
    
      // iterations of cola algorithm; uses default values on undefined
      unconstrIter: undefined, // unconstrained initial layout iterations
      userConstIter: undefined, // initial layout iterations with user-specified constraints
      allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
    
      // infinite layout options
      infinite: false // overrides all other options for a forces-all-the-time mode
    };
    
    
    var cy = cytoscape({
      container: document.getElementById('cy'),
      elements: generateElements(),
      layout: COLA_LAYOUT,
      style: [{
          selector: 'node.model',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'color': 'white',
            'text-outline-color': '#333',
            'text-outline-width': 2,
            'text-outline-opacity': .8,
            'shape': 'circle',
            'height': 'mapData(lift, 4, 8, 80, 160)',
            'width': 'mapData(lift, 4, 8, 80, 160)',
            'border-width': 3,
            'border-color': 'mapData(accept_rate, -1, 12, white, rgb(120,10,00))',
            // blue-to-red
            //'background-color': 'mapData(accept_rate, 1, 12, red, blue)',
            // blue-to-almost-white
            'background-color': 'mapData(accept_rate, 0, 12, white, rgb(230,50, 000))',
    
          }
        }, {
          selector: 'node.segment',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'height': 'label',
            'width': 'label',
            'shape': 'roundrectangle',
            'padding': 10,
            'background-color': 'rgb(50,190,255)'
          }
        },
    
        {
          selector: 'edge',
          style: {
            'width': 'data(boost)',
            'line-color': '#999',
            'target-arrow-color': '#999',
            'target-arrow-shape': 'triangle',
            'target-arrow-size': 20,
            'opacity': 0.3,
          }
        },
        // Highlights  
        {
          selector: 'node.model.highlight',
          style: {
            'text-outline-color': '#000',
            'border-width': 6,
            'border-color': '#000',
            'z-index': 2
          }
        }, {
          selector: 'node.segment.highlight',
          style: {
            'border-width': 3,
            'border-color': '#000',
            'z-index': 2
          }
        }, {
          selector: 'edge.highlight',
          style: {
            'opacity': 1,
            'line-color': '#000',
            'z-index': 2
          }
        }
      ]
    });
    
    function clearHighlights() {
      cy.elements('.highlight').removeClass('highlight');
      $('#detail').hide();
    }
    
    function showDetail(element) {
      $('#detail').show().html(_.map(element.data(), function(value, key) {
        return '<li><em>' + key + '</em>' + '<strong>' + value + '</strong></li>';
      }));
    }
    
    cy.on('tap', function(event) {
      console.log('tap', event);
      var evtTarget = event ...
  • toovio-playground #5 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    function roll(fraction) {
      return Math.random() < fraction;
    }
    
    function rando(min, max) {
      return min + (Math.random() * (max - min));
    }
    
    // Generate some data
    function generateElements() {
      var elements = {
        nodes: [],
        edges: []
      }
      var MODEL_COUNT = 100;
      var SEGMENT_COUNT = 50;
      var EDGE_LIKELIHOOD = 0.07;
      var models = [];
      var segments = [];
    
      _.times(MODEL_COUNT, function(i) {
        models.push({
          data: {
            id: 'm' + i,
            title: 'Model ' + i,
            lift: rando(4, 8),
            accept_rate: rando(1, 12),
            volume: rando(500, 3000)
          },
          classes: 'model'
        });
      })
      _.times(SEGMENT_COUNT, function(i) {
        segments.push({
          data: {
            id: 's' + i,
            title: 'Data ' + i,
          },
          classes: 'segment'
        });
      })
    
      elements.nodes = models.concat(segments);
    
      _.each(segments, function(source) {
        _.each(models, function(target) {
          if (roll(EDGE_LIKELIHOOD) && source.data.id !== target.data.id) {
            elements.edges.push({
              data: {
                source: source.data.id,
                target: target.data.id,
                id: source.data.id + target.data.id,
                boost: rando(1, 10)
              }
            });
          }
        })
      });
    
      console.log('generateElements', elements);
      return elements;
    }
    
    var COLA_LAYOUT = {
      name: 'cola',
      animate: true, // whether to show the layout as it's running
      refresh: 1, // number of ticks per frame; higher is faster but more jerky
      maxSimulationTime: 2000, // max length in ms to run the layout
      ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
      fit: true, // on every layout reposition of nodes, fit the viewport
      padding: 30, // padding around the simulation
      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
    
      // layout event callbacks
      //ready: function(){}, // on layoutready
      //stop: function(){}, // on layoutstop
    
      // positioning options
      randomize: true, // use random node positions at beginning of layout
      avoidOverlap: true, // if true, prevents overlap of node bounding boxes
      handleDisconnected: true, // if true, avoids disconnected components from overlapping
      nodeSpacing: function(node) {
        if (node.hasClass('model')) return 60;
        return 5;
      }, // extra spacing around nodes
      flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
      alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
    
      // different methods of specifying edge length
      // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
      edgeLength: undefined, // sets edge length directly in simulation
      edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
      edgeJaccardLength: undefined, // jaccard edge length in simulation
    
      // iterations of cola algorithm; uses default values on undefined
      unconstrIter: undefined, // unconstrained initial layout iterations
      userConstIter: undefined, // initial layout iterations with user-specified constraints
      allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
    
      // infinite layout options
      infinite: false // overrides all other options for a forces-all-the-time mode
    };
    
    
    var cy = cytoscape({
      container: document.getElementById('cy'),
      elements: generateElements(),
      layout: COLA_LAYOUT,
      style: [{
          selector: 'node.model',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'color': 'white',
            'text-outline-color': '#333',
            'text-outline-width': 2,
            'text-outline-opacity': .8,
            'shape': 'circle',
            'height': 'mapData(lift, 4, 8, 80, 160)',
            'width': 'mapData(lift, 4, 8, 80, 160)',
            'border-width': 3,
            'border-color': 'mapData(accept_rate, -1, 12, white, rgb(0,20, 100))',
            // blue-to-red
            //'background-color': 'mapData(accept_rate, 1, 12, red, blue)',
            // blue-to-almost-white
            'background-color': 'mapData(accept_rate, 0, 12, white, rgb(0,50, 200))',
    
          }
        }, {
          selector: 'node.segment',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'height': 'label',
            'width': 'label',
            'shape': 'roundrectangle',
            'padding': 10,
            'background-color': 'orange'
          }
        },
    
        {
          selector: 'edge',
          style: {
            'width': 'data(boost)',
            'line-color': '#666',
            'target-arrow-color': '#666',
            'target-arrow-shape': 'triangle',
            'target-arrow-size': 20,
            'opacity': 0.3,
            //'curve-style': 'bezier',
            //'control-point-step-size': 20,
            //'curve-style': 'haystack',
            //'haystack-radius:': 0
          }
        },
        // Highlights  
        {
          selector: 'node.model.highlight',
          style: {
            'text-outline-color': '#000',
            'border-width': 6,
            'border-color': '#000',
          }
        }, {
          selector: 'node.segment.highlight',
          style: {
            'border-width': 3,
            'border-color': '#000',
          }
        }, {
          selector: 'edge.highlight',
          style: {
            'opacity': 1,
            'line-color': '#000'
          }
        }
      ]
    });
    
    function clearHighlights() {
      cy.elements('.highlight').removeClass('highlight');
      $('#detail').hide();
    }
    
    function showDetail(element) {
      $('#detail').show().html(_.map(element.data(), function(value, key) {
        return '<li><em>' + key + '</em>' + '<strong>' + value + '</strong></li>';
      }));
    }
    
    cy.on('tap', function(event) {
      console.log('tap', event);
      var evtTarget = event ...
  • toovio-playground #11 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    function roll(fraction) {
      return Math.random() < fraction;
    }
    
    function rando(min, max) {
      return min + (Math.random() * (max - min));
    }
    
    // Generate some data
    function generateElements() {
      var elements = {
        nodes: [],
        edges: []
      }
      var MODEL_COUNT = 50;
      var SEGMENT_COUNT = 30;
      var EDGE_LIKELIHOOD = 0.07;
      var models = [];
      var segments = [];
    
      _.times(MODEL_COUNT, function(i) {
        models.push({
          data: {
            id: 'm' + i,
            title: 'Model ' + i,
            lift: rando(4, 8),
            accept_rate: rando(1, 12),
            volume: rando(500, 3000)
          },
          classes: 'model'
        });
      })
      _.times(SEGMENT_COUNT, function(i) {
        segments.push({
          data: {
            id: 's' + i,
            title: 'Data ' + i,
          },
          classes: 'segment'
        });
      })
    
      elements.nodes = models.concat(segments);
    
      _.each(segments, function(source) {
        _.each(models, function(target) {
          if (roll(EDGE_LIKELIHOOD) && source.data.id !== target.data.id) {
            elements.edges.push({
              data: {
                source: source.data.id,
                target: target.data.id,
                id: source.data.id + target.data.id,
                boost: rando(1, 10)
              }
            });
          }
        })
    
    
      });
    
      console.log('generateElements', elements);
      return elements;
    }
    
    var COLA_LAYOUT = {
      name: 'cola',
      animate: true, // whether to show the layout as it's running
      refresh: 1, // number of ticks per frame; higher is faster but more jerky
      maxSimulationTime: 2000, // max length in ms to run the layout
      ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
      fit: true, // on every layout reposition of nodes, fit the viewport
      padding: 30, // padding around the simulation
      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
    
      // layout event callbacks
      //ready: function(){}, // on layoutready
      //stop: function(){}, // on layoutstop
    
      // positioning options
      randomize: true, // use random node positions at beginning of layout
      avoidOverlap: true, // if true, prevents overlap of node bounding boxes
      handleDisconnected: true, // if true, avoids disconnected components from overlapping
      nodeSpacing: function(node) {
        if (node.hasClass('model')) return 60;
        return 5;
      }, // extra spacing around nodes
      flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
      alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
    
      // different methods of specifying edge length
      // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
      edgeLength: undefined, // sets edge length directly in simulation
      edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
      edgeJaccardLength: undefined, // jaccard edge length in simulation
    
      // iterations of cola algorithm; uses default values on undefined
      unconstrIter: undefined, // unconstrained initial layout iterations
      userConstIter: undefined, // initial layout iterations with user-specified constraints
      allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
    
      // infinite layout options
      infinite: false // overrides all other options for a forces-all-the-time mode
    };
    
    
    var cy = cytoscape({
      container: document.getElementById('cy'),
      elements: generateElements(),
      layout: COLA_LAYOUT,
      style: [{
          selector: 'node.model',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'color': 'white',
            'text-outline-color': '#333',
            'text-outline-width': 2,
            'text-outline-opacity': .8,
            'shape': 'circle',
            'height': 'mapData(lift, 4, 8, 80, 160)',
            'width': 'mapData(lift, 4, 8, 80, 160)',
            'border-width': 3,
            'border-color': 'mapData(accept_rate, -1, 12, white, rgb(0,20, 100))',
            // blue-to-red
            //'background-color': 'mapData(accept_rate, 1, 12, red, blue)',
            // blue-to-almost-white
            'background-color': 'mapData(accept_rate, 0, 12, white, rgb(0,50, 200))',
    
          }
        }, {
          selector: 'node.segment',
          style: {
            'label': 'data(title)',
            'text-valign': 'center',
            'height': 'label',
            'width': 'label',
            'shape': 'roundrectangle',
            'padding': 10,
            'background-color': 'orange'
          }
        },
    
        {
          selector: 'edge',
          style: {
            'width': 'data(boost)',
            'line-color': '#666',
            'target-arrow-color': '#666',
            'target-arrow-shape': 'triangle',
            'target-arrow-size': 20,
            'opacity': 0.3,
            //'curve-style': 'bezier',
            //'control-point-step-size': 20,
            //'curve-style': 'haystack',
            //'haystack-radius:': 0
          }
        },
        // Highlights  
        {
          selector: 'node.model.highlight',
          style: {
            'text-outline-color': '#000',
            'border-width': 6,
            'border-color': '#000',
          }
        }, {
          selector: 'node.segment.highlight',
          style: {
            'border-width': 3,
            'border-color': '#000',
          }
        }, {
          selector: 'edge.highlight',
          style: {
            'opacity': 1,
            'line-color': '#000'
          }
    
        }
      ]
    });
    
    function clearHighlights() {
      cy.elements('.highlight').removeClass('highlight');
      $('#detail').hide();
    }
    
    function showDetail(element) {
      $('#detail').show().html(_.map(element.data(), function(value, key) {
        return '<li><em>' + key + '</em>' + '<strong>' + value + '</strong></li>';
      }));
    }
    
    cy.on('tap', function(event) {
      console.log('tap', event);
      var evtTarget = event ...
  • Expression editor test #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var $select = $("#expression")
      .selectize({
        delimiter: "|",
        persist: false,
        create: function(input) {
          return {
            value: input,
            text: input
          }
        },
        ////@TCO|@Criticality|@Downtime Hours per ...