Skip to content

Instantly share code, notes, and snippets.

@canimus

canimus/graph.html

Created January 8, 2020 23:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save canimus/183c37085b2e1c5c346b6071d354a328 to your computer and use it in GitHub Desktop.
Save canimus/183c37085b2e1c5c346b6071d354a328 to your computer and use it in GitHub Desktop.
Download ZIP
JsGraphNetworkX
Raw
graph.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/static/d3.min.js"></script>
<script src="/static/vue.js"></script>
<script src="/static/jsnetworkx.js"></script>
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/bulma-0.8.0/css/bulma.min.css">
<title>Graph</title>
</head>
<body>
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<div class="tile is-ancestor">
<div class="tile is-parent is-12">
<article class="tile is-child box">
<p class="title">Mortgages</p>
<p class="subtitle">Network Diagram</p>
<div class="mermaid" id="canvas">
</div>
</article>
</div>
</div>
</div>
<script>
function computeGraph(position) {
let svg = mermaid.mermaidAPI.render("flowchart", "graph LR\n" + G.edges(position).map(a=>{return `${a[0]}-->${a[1]}`}).reduce((a,b)=>{return `${a}\n${b}`}))
document.getElementById("canvas").innerHTML = svg
}
var G = new jsnx.DiGraph();
data = []
fetch("/json").then(d=>d.json()).then(d=>{
data=d
let a = data.map(d=>d.fromStatus)
let b = data.map(d=>d.toStatus)
let union = new Set([...a, ...b]);
G.addNodesFrom(union)
G.addEdgesFrom(data.map(d=>{return [d.fromStatus, d.toStatus]}))
computeGraph(0)
})
</script>
<script src="/static/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:false});</script>
</body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment