robin-pham/jsbin.urabis.css

## jsbin.urabis.css
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

## jsbin.urabis.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[An example of getting started with Cytoscape.js]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
  <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
</head>
<body>
  <div id="cy"></div>
</body>
</html>

## jsbin.urabis.js
$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(name)',
        'text-valign': 'center',
        'color': 'white',
        'text-outline-width': 2,
        'text-outline-color': '#888'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle'
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),

  elements: {
    nodes: [
      { data: { id: 'j', name: 'Jerry' } },
      { data: { id: 'e', name: 'Elaine' } },
      { data: { id: 'k', name: 'Kramer' } },
      { data: { id: 'g', name: 'George' } }
    ],
    edges: [
      { data: { source: 'j', target: 'e' } },
      { data: { source: 'j', target: 'k' } },
      { data: { source: 'j', target: 'g' } },
      { data: { source: 'e', target: 'j' } },
      { data: { source: 'e', target: 'k' } },
      { data: { source: 'k', target: 'j' } },
      { data: { source: 'k', target: 'e' } },
      { data: { source: 'k', target: 'g' } },
      { data: { source: 'g', target: 'j' } }
    ]
  },

  ready: function(){
    window.cy = this;

    // giddy up...

    cy.elements().unselectify();

    cy.on('tap', 'node', function(e){
      var node = e.cyTarget;
      var neighborhood = node.neighborhood().add(node);

      cy.elements().addClass('faded');
      neighborhood.removeClass('faded');
    });

    cy.on('tap', function(e){
      if( e.cyTarget === cy ){
        cy.elements().removeClass('faded');
      }
    });
  }
});
	body {
	font: 14px helvetica neue, helvetica, arial, sans-serif;
	}

	#cy {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[An example of getting started with Cytoscape.js]" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>Cytoscape.js initialisation</title>
	<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
	</head>
	<body>
	<div id="cy"></div>
	</body>
	</html>
	$('#cy').cytoscape({
	style: cytoscape.stylesheet()
	.selector('node')
	.css({
	'content': 'data(name)',
	'text-valign': 'center',
	'color': 'white',
	'text-outline-width': 2,
	'text-outline-color': '#888'
	})
	.selector('edge')
	.css({
	'target-arrow-shape': 'triangle'
	})
	.selector(':selected')
	.css({
	'background-color': 'black',
	'line-color': 'black',
	'target-arrow-color': 'black',
	'source-arrow-color': 'black'
	})
	.selector('.faded')
	.css({
	'opacity': 0.25,
	'text-opacity': 0
	}),

	elements: {
	nodes: [
	{ data: { id: 'j', name: 'Jerry' } },
	{ data: { id: 'e', name: 'Elaine' } },
	{ data: { id: 'k', name: 'Kramer' } },
	{ data: { id: 'g', name: 'George' } }
	],
	edges: [
	{ data: { source: 'j', target: 'e' } },
	{ data: { source: 'j', target: 'k' } },
	{ data: { source: 'j', target: 'g' } },
	{ data: { source: 'e', target: 'j' } },
	{ data: { source: 'e', target: 'k' } },
	{ data: { source: 'k', target: 'j' } },
	{ data: { source: 'k', target: 'e' } },
	{ data: { source: 'k', target: 'g' } },
	{ data: { source: 'g', target: 'j' } }
	]
	},

	ready: function(){
	window.cy = this;

	// giddy up...

	cy.elements().unselectify();

	cy.on('tap', 'node', function(e){
	var node = e.cyTarget;
	var neighborhood = node.neighborhood().add(node);

	cy.elements().addClass('faded');
	neighborhood.removeClass('faded');
	});

	cy.on('tap', function(e){
	if( e.cyTarget === cy ){
	cy.elements().removeClass('faded');
	}
	});
	}
	});