Last active
May 31, 2018 10:52
-
-
Save bezany/e561ddaba11be51d58534ba32c6faf50 to your computer and use it in GitHub Desktop.
This file contains 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> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>DOT viewer</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css'> | |
<style> | |
#mynetwork { | |
width: calc(100vw - 10px); | |
height: calc(100vh - 40px); | |
border: 1px solid lightgray; | |
} | |
body { | |
padding: 0; | |
margin: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<input type='file' accept='text/plain' onchange='openFile(event)'><br> | |
<div id="mynetwork"></div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script> | |
<script type="text/javascript"> | |
function openFile (event) { | |
var input = event.target; | |
var reader = new FileReader(); | |
reader.onload = function(){ | |
var text = reader.result; | |
showGraph(text) | |
}; | |
reader.readAsText(input.files[0]); | |
}; | |
function showGraph (dotText) { | |
var container = document.getElementById('mynetwork'); | |
// provide data in the DOT language | |
var parsedData = vis.network.convertDot(dotText); | |
var data = { | |
nodes: parsedData.nodes, | |
edges: parsedData.edges | |
} | |
var options = parsedData.options; | |
// create a network | |
var network = new vis.Network(container, data, options); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment