Skip to content

Commit

Permalink
Merge pull request #15 from Marisha-Sahay/main
Browse files Browse the repository at this point in the history
  • Loading branch information
sorukumar authored Sep 18, 2024
2 parents 915ad4c + aaf7b5a commit 9f38bc5
Show file tree
Hide file tree
Showing 12 changed files with 383 additions and 64 deletions.
112 changes: 93 additions & 19 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@

<!-- Page Wrapper -->
<div id="wrapper">
<div>
<!-- Sidebar -->
<div>
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

<!-- Sidebar - Brand -->
Expand Down Expand Up @@ -62,9 +62,18 @@
<div id="node" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item text-wrap" href="pages/node1.html">Node Visualization</a>
<a class="collapse-item text-wrap" href="pages/node2.html">Node2</a>
<a class="collapse-item text-wrap" href="pages/NodeSegmentation.html">Node Segmentation</a>
<a class="collapse-item text-wrap" href="pages/node1.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Node as Bubble, broken down by Capacity Percentile</span>
</a>
<a class="collapse-item text-wrap" href="pages/node2.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>All nodes in One Chart</span>
</a>
<a class="collapse-item text-wrap" href="pages/NodeSegmentation.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Node distribution by Capacity and # of Channels</span>
</a>
<div class="collapse-divider"></div>
</div>
</div>
Expand All @@ -78,8 +87,18 @@
<div id="channel" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item text-wrap" href="pages/channel1.html">Distribution of Nodes by Capacity</a>
<a class="collapse-item text-wrap" href="pages/channel2.html">Distribution of Channels by fee rate</a>
<a class="collapse-item text-wrap" href="pages/channel1.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Distribution of Channels by Capacity</span>
</a>
<a class="collapse-item text-wrap" href="pages/chnldistfeebucket.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Distribution of Channels by fee rate</span>
</a>
<a class="collapse-item text-wrap" href="pages/feeDistChnSize.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Fee Distribution by Channel size</span>
</a>
<div class="collapse-divider"></div>
</div>
</div>
Expand All @@ -93,7 +112,36 @@
<div id="lngraph" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item text-wrap " href="pages/LorenzCurve.html">Lorenz Curve</a>
<a class="collapse-item text-wrap" href="pages/LorenzCurve.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Lorenz Curve</span>
</a>
<a class="collapse-item text-wrap" href="pages/GraphVisualization.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Graph Visualization</span>
</a>
<div class="collapse-divider"></div>
</div>
</div>
</li>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#rank" aria-expanded="true"
aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Rank</span>
</a>
<div id="rank" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item text-wrap" href="pages/ranking.html">
<i class="fas fa-fw fa-table"></i>
<span>Centrality Rankings of all the nodes </span>
</a>
<a class="collapse-item text-wrap" href="pages/prank.html">
<i class="fas fa-fw fa-table"></i>
<span>PRank - A custom Pleb rank of the nodes</span>
</a>
<div class="collapse-divider"></div>
</div>
</div>
Expand All @@ -107,18 +155,14 @@
<div id="playground" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item text-wrap" href="pages/wip.html">WIP</a>
<a class="collapse-item text-wrap" href="pages/wip.html">
<i class="fas fa-fw fa-wrench"></i>
<span>LN Dev Activity</span>
</a>
<div class="collapse-divider"></div>
</div>
</div>
</li>
<!-- Nav Item - Tables -->
<li class="nav-item">
<a class="nav-link" href="pages/ranking.html">
<i class="fas fa-fw fa-table"></i>
<span>Rankings</span></a>
</li>

<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">

Expand All @@ -129,14 +173,44 @@

</ul>
<!-- End of Sidebar -->
</div>

</div>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">

<!-- Main Content -->
<div id="content">
<div include-html="pages/includes/top-nav.html"></div>

<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>

<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">

<!-- Nav Item - Search Dropdown (Visible Only XS) -->
<li class="nav-item dropdown no-arrow d-sm-none">
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search fa-fw"></i>
</a>
</li>

<div class="topbar-divider d-none d-sm-block"></div>

<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="pages/aboutUs.html">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Contributors</span>
</a>
</li>

</ul>

</nav>
<div class="container-fluid">

<!-- Page Heading -->
Expand Down
117 changes: 117 additions & 0 deletions pages/GraphVisualization.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>PlebDashboard - Visualizing Lightning Network</title>

<!-- Critical CSS -->
<style>
#loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
#content {
display: none;
}
</style>

