UNPKG

visjs-network

Version:

A dynamic, browser-based network visualization library.

70 lines (69 loc) 2.16 kB
<!DOCTYPE html> <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> <html> <head> <meta http-equiv='content-type' content='text/html; charset=UTF8'> <title>Dynamic Data - Importing from Gephi (JSON)</title> <script type='text/javascript' src='../../exampleUtil.js'></script> <script type='text/javascript' src='../../../dist/vis.js'></script> <link type='text/css' rel='stylesheet' href='../../../dist/vis-network.min.css'> <style type='text/css'> #mynetwork { width: 800px; height: 800px; border: 1px solid lightgray; } div.nodeContent { position: relative; border: 1px solid lightgray; width: 480px; height: 780px; margin-top: -802px; margin-left: 810px; padding: 10px; } pre { padding: 5px; margin: 5px; } .string { color: green; } .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; } </style> </head> <body> <h2>Dynamic Data - Importing from Gephi (JSON)</h2> <div style='width:700px; font-size:14px; text-align: justify;'> This example shows how to import a JSON file exported by Gephi. The two options available for the import are available through the checkboxes. You can download the Gephi JSON exporter here: <a href='https://marketplace.gephi.org/plugin/json-exporter/' target='_blank'> https://marketplace.gephi.org/plugin/json-exporter/</a>. All of Gephi's attributes are also contained within the node elements. This means you can access all of this data through the DataSet. <br/> </div> <p> <label><input type='checkbox' id='fixed' checked='checked'/> Fix in place after import.</label><br> <label><input type='checkbox' id='parseColor'/> Parse the color instead of copy (adds borders, highlights etc.)</label> </p> <div id='mynetwork'></div> <div class='nodeContent'><h4>Node Content:</h4> <pre id='nodeContent'></pre> </div> <script src='./index.js' type='text/javascript'></script> </body> </html>