/jsbin.eCaNEdE.css

## jsbin.eCaNEdE.css
.hero-unit {
    position: relative;
    color: #fff;
  }

  .hero-unit h1 {
    letter-spacing: 0;
    color: #fff;
  }

  .hero-unit h1,
  .hero-unit p {
    text-shadow: 1px 1px 4px #000;
  }

  .hero-unit div.intro {
    position: relative;
  }

  .centered {
    text-align: center;
  }

  #introduction,
  #introduction * {
    font-size: 16px;
  }

  /* sigma.js context : */
  .sigma-parent {
    position: relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #222;
  }

  .sigma-expand {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

## jsbin.eCaNEdE.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://sigmajs.org/js/sigma.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="hero-unit">
  <div class="sigma-parent sigma-expand">
    <div class="sigma-expand" id="sigma-1"></div>
  </div>
  <div class="intro">
    <h1 class="sigma-font">sigma.js</h1>
    <p>Web network visualization made easy</p>
  </div>
  <div class="sigma-expand" id="mouselayer-sigma-1"></div>
</div>
</div>
</body>
</html>

## jsbin.eCaNEdE.js
function init() {
    function getRandomColor(a, b) {
      var r = Math.random();
      return 'rgb('+
             ((a.r+(b.r-a.r)*r)|0).toString() +
             ','+
             ((a.g+(b.g-a.g)*r)|0).toString() +
             ','+
             ((a.b+(b.b-a.b)*r)|0).toString() +
             ')';
    };

    var colorFrom = {
      r: 44,
      g: 339,
      b: 333
    };

    var colorTo = {
      r: 180,
      g: 255,
      b: 158
    };

    /**
     * sigma.js instance 1 (banner) :
     */
    s1 = sigma.init(document.getElementById('sigma-1')).configProperties({
      drawHoverNodes: false
    }).drawingProperties({
      labelThreshold: 10000,
      defaultEdgeType: 'curve'
    }).mouseProperties({
      mouseEnabled: false
    }).graphProperties({
      scalingMode: 'outside'
    });

    var i, N = 400, E = 300;

    for(i=0;i<N;i++){
      s1.addNode(i,{
        'x': Math.random(),
        'y': Math.random(),
        'size': 0.5+5*Math.random(),
        'color': getRandomColor(colorFrom,colorTo)
      });
    }

    for(i=0;i<E;i++){
      s1.addEdge(i,Math.random()*N|0,Math.random()*N|0);
    }

    s1.draw();

    var newParent = document.getElementById('mouselayer-sigma-1');
    var mouseLayer = document.getElementById('sigma_mouse_1');

    newParent.appendChild(mouseLayer);

    mouseLayer.addEventListener('mouseover', function() {
      s1.activateFishEye();
    }, true);
    mouseLayer.addEventListener('mouseout', function() {
      s1.desactivateFishEye().draw(2,2,2);
    }, true);

    /**
     * Resize every instances on window resizing, and
     * some divs :
     */
    function resize(event){
      for(var key in sigma.instances) {
        sigma.instances[key].resize();
      }
    };

    window.onresize = resize;
    resize();
  }

  /**
   * Wait for the DOM to be ready to start :
   */
  if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", init, false);
  } else {
    window.onload = init;
  }

sigma.classes.FishEye = function(sig) {
  sigma.classes.Cascade.call(this);

  var self = this;
  var isActivated = false;

  this.p = {
    radius: 200,
    power: 2
  };

  function applyFishEye(mouseX, mouseY) {
    var newDist, newSize, xDist, yDist, dist,
        radius   = self.p.radius,
        power    = self.p.power,
        powerExp = Math.exp(power);

    sig.graph.nodes.forEach(function(node) {
      xDist = node.displayX - mouseX;
      yDist = node.displayY - mouseY;
      dist  = Math.sqrt(xDist*xDist + yDist*yDist);

      if(dist < radius){
        newDist = powerExp/(powerExp-1)*radius*(1-Math.exp(-dist/radius*power));
        newSize = powerExp/(powerExp-1)*radius*(1-Math.exp(-dist/radius*power));

        if(!node.isFixed){
          node.displayX = mouseX + xDist*(newDist/dist*3/4 + 1/4);
          node.displayY = mouseY + yDist*(newDist/dist*3/4 + 1/4);
        }

        node.displaySize = Math.min(node.displaySize*newSize/dist,10*node.displaySize);
      }
    });
  };

  function handler() {
    applyFishEye(
      sig.mousecaptor.mouseX,
      sig.mousecaptor.mouseY
    );
  }

  this.handler = handler;
  this.activated = function(v) {
    if(v==undefined){
      return isActivated;
    }else{
      isActivated = v;
      return this;
    }
  };

  this.refresh = function(){};
};

sigma.publicPrototype.activateFishEye = function() {
  if(!this.fisheye) {
    var sigmaInstance = this;
    var fe = new sigma.classes.FishEye(sigmaInstance._core);
    sigmaInstance.fisheye = fe;

    fe.refresh = function refresh() {
      sigmaInstance.draw(2,2,2);
    };
  }

  if(!this.fisheye.activated()){
    this.fisheye.activated(true);
    this._core.bind('graphscaled', this.fisheye.handler);
    document.getElementById(
      'sigma_mouse_'+this.getID()
    ).addEventListener('mousemove',this.fisheye.refresh,true);
  }

  return this;
};

sigma.publicPrototype.desactivateFishEye = function() {
  if(this.fisheye && this.fisheye.activated()){
    this.fisheye.activated(false);
    this._core.unbind('graphscaled', this.fisheye.handler);
    document.getElementById(
      'sigma_mouse_'+this.getID()
    ).removeEventListener('mousemove',this.fisheye.refresh,true);
  }

  return this;
};

sigma.publicPrototype.fishEyeProperties = function(a1, a2) {
  var res = this.fisheye.config(a1, a2);
  return res == s ? this.fisheye : res;
};
	.hero-unit {
	position: relative;
	color: #fff;
	}

	.hero-unit h1 {
	letter-spacing: 0;
	color: #fff;
	}

	.hero-unit h1,
	.hero-unit p {
	text-shadow: 1px 1px 4px #000;
	}

	.hero-unit div.intro {
	position: relative;
	}

	.centered {
	text-align: center;
	}

	#introduction,
	#introduction * {
	font-size: 16px;
	}

	/* sigma.js context : */
	.sigma-parent {
	position: relative;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background: #222;
	}

	.sigma-expand {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<script src="http://code.jquery.com/jquery-git2.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<script src="http://sigmajs.org/js/sigma.min.js"></script>
	</head>
	<body>
	<div class="container">
	<div class="hero-unit">
	<div class="sigma-parent sigma-expand">
	<div class="sigma-expand" id="sigma-1"></div>
	</div>
	<div class="intro">
	<h1 class="sigma-font">sigma.js</h1>
	<p>Web network visualization made easy</p>
	</div>
	<div class="sigma-expand" id="mouselayer-sigma-1"></div>
	</div>
	</div>
	</body>
	</html>
	function init() {
	function getRandomColor(a, b) {
	var r = Math.random();
	return 'rgb('+
	((a.r+(b.r-a.r)*r)\|0).toString() +
	','+
	((a.g+(b.g-a.g)*r)\|0).toString() +
	','+
	((a.b+(b.b-a.b)*r)\|0).toString() +
	')';
	};

	var colorFrom = {
	r: 44,
	g: 339,
	b: 333
	};

	var colorTo = {
	r: 180,
	g: 255,
	b: 158
	};

	/**
	* sigma.js instance 1 (banner) :
	*/
	s1 = sigma.init(document.getElementById('sigma-1')).configProperties({
	drawHoverNodes: false
	}).drawingProperties({
	labelThreshold: 10000,
	defaultEdgeType: 'curve'
	}).mouseProperties({
	mouseEnabled: false
	}).graphProperties({
	scalingMode: 'outside'
	});

	var i, N = 400, E = 300;

	for(i=0;i<N;i++){
	s1.addNode(i,{
	'x': Math.random(),
	'y': Math.random(),
	'size': 0.5+5*Math.random(),
	'color': getRandomColor(colorFrom,colorTo)
	});
	}

	for(i=0;i<E;i++){
	s1.addEdge(i,Math.random()N\|0,Math.random()N\|0);
	}

	s1.draw();

	var newParent = document.getElementById('mouselayer-sigma-1');
	var mouseLayer = document.getElementById('sigma_mouse_1');

	newParent.appendChild(mouseLayer);

	mouseLayer.addEventListener('mouseover', function() {
	s1.activateFishEye();
	}, true);
	mouseLayer.addEventListener('mouseout', function() {
	s1.desactivateFishEye().draw(2,2,2);
	}, true);

	/**
	* Resize every instances on window resizing, and
	* some divs :
	*/
	function resize(event){
	for(var key in sigma.instances) {
	sigma.instances[key].resize();
	}
	};

	window.onresize = resize;
	resize();
	}

	/**
	* Wait for the DOM to be ready to start :
	*/
	if (document.addEventListener) {
	document.addEventListener("DOMContentLoaded", init, false);
	} else {
	window.onload = init;
	}

	sigma.classes.FishEye = function(sig) {
	sigma.classes.Cascade.call(this);

	var self = this;
	var isActivated = false;

	this.p = {
	radius: 200,
	power: 2
	};

	function applyFishEye(mouseX, mouseY) {
	var newDist, newSize, xDist, yDist, dist,
	radius = self.p.radius,
	power = self.p.power,
	powerExp = Math.exp(power);

	sig.graph.nodes.forEach(function(node) {
	xDist = node.displayX - mouseX;
	yDist = node.displayY - mouseY;
	dist = Math.sqrt(xDistxDist + yDistyDist);

	if(dist < radius){
	newDist = powerExp/(powerExp-1)radius(1-Math.exp(-dist/radius*power));
	newSize = powerExp/(powerExp-1)radius(1-Math.exp(-dist/radius*power));

	if(!node.isFixed){
	node.displayX = mouseX + xDist(newDist/dist3/4 + 1/4);
	node.displayY = mouseY + yDist(newDist/dist3/4 + 1/4);
	}

	node.displaySize = Math.min(node.displaySizenewSize/dist,10node.displaySize);
	}
	});
	};

	function handler() {
	applyFishEye(
	sig.mousecaptor.mouseX,
	sig.mousecaptor.mouseY
	);
	}

	this.handler = handler;
	this.activated = function(v) {
	if(v==undefined){
	return isActivated;
	}else{
	isActivated = v;
	return this;
	}
	};

	this.refresh = function(){};
	};

	sigma.publicPrototype.activateFishEye = function() {
	if(!this.fisheye) {
	var sigmaInstance = this;
	var fe = new sigma.classes.FishEye(sigmaInstance._core);
	sigmaInstance.fisheye = fe;

	fe.refresh = function refresh() {
	sigmaInstance.draw(2,2,2);
	};
	}

	if(!this.fisheye.activated()){
	this.fisheye.activated(true);
	this._core.bind('graphscaled', this.fisheye.handler);
	document.getElementById(
	'sigma_mouse_'+this.getID()
	).addEventListener('mousemove',this.fisheye.refresh,true);
	}

	return this;
	};

	sigma.publicPrototype.desactivateFishEye = function() {
	if(this.fisheye && this.fisheye.activated()){
	this.fisheye.activated(false);
	this._core.unbind('graphscaled', this.fisheye.handler);
	document.getElementById(
	'sigma_mouse_'+this.getID()
	).removeEventListener('mousemove',this.fisheye.refresh,true);
	}

	return this;
	};

	sigma.publicPrototype.fishEyeProperties = function(a1, a2) {
	var res = this.fisheye.config(a1, a2);
	return res == s ? this.fisheye : res;
	};