JSNetworkX example 1

See http://felix-kling.de/JSNetworkX/examples/ and https://github.com/fkling/JSNetworkX/wiki/Drawing-graphs relies on http://d3js.org/

HTML

<script src="https://raw.github.com/fkling/JSNetworkX/master/jsnetworkx.js"></script>
<script src="http://d3js.org/d3.v2.min.js"></script>
<h1>JSNetworkX example 1</h1>
<div id="chart1" class="chart">
  <div class="description">Undirected weighted graph</div>
  <svg class="jsnx" pointer-events="all" width="400px" height="300px" style="opacity: 1; ">
</svg>
</div>

CSS

h1 {
    font-size: 1.4em;
    display: inline-block;
    margin-right: 20px;
}
.menu {
    display: inline-block;
}
.container {
    float: left;
    margin: 5px;
    width: 400px;
}
.chart {
    border: 1px solid #999;
    width: 400px;
    height: 300px;
    position: relative;
    background-color: #FFF;
}
.chart > .description {
    position: absolute;
    bottom: 5px;
    left: 5px;
}
.description {
    background-color: rgba(255,255,255,0.8);
    border-radius: 5px;
    padding: 5px;
}

JavaScript

var G = new jsnetworkx.Graph();
G.addNode(1, {label:"gxm date"});
G.addNode(2, {label:"gxm patient id"});
G.addNode(3, {label:"consent signatures"});
G.addNode(4, {label:"consent NRIC"});
G.addNode(5, {label:"consent date"});
G.addNode(6, {label:"gxm blood request"});
G.addNode(7, {label:"consent name"});
G.addNode(8, {label:"CLMM name"});

G.addEdge(1,2,{weight:10});
G.addEdge(1,3,{weight:3});
G.addEdge(1,5,{weight:4});
G.addEdge(1,6,{weight:29});
G.addEdge(1,8,{weight:13});
G.addEdge(2,4,{weight:4});
G.addEdge(3,6,{weight:21});
G.addEdge(3,7,{weight:15});
G.addEdge(3,8,{weight:12});
G.addEdge(3,4,{weight:9});
G.addEdge(4,5,{weight:7});
G.addEdge(4,7,{weight:15});
G.addEdge(4,8,{weight:17});
G.addEdge(5,6,{weight:1});
G.addEdge(5,7,{weight:20});

jsnx.draw(G, {
    element: '#chart1',  
    weighted: true, 
    edge_style: {
        'stroke-width': 10
    }
}, true);