Skip to content

Instantly share code, notes, and snippets.

@maxkfranz

maxkfranz/index.html

Last active March 29, 2021 09:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maxkfranz/e52c2fbc0b09edd6ec46 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maxkfranz/e52c2fbc0b09edd6ec46 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. maxkfranz revised this gist Apr 11, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@
    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

    <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>

    <style>
    body {
  2. maxkfranz revised this gist Jun 8, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -68,7 +68,8 @@
    'width': 4,
    'target-arrow-shape': 'triangle',
    'line-color': '#9dbaea',
    'target-arrow-color': '#9dbaea'
    'target-arrow-color': '#9dbaea',
    'curve-style': 'bezier'
    }
    }
    ],
  3. maxkfranz revised this gist Oct 21, 2015. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@
    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

    <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.1/cytoscape-dagre.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>

    <style>
    body {
    @@ -43,6 +43,9 @@
    var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),

    boxSelectionEnabled: false,
    autounselectify: true,

    layout: {
    name: 'dagre'
    },
  4. maxkfranz revised this gist Oct 14, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@
    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

    <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.0/cytoscape-dagre.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.1/cytoscape-dagre.js"></script>

    <style>
    body {
  5. maxkfranz renamed this gist Oct 8, 2015. 1 changed file with 0 additions and 0 deletions.
    0 cytoscape-dagre.html → index.html
    View file
    File renamed without changes.
  6. maxkfranz created this gist Oct 8, 2015.
    122 changes: 122 additions & 0 deletions cytoscape-dagre.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,122 @@
    <!DOCTYPE>

    <html>

    <head>
    <title>cytoscape-dagre.js 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>-->

    <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.0/cytoscape-dagre.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'),

    layout: {
    name: 'dagre'
    },

    style: [
    {
    selector: 'node',
    style: {
    'content': 'data(id)',
    'text-opacity': 0.5,
    'text-valign': 'center',
    'text-halign': 'right',
    'background-color': '#11479e'
    }
    },

    {
    selector: 'edge',
    style: {
    'width': 4,
    'target-arrow-shape': 'triangle',
    'line-color': '#9dbaea',
    'target-arrow-color': '#9dbaea'
    }
    }
    ],

    elements: {
    nodes: [
    { data: { id: 'n0' } },
    { data: { id: 'n1' } },
    { data: { id: 'n2' } },
    { data: { id: 'n3' } },
    { data: { id: 'n4' } },
    { data: { id: 'n5' } },
    { data: { id: 'n6' } },
    { data: { id: 'n7' } },
    { data: { id: 'n8' } },
    { data: { id: 'n9' } },
    { data: { id: 'n10' } },
    { data: { id: 'n11' } },
    { data: { id: 'n12' } },
    { data: { id: 'n13' } },
    { data: { id: 'n14' } },
    { data: { id: 'n15' } },
    { data: { id: 'n16' } }
    ],
    edges: [
    { data: { source: 'n0', target: 'n1' } },
    { data: { source: 'n1', target: 'n2' } },
    { data: { source: 'n1', target: 'n3' } },
    { data: { source: 'n4', target: 'n5' } },
    { data: { source: 'n4', target: 'n6' } },
    { data: { source: 'n6', target: 'n7' } },
    { data: { source: 'n6', target: 'n8' } },
    { data: { source: 'n8', target: 'n9' } },
    { data: { source: 'n8', target: 'n10' } },
    { data: { source: 'n11', target: 'n12' } },
    { data: { source: 'n12', target: 'n13' } },
    { data: { source: 'n13', target: 'n14' } },
    { data: { source: 'n13', target: 'n15' } },
    ]
    },
    });

    });
    </script>
    </head>

    <body>
    <h1>cytoscape-dagre demo</h1>

    <div id="cy"></div>

    </body>

    </html>