Skip to content

Instantly share code, notes, and snippets.

@coinables

coinables/index.html

Created June 13, 2018 04:51
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 coinables/034003b80148e88f68c641950ff08956 to your computer and use it in GitHub Desktop.
Save coinables/034003b80148e88f68c641950ff08956 to your computer and use it in GitHub Desktop.
Download ZIP
lightning nodes & edges
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- START SIGMA IMPORTS -->
<script src="../src/sigma.core.js"></script>
<script src="../src/conrad.js"></script>
<script src="../src/utils/sigma.utils.js"></script>
<script src="../src/utils/sigma.polyfills.js"></script>
<script src="../src/sigma.settings.js"></script>
<script src="../src/classes/sigma.classes.dispatcher.js"></script>
<script src="../src/classes/sigma.classes.configurable.js"></script>
<script src="../src/classes/sigma.classes.graph.js"></script>
<script src="../src/classes/sigma.classes.camera.js"></script>
<script src="../src/classes/sigma.classes.quad.js"></script>
<script src="../src/classes/sigma.classes.edgequad.js"></script>
<script src="../src/captors/sigma.captors.mouse.js"></script>
<script src="../src/captors/sigma.captors.touch.js"></script>
<script src="../src/renderers/sigma.renderers.canvas.js"></script>
<script src="../src/renderers/sigma.renderers.webgl.js"></script>
<script src="../src/renderers/sigma.renderers.svg.js"></script>
<script src="../src/renderers/sigma.renderers.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.utils.js"></script>
<script src="../src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="../src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="../src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="../src/middlewares/sigma.middlewares.copy.js"></script>
<script src="../src/misc/sigma.misc.animation.js"></script>
<script src="../src/misc/sigma.misc.bindEvents.js"></script>
<script src="../src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="../src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
<script src="../plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script>
<script src="../plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
<script src="../plugins/sigma.layout.forceAtlas2/worker.js"></script>
<script src="lib/jquery-2.1.1.min.js"></script>
<style>
html,body{
font-family: "Calibri", "Arial", "sans-serif";
}
#graph-container {
top: -20px;
bottom: 0;
left: 0;
right: 0;
height: 600px;
position: relative;
background-color: #fff;
}
.sigma-edge {
stroke: #57b6f2;
}
.sigma-node {
fill: #990188;
stroke: #14191C;
stroke-width: 2px;
}
.sigma-node:hover {
fill: blue;
}
.muted {
fill-opacity: 0.1;
stroke-opacity: 0.1;
stroke: #ccc;
}
.channels{
padding: 5px;
background-color: darkslateblue;
color: aliceblue;
border-radius: 8px;
border: 1px solid #000039;
margin: 3px;
}
.nodeAlias{
padding: 5px;
background-color: white;
color: #111111;
border-radius: 8px;
border: 1px solid #fff;
margin: 3px;
}
h4{
margin: -5px;
}
#searchOutput{
width: 30%;
position: absolute;
right: 4px;
top:50px;
text-align: right;
}
</style>
</head>
<body>
<div id="container">
<div id="graph-container"></div>
<br>
</div>
<input type="text" placeholder="SEARCH BY ALIAS" onkeyup="return nodeSearch();" id="search">
<div id="searchOutput"></div>
<script>
var nodesJSON = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "nodes.json",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
var channelsJSON = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "channels.json",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
let nodesLength = nodesJSON.nodes.length;
h = {
nodes: [],
connections: []
}
for(var i=0;i<nodesLength;i++){
h.nodes.push({
id: nodesJSON.nodes[i].nodeid,
label: nodesJSON.nodes[i].alias,
address: null
});
}
let innerNodes = h.nodes.length;
for(var i=0;i<innerNodes;i++){
let innerCounter = 0;
let channelsLength = channelsJSON.channels.length;
for(ii=0;ii<channelsLength;ii++){
if(channelsJSON.channels[ii].destination === h.nodes[i].id){
innerCounter++;
}
}
h.connections.push(innerCounter);
}
var i,
s,
N = nodesJSON.nodes.length,
E = channelsJSON.channels.length,
g = {
nodes: [],
edges: []
};
for (i = 0; i < N; i++)
g.nodes.push({
id: h.nodes[i].id,
label: h.nodes[i].label,
x: Math.random() *25,
y: Math.random() *10,
size: h.connections[i] +30,
color: '#991188'
});
for (i = 0; i < E; i++)
g.edges.push({
id: channelsJSON.channels[i].short_channel_id+i,
source: channelsJSON.channels[i].source,
target: channelsJSON.channels[i].destination,
size: Math.random(),
color: '#ccc'
});
function nodeSearch(){
document.getElementById("searchOutput").innerHTML = "";
var userInputText = document.getElementById("search").value;
var uitl = userInputText.length;
//if(uitl > 0){
var uilwr = userInputText.toLowerCase();
hn = h.nodes.length;
for(i=0;i<hn;i++){
if(h.nodes[i].label){
var checkNSub = h.nodes[i].label.substring(0, uitl);
var checkNLwer = checkNSub.toLowerCase();
if(checkNLwer === uilwr){
console.log(h.nodes[i].label+" "+h.connections[i]);
$("#searchOutput").append("<br><h4><span class='nodeAlias'>"+h.nodes[i].label+'</span><span class="channels">'+h.connections[i]+"</span><br><input type='text' id='"+i+"' value='"+h.nodes[i].id+"' readonly></h4>");
}
} else {
//
}
}
//}
}
// Instantiate sigma:
s = new sigma({
graph: g,
settings: {
enableHovering: false
}
});
s.addRenderer({
id: 'main',
type: 'svg',
container: document.getElementById('graph-container'),
freeStyle: true
});
s.refresh();
// Binding silly interactions
function mute(node) {
if (!~node.getAttribute('class').search(/muted/))
node.setAttributeNS(null, 'class', node.getAttribute('class') + ' muted');
}
function unmute(node) {
node.setAttributeNS(null, 'class', node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2'));
}
$('.sigma-node').click(function() {
// Muting
$('.sigma-node, .sigma-edge').each(function() {
mute(this);
});
// Unmuting neighbors
var neighbors = s.graph.neighborhood($(this).attr('data-node-id'));
neighbors.nodes.forEach(function(node) {
unmute($('[data-node-id="' + node.id + '"]')[0]);
});
neighbors.edges.forEach(function(edge) {
unmute($('[data-edge-id="' + edge.id + '"]')[0]);
});
});
s.bind('clickStage', function() {
$('.sigma-node, .sigma-edge').each(function() {
unmute(this);
});
});
if (location.protocol != 'https:')
{
location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment