Skip to content

Instantly share code, notes, and snippets.

@secondsun

secondsun/network.html

Created September 8, 2020 20:04
Show Gist options
  • Save secondsun/729f4a6d6d29196feec960a11300ee33 to your computer and use it in GitHub Desktop.
Save secondsun/729f4a6d6d29196feec960a11300ee33 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
network.html
<!doctype html>
<html>
<head>
<title>Network</title>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<style type="text/css">
#mynetwork {
width: 1200px;
height: 800px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
const dataRaw = [
{
id: 1,
instructions: [
"0xa321",
"0x6000",
"0x6100",
"0x6208",
"0xd015",
"0xf21e",
"0x8024",
"0xd015",
"0xf21e",
"0x8024",
"0xd015",
"0xf21e",
"0x8024",
"0xd015",
"0xf21e",
"0x8024",
"0xd015",
"0xf21e",
"0x8024",
"0xd015",
"0xf21e",
"0x8024",
"0xd015",
"0xf21e",
"0x8024",
"0xd015",
"0x6605",
"0x6702",
"0x6a00",
"0x12b8"
],
exits: [
2
]
},
{
id: 2,
instructions: [
"0x6b00",
"0x6c00",
"0x229c"
],
exits: [
3
]
},
{
id: 3,
instructions: [
"0xa300",
"0xfa1e",
"0xf065",
"0x8200",
"0x7a01",
"0x641f",
"0x8a42",
"0x6020",
"0x611e",
"0x800e",
"0x811e",
"0xc303",
"0x73f8",
"0x ee"
],
exits: [
4,
17
]
},
{
id: 4,
instructions: [
"0xa2d8",
"0xfb1e",
"0xf355",
"0x7b04",
"0x7c01",
"0x5c60"
],
exits: [
5,
6
]
},
{
id: 5,
instructions: [
"0x12bc"
],
exits: [
2
]
},
{
id: 6,
instructions: [
"0x123c"
],
exits: [
7
]
},
{
id: 7,
instructions: [
"0x6b00",
"0x6c00",
"0xa2d8",
"0xfb1e",
"0xf365",
"0x22ce"
],
exits: [
8
]
},
{
id: 8,
instructions: [
"0x8e00",
"0x8d10",
"0x8ee6",
"0x8dd6",
"0x ee"
],
exits: [
9,
19
]
},
{
id: 9,
instructions: [
"0x225c"
],
exits: [
10
]
},
{
id: 10,
instructions: [
"0xa320",
"0xded1",
"0x ee"
],
exits: [
11,
20
]
},
{
id: 11,
instructions: [
"0x1262"
],
exits: [
12
]
},
{
id: 12,
instructions: [
"0xa2d8",
"0xfb1e",
"0xf365",
"0x8024",
"0x8134",
"0x8e00",
"0x8d10",
"0x8ee6",
"0x8dd6",
"0x84e0",
"0x65c2",
"0x8454",
"0x4f01"
],
exits: [
13,
23
]
},
{
id: 13,
instructions: [
"0x4d00"
],
exits: [
14
]
},
{
id: 14,
instructions: [
"0x84d0",
"0x65e1",
"0x8454",
"0x4f01"
],
exits: [
15,
25
]
},
{
id: 15,
instructions: [
"0x3302"
],
exits: [
16
]
},
{
id: 16,
instructions: [
"0x7301",
"0x1294"
],
exits: [
17
]
},
{
id: 17,
instructions: [
"0xa2d8",
"0xfb1e",
"0xf355",
"0x124c"
],
exits: [
18
]
},
{
id: 18,
instructions: [
"0x22ce"
],
exits: [
8
]
},
{
id: 19,
instructions: [
"0x225c"
],
exits: [
10
]
},
{
id: 20,
instructions: [
"0x7b04",
"0x7c01",
"0x5c60"
],
exits: [
21,
22
]
},
{
id: 21,
instructions: [
"0x1240"
],
exits: [
7
]
},
{
id: 22,
instructions: [
"0x123c"
],
exits: [
7
]
},
{
id: 23,
instructions: [
"0x1292"
],
exits: [
24
]
},
{
id: 24,
instructions: [
"0x229c"
],
exits: [
3
]
},
{
id: 25,
instructions: [
"0x1292"
],
exits: [
24
]
}
];
const nodesRaw = dataRaw.map(value => { return { id: value.id, label: value.instructions.join("\n"),title:value.id }; });
const linksRaw = dataRaw.map(value => { return { source: value.id, exits: value.exits } })
.flatMap(allLinks => { return allLinks.exits.map(exit => { return { from: allLinks.source, to: exit, arrows:'to' }; }) });
console.log(nodesRaw);
var nodes = new vis.DataSet(nodesRaw);
// create an array with edges
var edges = new vis.DataSet(linksRaw);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes:{
shape:'box',
mass:2
},
layout:{
hierarchical:{
enabled:false,
sortMethod: 'directed'
}
}
};
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