<!-- Preload critical resources -->
<link rel="preload" href="../vendor/jquery/jquery.min.js" as="script">
<link rel="preload" href="../js/include.js" as="script">

<!-- Critical scripts -->
<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../js/include.js"></script>
<script>
function loadCSS(href) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}

function showContent() {
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'block';
}

function loadResources() {
loadCSS('../vendor/fontawesome-free/css/all.min.css');
loadCSS('https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i');
loadCSS('../vendor/datatables/dataTables.bootstrap4.min.css');
loadCSS('https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.default.min.css');
loadCSS('../css/style.min.css');
}

document.addEventListener('DOMContentLoaded', function() {
includeHTML(function() {
loadResources();
showContent();
});
});
</script>
</head>
<body id="page-top">
<div id="loading">Loading...</div>
<!-- Page Wrapper -->
<div id="wrapper">
<div include-html="includes/side-nav.html"></div>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">

<!-- Main Content -->
<div id="content">
<div include-html="includes/top-nav.html"></div>
<div class="container-fluid">

<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800">Lightning network visualized as Graph</h1>
<div class="card-body">
<p>Here all nodes connected with the freeway ( Channel Size > 1 BTC) are visualized as graph. The tooltip for nodes and edges has additional info.
The node tooltip has info on nodes, capacity, # of channels, # of freeways, highways, or myways. The edge width is proportional to the channel size

</p>
</div>
<div style="display: flex; justify-content: center; width: 100%; padding-bottom: 20px;">
<iframe src="../viz/FreewayGraph.html" width="100%" height="1200px" frameborder="0"></iframe>
</div>

<!-- /.container-fluid -->
</div>

<div include-html="includes/footer.html"></div>
</div>
<!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>

<script src="../js/include.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="../js/sb-admin-2.min.js"></script>
</body>
</html>
6 changes: 3 additions & 3 deletions pages/NodeSegmentation.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
align-items: center;
z-index: 9999;
}
#main-content {
#content {
display: none;
}
</style>
Expand All @@ -44,7 +44,7 @@

function showContent() {
document.getElementById('loading').style.display = 'none';
document.getElementById('main-content').style.display = 'block';
document.getElementById('content').style.display = 'block';
}

function loadResources() {
Expand All @@ -64,7 +64,7 @@
</script>
</head>
<body id="page-top">

<div id="loading">Loading...</div>
<!-- Page Wrapper -->
<div id="wrapper">
<div include-html="includes/side-nav.html"></div>
Expand Down
20 changes: 2 additions & 18 deletions pages/channel1.html
Original file line number Diff line number Diff line change
Expand Up @@ -88,24 +88,8 @@ <h1 class="h3 mb-4 text-gray-800">Distribution of Channel by Channel Size</h1>
<!-- Add more <li> elements as needed -->
</ul>
</div>

<div class="row">
<div class="col-md-6">
<iframe src="../viz/ChnlsizeDist.html" width="100%" height="600px" frameborder="0"></iframe>
</div>

</div>

<div class="card mb-4">

</div>

<div class="row">
<div class="col-md-6">
<iframe src="../viz/Chnlsizecum.html" width="100%" height="600px" frameborder="0"></iframe>
</div>

</div>
<iframe src="../viz/ChnlsizeDist.html" width="100%" height="600px" frameborder="0"></iframe>
<iframe src="../viz/Chnlsizecum.html" width="100%" height="600px" frameborder="0"></iframe>
</div>

<div include-html="includes/footer.html"></div>
Expand Down
11 changes: 9 additions & 2 deletions pages/chnldistfeebucket.html
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,15 @@ <h1 class="h3 mb-4 text-gray-800">Channel End distribution by Fee bucket</h1>
<!-- Add more <li> elements as needed -->
</ul>
</div>
<iframe src="../viz/base_fee_distribution.png" width="100%" height="600px" frameborder="0"></iframe>
<iframe src="../viz/fee_rate_distribution.png" width="100%" height="600px" frameborder="0"></iframe>
<div class="row">
<div class="col-md-6">
<img src="../viz/base_fee_distribution.png" style="width: 100%; max-width: 600px;" alt="Base Fee Distribution">
</div>
<div class="col-md-6">
<img src="../viz/fee_rate_distribution.png" style="width: 100%; max-width: 600px;" alt="Fee Rate Distribution">
</div>
</div>

</div>

<!-- /.container-fluid -->
Expand Down
Loading

0 comments on commit 9f38bc5

Please sign in to comment.