Skip to content

Added two datasets, created config.json file and modified script.js #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sumitdixit117 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added two datasets, created config.json file and modified script.js #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
982b571
First Commit
sumitdixit117 Jan 2, 2025
ee39366
Add files via upload
sumitdixit117 Jan 3, 2025
e33c14e
Modified script.js
sumitdixit117 Jan 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"cards": [
{
"title": "Co-authors",
"description": "Co-authors relationships of Arxiv papers related to LLMs",
"link": "https://raw.githubusercontent.com/gramener/gramex-network/main/docs/coauthors.csv",
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a mi non massa commodo pulvinar. Praesent sapien ex, laoreet ut interdum sed, tincidunt eget sem. Vivamus sagittis augue risus. Suspendisse fermentum sollicitudin turpis, at dapibus tellus facilisis eu. Vestibulum porttitor mi lectus, id pretium sem aliquam id. Sed viverra, felis eu congue malesuada, felis nisi sollicitudin elit, sed vehicula nulla velit in lacus. Nam sed risus sed ipsum semper suscipit venenatis aliquet justo. Nullam gravida ipsum tincidunt lacinia bibendum. Cras ipsum mauris, vulputate ac egestas sed, sagittis at mi. In mauris nisi, dapibus eget pretium et, efficitur at nulla. Nullam gravida massa in nibh ultrices, sed tincidunt felis venenatis. Proin eleifend est vitae lectus ultrices porta id eget neque. Pellentesque sit amet ipsum sed erat posuere venenatis. Integer a ultrices mi. Suspendisse lectus purus, mattis tristique posuere vel, sollicitudin eget lacus.\n\nDonec feugiat ipsum arcu, sit amet porta est dictum in. Curabitur ut dapibus purus, at interdum sem. In vitae orci at libero pellentesque tincidunt at et odio. Donec ornare eros eros, eget viverra sapien semper sed. Vivamus varius vitae eros ac euismod. Etiam euismod, nunc ut pulvinar imperdiet, nisl mi facilisis libero, eu finibus nunc augue id magna. Phasellus in dolor egestas, tempor odio lacinia, maximus urna. Phasellus eu bibendum nulla. Suspendisse vitae magna congue, tristique massa quis, auctor augue. Nulla tincidunt cursus mi, vel maximus dolor ultricies vitae. Morbi congue rhoncus purus. Cras at augue at eros imperdiet egestas nec eu lacus.\n\nClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed elementum in turpis ac dictum. Donec id hendrerit enim. Fusce convallis mauris lectus, nec auctor arcu efficitur id. Mauris efficitur orci ut lacus pellentesque sollicitudin. Donec finibus aliquam velit. Mauris ac nulla tristique, tristique tellus euismod, tristique ligula. Ut eget diam a libero dapibus consectetur non id justo. Nam ullamcorper egestas quam, ut pharetra nisi blandit eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque felis elit, vulputate id venenatis eu, vulputate ut velit."
},
{
"title": "Religion by Country",
"description": "Explore the network of religions practiced by country",
"link": "https://raw.githubusercontent.com/gramener/gramex-network/main/docs/country-religion.csv",
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a mi non massa commodo pulvinar. Praesent sapien ex, laoreet ut interdum sed, tincidunt eget sem. Vivamus sagittis augue risus. Suspendisse fermentum sollicitudin turpis, at dapibus tellus facilisis eu. Vestibulum porttitor mi lectus, id pretium sem aliquam id. Sed viverra, felis eu congue malesuada, felis nisi sollicitudin elit, sed vehicula nulla velit in lacus. Nam sed risus sed ipsum semper suscipit venenatis aliquet justo. Nullam gravida ipsum tincidunt lacinia bibendum. Cras ipsum mauris, vulputate ac egestas sed, sagittis at mi. In mauris nisi, dapibus eget pretium et, efficitur at nulla. Nullam gravida massa in nibh ultrices, sed tincidunt felis venenatis. Proin eleifend est vitae lectus ultrices porta id eget neque. Pellentesque sit amet ipsum sed erat posuere venenatis. Integer a ultrices mi. Suspendisse lectus purus, mattis tristique posuere vel, sollicitudin eget lacus.\n\nDonec feugiat ipsum arcu, sit amet porta est dictum in. Curabitur ut dapibus purus, at interdum sem. In vitae orci at libero pellentesque tincidunt at et odio. Donec ornare eros eros, eget viverra sapien semper sed. Vivamus varius vitae eros ac euismod. Etiam euismod, nunc ut pulvinar imperdiet, nisl mi facilisis libero, eu finibus nunc augue id magna. Phasellus in dolor egestas, tempor odio lacinia, maximus urna. Phasellus eu bibendum nulla. Suspendisse vitae magna congue, tristique massa quis, auctor augue. Nulla tincidunt cursus mi, vel maximus dolor ultricies vitae. Morbi congue rhoncus purus. Cras at augue at eros imperdiet egestas nec eu lacus.\n\nClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed elementum in turpis ac dictum. Donec id hendrerit enim. Fusce convallis mauris lectus, nec auctor arcu efficitur id. Mauris efficitur orci ut lacus pellentesque sollicitudin. Donec finibus aliquam velit. Mauris ac nulla tristique, tristique tellus euismod, tristique ligula. Ut eget diam a libero dapibus consectetur non id justo. Nam ullamcorper egestas quam, ut pharetra nisi blandit eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque felis elit, vulputate id venenatis eu, vulputate ut velit."
},
{
"title": "GOT Characters",
"description": "Explore the interactions between different characters in GOT S01",
"link": "https://raw.githubusercontent.com/gramener/datasets/refs/heads/main/got_book1.csv",
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a mi non massa commodo pulvinar. Praesent sapien ex, laoreet ut interdum sed, tincidunt eget sem. Vivamus sagittis augue risus. Suspendisse fermentum sollicitudin turpis, at dapibus tellus facilisis eu. Vestibulum porttitor mi lectus, id pretium sem aliquam id. Sed viverra, felis eu congue malesuada, felis nisi sollicitudin elit, sed vehicula nulla velit in lacus. Nam sed risus sed ipsum semper suscipit venenatis aliquet justo. Nullam gravida ipsum tincidunt lacinia bibendum. Cras ipsum mauris, vulputate ac egestas sed, sagittis at mi. In mauris nisi, dapibus eget pretium et, efficitur at nulla. Nullam gravida massa in nibh ultrices, sed tincidunt felis venenatis. Proin eleifend est vitae lectus ultrices porta id eget neque. Pellentesque sit amet ipsum sed erat posuere venenatis. Integer a ultrices mi. Suspendisse lectus purus, mattis tristique posuere vel, sollicitudin eget lacus.\n\nDonec feugiat ipsum arcu, sit amet porta est dictum in. Curabitur ut dapibus purus, at interdum sem. In vitae orci at libero pellentesque tincidunt at et odio. Donec ornare eros eros, eget viverra sapien semper sed. Vivamus varius vitae eros ac euismod. Etiam euismod, nunc ut pulvinar imperdiet, nisl mi facilisis libero, eu finibus nunc augue id magna. Phasellus in dolor egestas, tempor odio lacinia, maximus urna. Phasellus eu bibendum nulla. Suspendisse vitae magna congue, tristique massa quis, auctor augue. Nulla tincidunt cursus mi, vel maximus dolor ultricies vitae. Morbi congue rhoncus purus. Cras at augue at eros imperdiet egestas nec eu lacus.\n\nClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed elementum in turpis ac dictum. Donec id hendrerit enim. Fusce convallis mauris lectus, nec auctor arcu efficitur id. Mauris efficitur orci ut lacus pellentesque sollicitudin. Donec finibus aliquam velit. Mauris ac nulla tristique, tristique tellus euismod, tristique ligula. Ut eget diam a libero dapibus consectetur non id justo. Nam ullamcorper egestas quam, ut pharetra nisi blandit eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque felis elit, vulputate id venenatis eu, vulputate ut velit."
},
{
"title": "Data Science Jobs",
"description": "Explore different Data science jobs in different categories and subcategories",
"link": "https://raw.githubusercontent.com/gramener/datasets/refs/heads/main/data_scientist_jobstreet_scraped_v2.csv",
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a mi non massa commodo pulvinar. Praesent sapien ex, laoreet ut interdum sed, tincidunt eget sem. Vivamus sagittis augue risus. Suspendisse fermentum sollicitudin turpis, at dapibus tellus facilisis eu. Vestibulum porttitor mi lectus, id pretium sem aliquam id. Sed viverra, felis eu congue malesuada, felis nisi sollicitudin elit, sed vehicula nulla velit in lacus. Nam sed risus sed ipsum semper suscipit venenatis aliquet justo. Nullam gravida ipsum tincidunt lacinia bibendum. Cras ipsum mauris, vulputate ac egestas sed, sagittis at mi. In mauris nisi, dapibus eget pretium et, efficitur at nulla. Nullam gravida massa in nibh ultrices, sed tincidunt felis venenatis. Proin eleifend est vitae lectus ultrices porta id eget neque. Pellentesque sit amet ipsum sed erat posuere venenatis. Integer a ultrices mi. Suspendisse lectus purus, mattis tristique posuere vel, sollicitudin eget lacus.\n\nDonec feugiat ipsum arcu, sit amet porta est dictum in. Curabitur ut dapibus purus, at interdum sem. In vitae orci at libero pellentesque tincidunt at et odio. Donec ornare eros eros, eget viverra sapien semper sed. Vivamus varius vitae eros ac euismod. Etiam euismod, nunc ut pulvinar imperdiet, nisl mi facilisis libero, eu finibus nunc augue id magna. Phasellus in dolor egestas, tempor odio lacinia, maximus urna. Phasellus eu bibendum nulla. Suspendisse vitae magna congue, tristique massa quis, auctor augue. Nulla tincidunt cursus mi, vel maximus dolor ultricies vitae. Morbi congue rhoncus purus. Cras at augue at eros imperdiet egestas nec eu lacus.\n\nClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed elementum in turpis ac dictum. Donec id hendrerit enim. Fusce convallis mauris lectus, nec auctor arcu efficitur id. Mauris efficitur orci ut lacus pellentesque sollicitudin. Donec finibus aliquam velit. Mauris ac nulla tristique, tristique tellus euismod, tristique ligula. Ut eget diam a libero dapibus consectetur non id justo. Nam ullamcorper egestas quam, ut pharetra nisi blandit eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque felis elit, vulputate id venenatis eu, vulputate ut velit."
}
]
}
180 changes: 86 additions & 94 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,86 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
<title>Network</title>
<style>
</style>
</head>

<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<div class="container-fluid">
<span>
<a class="navbar-brand me-1" href="#">Network</a>
</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="nav-item dropdown ms-auto" role="group" aria-label="Toggle dark mode" title="Toggle Dark Mode">
<button class="dark-theme-toggle btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (auto)">
<i class="bi bi-circle-half"></i> <span class="d-lg-none ms-2">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" data-bs-theme-value="light"><i class="me-2 bi bi-sun-fill"></i> Light</button></li>
<li><button class="dropdown-item" data-bs-theme-value="dark"><i class="me-2 bi bi-moon-stars-fill"></i> Dark</button></li>
<li><button class="dropdown-item" data-bs-theme-value="auto"><i class="me-2 bi bi-circle-half"></i> Auto</button></li>
</ul>
</div>
</div>
</div>
</nav>

<div class="container-fluid">
<h1 class="display-1 my-5 text-center">Network Explorer</h1>
<h2 class="display-6 text-center">A visual interface for knowledge graphs.</h2>

<div class="row my-5">
<div class="col-md">
<label for="fileInput" id="dropArea" class="d-block border border-2 border-primary rounded p-5 mx-auto" style="max-width: 500px; cursor: pointer;">
<i class="bi bi-cloud-upload display-1 text-primary mb-3"></i>
<h3>Drag & Drop CSV file here</h3>
<p>or click to choose file</p>
<input type="file" id="fileInput" class="d-none" accept=".csv">
</label>
</div>
<div class="col" id="demos">
<div class="row row-cols-1 row-cols-lg-2">
<div class="col py-3">
<a class="demo card h-100 text-decoration-none" href="https://raw.githubusercontent.com/gramener/gramex-network/main/docs/coauthors.csv">
<div class="card-body">
<h5 class="card-title">Co-authors</h5>
<p class="card-text">Co-authors relationships of Arxiv papers related to LLMs</p>
</div>
</a>
</div>
<div class="col py-3">
<a class="demo card h-100 text-decoration-none" href="https://raw.githubusercontent.com/gramener/gramex-network/main/docs/country-religion.csv">
<div class="card-body">
<h5 class="card-title">Religion by Country</h5>
<p class="card-text">Explore the network of religions practiced by country</p>
</div>
</a>
</div>
</div>
</div>
</div>


<div id="controls" class="mt-3"></div>
<div class="row">
<div class="col-md-9">
<svg id="network" width="1024" height="768" class="mx-auto w-100" viewBox="0 0 1024 768"></svg>
</div>
<div class="col-md-3" id="selection"></div>
</div>


</div>

<footer class="my-5 vh-100 d-flex align-items-center justify-content-center">
<h1 class="display-4">Designed by <a href="https://gramener.com/" class="text-reset link-offset-3 link-underline link-underline-opacity-25">Gramener</a></h1>
</footer>

<script defer src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" type="module" a></script>
<script defer src="https://cdn.jsdelivr.net/npm/@gramex/ui/dist/dark-theme.js" type="module"></script>
<script defer type="module" src="script.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
<title>Network</title>
<style>
</style>
</head>

<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<div class="container-fluid">
<span>
<a class="navbar-brand me-1" href="#">Network</a>
</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="nav-item dropdown ms-auto" role="group" aria-label="Toggle dark mode" title="Toggle Dark Mode">
<button class="dark-theme-toggle btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (auto)">
<i class="bi bi-circle-half"></i> <span class="d-lg-none ms-2">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" data-bs-theme-value="light"><i class="me-2 bi bi-sun-fill"></i> Light</button></li>
<li><button class="dropdown-item" data-bs-theme-value="dark"><i class="me-2 bi bi-moon-stars-fill"></i> Dark</button></li>
<li><button class="dropdown-item" data-bs-theme-value="auto"><i class="me-2 bi bi-circle-half"></i> Auto</button></li>
</ul>
</div>
</div>
</div>
</nav>

<div class="container-fluid">
<h1 class="display-1 my-5 text-center">Network Explorer</h1>
<h2 class="display-6 text-center">A visual interface for knowledge graphs.</h2>

<div class="row my-5">
<div class="col-md">
<label for="fileInput" id="dropArea" class="d-block border border-2 border-primary rounded p-5 mx-auto" style="max-width: 500px; cursor: pointer;">
<i class="bi bi-cloud-upload display-1 text-primary mb-3"></i>
<h3>Drag & Drop CSV file here</h3>
<p>or click to choose file</p>
<input type="file" id="fileInput" class="d-none" accept=".csv">
</label>
</div>
<div class="col" id="demos">
<div class="row row-cols-1 row-cols-lg-2">
</div>
</div>
<div class="container mt-4">
<div id="card-body-display" class="card card-body-display mx-auto" style="max-width: 700px; border: none">
<div class="card-body">
<h5 id="card-body-title" class="card-title text-center"></h5>
<p id="card-body-content" class="card-text"></p>
</div>
</div>
</div>
</div>


<div id="controls" class="mt-3"></div>
<div class="row">
<div class="col-md-9">
<svg id="network" width="1024" height="768" class="mx-auto w-100" viewBox="0 0 1024 768"></svg>
</div>
<div class="col-md-3" id="selection"></div>
</div>


</div>

<footer class="my-5 vh-100 d-flex align-items-center justify-content-center">
<h1 class="display-4">Designed by <a href="https://gramener.com/" class="text-reset link-offset-3 link-underline link-underline-opacity-25">Gramener</a></h1>
</footer>

<script defer src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" type="module" a></script>
<script defer src="https://cdn.jsdelivr.net/npm/@gramex/ui/dist/dark-theme.js" type="module"></script>
<script defer type="module" src="script.js"></script>
</body>

</html>
Loading