Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="threejs dependency cycles">
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="code.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
 
$(function(){ // on dom ready
​
var cy = cytoscape({
  container: document.getElementById('cy'),
  
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(id)'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle',
        'width': 4,
        'line-color': '#ddd',
        'target-arrow-color': '#ddd'
      })
    .selector('.highlighted')
      .css({
        'background-color': '#61bffc',
        'line-color': '#61bffc',
        'target-arrow-color': '#61bffc',
        'transition-property': 'background-color, line-color, target-arrow-color',
        'transition-duration': '0.5s'
      }),
  
  elements: {"nodes":[{"data":{"id":"AmbientLight"}},{"data":{"id":"Box3"}},{"data":{"id":"BufferGeometry"}},{"data":{"id":"Camera"}},{"data":{"id":"CubicBezierCurve"}},{"data":{"id":"CurvePath"}},{"data":{"id":"DirectionalLight"}},{"data":{"id":"Euler"}},{"data":{"id":"ExtrudeGeometry"}},{"data":{"id":"Face3"}},{"data":{"id":"FontUtils"}},{"data":{"id":"Geometry"}},{"data":{"id":"GeometryIdCount"}},{"data":{"id":"HemisphereLight"}},{"data":{"id":"Light"}},{"data":{"id":"Line"}},{"data":{"id":"LineBasicMaterial"}},{"data":{"id":"Material"}},{"data":{"id":"Matrix3"}},{"data":{"id":"Matrix4"}},{"data":{"id":"Mesh"}},{"data":{"id":"MeshBasicMaterial"}},{"data":{"id":"MeshDepthMaterial"}},{"data":{"id":"MeshLambertMaterial"}},{"data":{"id":"MeshNormalMaterial"}},{"data":{"id":"MeshPhongMaterial"}},{"data":{"id":"Object3D"}},{"data":{"id":"OrthographicCamera"}},{"data":{"id":"Path"}},{"data":{"id":"PerspectiveCamera"}},{"data":{"id":"Plane"}},{"data":{"id":"PointLight"}},{"data":{"id":"QuadraticBezierCurve"}},{"data":{"id":"Quaternion"}},{"data":{"id":"Ray"}},{"data":{"id":"ShaderMaterial"}},{"data":{"id":"Shape"}},{"data":{"id":"ShapeGeometry"}},{"data":{"id":"Sphere"}},{"data":{"id":"SpotLight"}},{"data":{"id":"Sprite"}},{"data":{"id":"SpriteMaterial"}},{"data":{"id":"Triangle"}},{"data":{"id":"TubeGeometry"}},{"data":{"id":"UniformsUtils"}},{"data":{"id":"Vector3"}}],"edges":[{"data":{"source":"Camera","target":"Matrix4"}},{"data":{"source":"Camera","target":"Object3D"}},{"data":{"source":"Camera","target":"Quaternion"}},{"data":{"source":"Camera","target":"Vector3"}},{"data":{"source":"OrthographicCamera","target":"Camera"}},{"data":{"source":"PerspectiveCamera","target":"Camera"}},{"data":{"source":"BufferGeometry","target":"Box3"}},{"data":{"source":"BufferGeometry","target":"GeometryIdCount"}},{"data":{"source":"BufferGeometry","target":"Matrix3"}},{"data":{"source":"BufferGeometry","target":"Sphere"}},{"data":{"source":"BufferGeometry","target":"Vector3"}},{"data":{"source":"Face3","target":"Vector3"}},{"data":{"source":"Geometry","target":"Box3"}},{"data":{"source":"Geometry","target":"Face3"}},{"data":{"source":"Geometry","target":"Matrix3"}},{"data":{"source":"Geometry","target":"Matrix4"}},{"data":{"source":"Geometry","target":"Mesh"}},{"data":{"source":"Geometry","target":"Sphere"}},{"data":{"source":"Geometry","target":"Vector3"}},{"data":{"source":"GeometryIdCount","target":"Box3"}},{"data":{"source":"GeometryIdCount","target":"Face3"}},{"data":{"source":"GeometryIdCount","target":"Matrix3"}},{"data":{"source":"GeometryIdCount","target":"Matrix4"}},{"data":{"source":"GeometryIdCount","target":"Mesh"}},{"data":{"source":"GeometryIdCount","target":"Sphere"}},{"data":{"source":"GeometryIdCount","target":"Vector3"}},{"data":{"source":"Object3D","target":"AmbientLight"}},{"data":{"source":"Object3D","target":"DirectionalLight"}},{"data":{"source":"Object3D","target":"Euler"}},{"data":{"source":"Object3D","target":"HemisphereLight"}},{"data":{"source":"Object3D","target":"Line"}},{"data":{"source":"Object3D","target":"Matrix4"}},{"data":{"source":"Object3D","target":"Mesh"}},{"data":{"source":"Object3D","target":"OrthographicCamera"}},{"data":{"source":"Object3D","target":"PerspectiveCamera"}},{"data":{"source":"Object3D","target":"PointLight"}},{"data":{"source":"Object3D","target":"Quaternion"}},{"data":{"source":"Object3D","target":"SpotLight"}},{"data":{"source":"Object3D","target":"Sprite"}},{"data":{"source":"Object3D","target":"Vector3"}},{"data":{"source":"FontUtils","target":"Path"}},{"data":{"source":"FontUtils","target":"Shape"}},{"data":{"source":"CurvePath","target":"Geometry"}},{"data":{"source":"CurvePath","target":"Vector3"}},{"data":{"source":"Path","target":"CubicBezierCurve"}},{"data":{"source":"Path","target":"CurvePath"}},{"data":{"source":"Path","target":"QuadraticBezierCurve"}},{"data":{"source":"Path","target":"Shape"}},{"data":{"source":"Shape","target":"ExtrudeGeometry"}},{"data":{"source":"Shape","target":"FontUtils"}},{"data":{"source":"Shape","target":"Path"}},{"data":{"source":"Shape","target":"ShapeGeometry"}},{"data":{"source":"CubicBezierCurve","target":"Shape"}},{"data":{"source":"QuadraticBezierCurve","target":"Shape"}},{"data":{"source":"ExtrudeGeometry","target":"Face3"}},{"data":{"source":"ExtrudeGeometry","target":"Geometry"}},{"data":{"source":"ExtrudeGeometry","target":"Shape"}},{"data":{"source":"ExtrudeGeometry","target":"TubeGeometry"}},{"data":{"source":"ExtrudeGeometry","target":"Vector3"}},{"data":{"source":"ShapeGeometry","target":"ExtrudeGeometry"}},{"data":{"source":"ShapeGeometry","target":"Face3"}},{"data":{"source":"ShapeGeometry","target":"Geometry"}},{"data":{"source":"ShapeGeometry","target":"Shape"}},{"data":{"source":"ShapeGeometry","target":"Vector3"}},{"data":{"source":"TubeGeometry","target":"Face3"}},{"data":{"source":"TubeGeometry","target":"Geometry"}},{"data":{"source":"TubeGeometry","target":"Matrix4"}},{"data":{"source":"TubeGeometry","target":"Vector3"}},{"data":{"source":"AmbientLight","target":"Light"}},{"data":{"source":"DirectionalLight","target":"Light"}},{"data":{"source":"DirectionalLight","target":"Object3D"}},{"data":{"source":"DirectionalLight","target":"Vector3"}},{"data":{"source":"HemisphereLight","target":"Light"}},{"data":{"source":"Light","target":"Object3D"}},{"data":{"source":"PointLight","target":"Light"}},{"data":{"source":"SpotLight","target":"Light"}},{"data":{"source":"SpotLight","target":"Object3D"}},{"data":{"source":"LineBasicMaterial","target":"Material"}},{"data":{"source":"Material","target":"MeshBasicMaterial"}},{"data":{"source":"Material","target":"MeshDepthMaterial"}},{"data":{"source":"Material","target":"MeshLambertMaterial"}},{"data":{"source":"Material","target":"MeshNormalMaterial"}},{"data":{"source":"Material","target":"MeshPhongMaterial"}},{"data":{"source":"Material","target":"ShaderMaterial"}},{"data":{"source":"Material","target":"SpriteMaterial"}},{"data":{"source":"Material","target":"Vector3"}},{"data":{"source":"MeshBasicMaterial","target":"Material"}},{"data":{"source":"MeshDepthMaterial","target":"Material"}},{"data":{"source":"MeshLambertMaterial","target":"Material"}},{"data":{"source":"MeshLambertMaterial","target":"Vector3"}},{"data":{"source":"MeshNormalMaterial","target":"Material"}},{"data":{"source":"MeshPhongMaterial","target":"Material"}},{"data":{"source":"MeshPhongMaterial","target":"Vector3"}},{"data":{"source":"ShaderMaterial","target":"Material"}},{"data":{"source":"ShaderMaterial","target":"UniformsUtils"}},{"data":{"source":"SpriteMaterial","target":"Material"}},{"data":{"source":"Box3","target":"BufferGeometry"}},{"data":{"source":"Box3","target":"Geometry"}},{"data":{"source":"Box3","target":"Sphere"}},{"data":{"source":"Box3","target":"Vector3"}},{"data":{"source":"Euler","target":"Matrix4"}},{"data":{"source":"Euler","target":"Quaternion"}},{"data":{"source":"Euler","target":"Vector3"}},{"data":{"source":"Matrix3","target":"Vector3"}},{"data":{"source":"Matrix4","target":"Euler"}},{"data":{"source":"Matrix4","target":"Vector3"}},{"data":{"source":"Plane","target":"Matrix3"}},{"data":{"source":"Plane","target":"Vector3"}},{"data":{"source":"Quaternion","target":"Euler"}},{"data":{"source":"Quaternion","target":"Vector3"}},{"data":{"source":"Ray","target":"Vector3"}},{"data":{"source":"Sphere","target":"Box3"}},{"data":{"source":"Sphere","target":"Vector3"}},{"data":{"source":"Triangle","target":"Plane"}},{"data":{"source":"Triangle","target":"Vector3"}},{"data":{"source":"Vector3","target":"Euler"}},{"data":{"source":"Vector3","target":"Matrix4"}},{"data":{"source":"Vector3","target":"Quaternion"}},{"data":{"source":"Line","target":"BufferGeometry"}},{"data":{"source":"Line","target":"Geometry"}},{"data":{"source":"Line","target":"LineBasicMaterial"}},{"data":{"source":"Line","target":"Matrix4"}},{"data":{"source":"Line","target":"Object3D"}},{"data":{"source":"Line","target":"Ray"}},{"data":{"source":"Line","target":"Sphere"}},{"data":{"source":"Line","target":"Vector3"}},{"data":{"source":"Mesh","target":"BufferGeometry"}},{"data":{"source":"Mesh","target":"Face3"}},{"data":{"source":"Mesh","target":"Geometry"}},{"data":{"source":"Mesh","target":"Matrix4"}},{"data":{"source":"Mesh","target":"MeshBasicMaterial"}},{"data":{"source":"Mesh","target":"Object3D"}},{"data":{"source":"Mesh","target":"Ray"}},{"data":{"source":"Mesh","target":"Sphere"}},{"data":{"source":"Mesh","target":"Triangle"}},{"data":{"source":"Mesh","target":"Vector3"}},{"data":{"source":"Sprite","target":"BufferGeometry"}},{"data":{"source":"Sprite","target":"Object3D"}},{"data":{"source":"Sprite","target":"SpriteMaterial"}},{"data":{"source":"Sprite","target":"Vector3"}},{"data":{"source":"UniformsUtils","target":"Matrix4"}},{"data":{"source":"UniformsUtils","target":"Vector3"}}]},
  
  layout: {
    name: 'cose',
    directed: true,
    roots: '#a',
    padding:20
  }
});
  
​
​
}); // on dom ready
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
coballastpro
0viewers