Last active
October 21, 2015 17:21
-
-
Save maxkfranz/f70c9e45c43f40f7dfe1 to your computer and use it in GitHub Desktop.
grid demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE> | |
| <html> | |
| <head> | |
| <title>Grid demo</title> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> | |
| <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> | |
| <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script> | |
| <!-- for testing with local version of cytoscape.js --> | |
| <!-- <script src="../cytoscape.js/build/cytoscape.js"></script> --> | |
| <style> | |
| body { | |
| font-family: helvetica; | |
| font-size: 14px; | |
| } | |
| #cy { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| z-index: 999; | |
| } | |
| h1 { | |
| opacity: 0.5; | |
| font-size: 1em; | |
| } | |
| </style> | |
| <script> | |
| $(function(){ | |
| var cy = window.cy = cytoscape({ | |
| container: document.getElementById('cy'), | |
| boxSelectionEnabled: false, | |
| autounselectify: true, | |
| layout: { | |
| name: 'grid' | |
| }, | |
| style: [ | |
| { | |
| selector: 'node', | |
| style: { | |
| 'height': 20, | |
| 'width': 20, | |
| 'background-color': '#18e018' | |
| } | |
| }, | |
| { | |
| selector: 'edge', | |
| style: { | |
| 'curve-style': 'haystack', | |
| 'haystack-radius': 0, | |
| 'width': 5, | |
| 'opacity': 0.5, | |
| 'line-color': '#a2efa2' | |
| } | |
| } | |
| ], | |
| elements: [{"data":{"id":"n40","weight":53},"position":{"x":50,"y":45},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n41","weight":23},"position":{"x":150,"y":45},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n42","weight":0},"position":{"x":250,"y":45},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n43","weight":50},"position":{"x":350,"y":45},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n44","weight":60},"position":{"x":450,"y":45},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n45","weight":60},"position":{"x":550,"y":45},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n46","weight":39},"position":{"x":50,"y":135},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n47","weight":96},"position":{"x":150,"y":135},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n48","weight":68},"position":{"x":250,"y":135},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n49","weight":83},"position":{"x":350,"y":135},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n50","weight":77},"position":{"x":450,"y":135},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n51","weight":40},"position":{"x":550,"y":135},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n52","weight":84},"position":{"x":50,"y":225},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n53","weight":47},"position":{"x":150,"y":225},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n54","weight":27},"position":{"x":250,"y":225},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n55","weight":14},"position":{"x":350,"y":225},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n56","weight":3},"position":{"x":450,"y":225},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n57","weight":13},"position":{"x":550,"y":225},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n58","weight":60},"position":{"x":50,"y":315},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n59","weight":72},"position":{"x":150,"y":315},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n60","weight":55},"position":{"x":250,"y":315},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n61","weight":3},"position":{"x":350,"y":315},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n62","weight":65},"position":{"x":450,"y":315},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n63","weight":57},"position":{"x":550,"y":315},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n64","weight":24},"position":{"x":50,"y":405},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n65","weight":68},"position":{"x":150,"y":405},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n66","weight":33},"position":{"x":250,"y":405},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n67","weight":26},"position":{"x":350,"y":405},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n68","weight":54},"position":{"x":450,"y":405},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"n69","weight":42},"position":{"x":550,"y":405},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e121","weight":19,"source":"n41","target":"n50"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e129","weight":31,"source":"n65","target":"n58"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e131","weight":90,"source":"n53","target":"n43"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e132","weight":36,"source":"n52","target":"n58"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e138","weight":65,"source":"n54","target":"n55"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e142","weight":93,"source":"n40","target":"n45"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e143","weight":58,"source":"n63","target":"n68"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e144","weight":6,"source":"n66","target":"n56"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e149","weight":59,"source":"n67","target":"n45"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e155","weight":66,"source":"n43","target":"n56"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e162","weight":39,"source":"n60","target":"n63"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e164","weight":72,"source":"n42","target":"n68"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e167","weight":45,"source":"n43","target":"n48"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e168","weight":10,"source":"n61","target":"n67"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e173","weight":6,"source":"n56","target":"n40"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e176","weight":36,"source":"n48","target":"n67"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e184","weight":59,"source":"n67","target":"n43"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e210","weight":82,"source":"n59","target":"n66"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e215","weight":47,"source":"n51","target":"n51"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e216","weight":70,"source":"n46","target":"n67"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e218","weight":33,"source":"n46","target":"n62"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e222","weight":19,"source":"n49","target":"n62"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e224","weight":92,"source":"n47","target":"n56"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e234","weight":97,"source":"n42","target":"n63"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e238","weight":73,"source":"n58","target":"n65"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e239","weight":99,"source":"n47","target":"n59"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e260","weight":54,"source":"n51","target":"n45"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e261","weight":15,"source":"n63","target":"n45"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e263","weight":43,"source":"n47","target":"n42"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e268","weight":69,"source":"n44","target":"n49"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e272","weight":77,"source":"n50","target":"n61"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e273","weight":95,"source":"n44","target":"n57"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e274","weight":70,"source":"n48","target":"n58"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e278","weight":75,"source":"n57","target":"n41"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e293","weight":50,"source":"n44","target":"n63"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e295","weight":98,"source":"n50","target":"n66"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e298","weight":76,"source":"n49","target":"n60"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e299","weight":6,"source":"n42","target":"n65"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e307","weight":69,"source":"n52","target":"n47"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e308","weight":62,"source":"n53","target":"n62"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e309","weight":66,"source":"n66","target":"n53"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e311","weight":94,"source":"n65","target":"n55"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e312","weight":31,"source":"n58","target":"n42"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""}] | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Grid demo</h1> | |
| <div id="cy"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment