diff --git a/config.json b/config.json new file mode 100644 index 0000000..94846ae --- /dev/null +++ b/config.json @@ -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." + } + ] +} diff --git a/index.html b/index.html index 4ff2590..8738ddb 100644 --- a/index.html +++ b/index.html @@ -1,94 +1,86 @@ - - - - - - - - - Network - - - - - - -
-

Network Explorer

-

A visual interface for knowledge graphs.

- -
-
- -
- -
- - -
-
-
- -
-
-
- - -
- - - - - - - - - + + + + + + + + + Network + + + + + + +
+

Network Explorer

+

A visual interface for knowledge graphs.

+ +
+
+ +
+
+
+
+
+
+
+
+
+

+
+
+
+
+ + +
+
+
+ +
+
+
+ + +
+ + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js index a86454b..26eaeaa 100644 --- a/script.js +++ b/script.js @@ -1,149 +1,218 @@ -import { network } from "https://cdn.jsdelivr.net/npm/@gramex/network@2"; -import { kpartite } from "https://cdn.jsdelivr.net/npm/@gramex/network@2/dist/kpartite.js"; -import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7.8.5/+esm"; -import { render, html } from "https://cdn.jsdelivr.net/npm/lit-html@3/+esm"; - -const fileInput = document.getElementById("fileInput"); -const controls = document.getElementById("controls"); -let data, nodeLinks; - -document.addEventListener("DOMContentLoaded", () => { - fileInput.addEventListener("change", handleFileUpload); - - // Add event listener for demo clicks - document.getElementById("demos").addEventListener("click", handleDemoClick); -}); - -function handleFileUpload(event) { - const file = event.target.files[0]; - if (file) { - const reader = new FileReader(); - reader.onload = (e) => processCSVData(e.target.result); - reader.readAsText(file); - } else { - controls.innerHTML = ""; - } -} - -async function handleDemoClick(event) { - const demoLink = event.target.closest(".demo"); - if (demoLink) { - event.preventDefault(); - processCSVData(await fetch(demoLink.href).then((r) => r.text())); - } -} - -function processCSVData(csvContent) { - data = d3.csvParse(csvContent); - renderControls(data.columns); -} - -const nodeColor = (d) => (d.key == "source" ? "rgba(255,0,0,0.5)" : "rgba(0,0,255,0.5)"); - -function renderControls(headers) { - headers = headers.filter((d) => d.trim()); - const controlsTemplate = html` -
-
- - -
-
- - -
-
- - -
-
- -
- - 50% -
-
-
- `; - - render(controlsTemplate, controls); - updateNetwork(); - - // Add event listener for the range input - const thresholdRange = document.getElementById("thresholdRange"); - const thresholdValue = document.getElementById("thresholdValue"); - thresholdRange.addEventListener("input", (e) => { - thresholdValue.textContent = `${Math.round(e.target.value * 100)}%`; - drawNetwork(); - }); -} - -controls.addEventListener("change", (e) => { - if (e.target.id == "sourceSelect" || e.target.id == "targetSelect" || e.target.id == "metricSelect") updateNetwork(); -}); - -function updateNetwork() { - const source = document.getElementById("sourceSelect").value; - const target = document.getElementById("targetSelect").value; - const metric = document.getElementById("metricSelect").value; - - if (source && target) { - nodeLinks = kpartite(data, { source, target }, { metric: metric || 1 }); - nodeLinks.nodes.forEach((node) => (node.value = JSON.parse(node.id)[1])); - nodeLinks.links.sort((a, b) => b.metric - a.metric); - nodeLinks.links.forEach((link, index) => (link._rank = index)); - console.log(nodeLinks.links); - } - drawNetwork(); -} - -function drawNetwork() { - const { nodes, links } = nodeLinks; - const threshold = +document.getElementById("thresholdRange").value; - const filteredLinks = links.filter((link) => link._rank / links.length >= threshold); - const graph = network("#network", { nodes, links: filteredLinks, brush, d3 }); - - graph.nodes - .attr("fill", nodeColor) - .attr("r", 5) - .append("title") - .text((d) => `${d.id}: ${d.metric}`); - - graph.links.attr("stroke", "rgba(var(--bs-body-color-rgb),0.2)"); -} - -function brush(nodes) { - const cols = { - source: document.getElementById("sourceSelect").value, - target: document.getElementById("targetSelect").value, - }; - const listGroupTemplate = html` - - `; - render(listGroupTemplate, document.getElementById("selection")); -} +import { network } from "https://cdn.jsdelivr.net/npm/@gramex/network@2"; +import { kpartite } from "https://cdn.jsdelivr.net/npm/@gramex/network@2/dist/kpartite.js"; +import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7.8.5/+esm"; +import { render, html } from "https://cdn.jsdelivr.net/npm/lit-html@3/+esm"; + +const fileInput = document.getElementById("fileInput"); +const controls = document.getElementById("controls"); +let data, nodeLinks; + +document.addEventListener("DOMContentLoaded", () => { + fileInput.addEventListener("change", handleFileUpload); + + const cardTemplate = (card) => html` +
+ +
+
${card.title}
+

${card.description}

+
+ +
+ `; + + fetch("config.json") + .then((response) => response.json()) + .then((data) => { + const container = document.querySelector("#demos .row"); + let cardsHtml = html``; + data.cards.forEach((card) => { + cardsHtml = html`${cardsHtml}${cardTemplate(card)}`; + }); + render(cardsHtml, container); + + container.addEventListener("click", function (event) { + if (event.target.closest(".demo")) { + event.preventDefault(); + const card = data.cards.find( + (c) => c.link === event.target.closest(".demo").href + ); + document.getElementById("card-body-title").innerText = card.title; + document.getElementById("card-body-content").innerText = card.body; + document.getElementById("card-body-display").style.display = "block"; + } + }); + }) + .catch((error) => console.error("Error fetching the config file:", error)); + + // Add event listener for demo clicks + document.getElementById("demos").addEventListener("click", handleDemoClick); +}); + +function handleFileUpload(event) { + const file = event.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (e) => processCSVData(e.target.result); + reader.readAsText(file); + } else { + controls.innerHTML = ""; + } +} + +async function handleDemoClick(event) { + const demoLink = event.target.closest(".demo"); + if (demoLink) { + event.preventDefault(); + processCSVData(await fetch(demoLink.href).then((r) => r.text())); + } +} + +function processCSVData(csvContent) { + data = d3.csvParse(csvContent); + renderControls(data.columns); +} + +const nodeColor = (d) => + d.key == "source" ? "rgba(255,0,0,0.5)" : "rgba(0,0,255,0.5)"; + +function renderControls(headers) { + headers = headers.filter((d) => d.trim()); + const controlsTemplate = html` +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + 50% +
+
+
+ `; + + render(controlsTemplate, controls); + updateNetwork(); + + // Add event listener for the range input + const thresholdRange = document.getElementById("thresholdRange"); + const thresholdValue = document.getElementById("thresholdValue"); + thresholdRange.addEventListener("input", (e) => { + thresholdValue.textContent = `${Math.round(e.target.value * 100)}%`; + drawNetwork(); + }); +} + +controls.addEventListener("change", (e) => { + if ( + e.target.id == "sourceSelect" || + e.target.id == "targetSelect" || + e.target.id == "metricSelect" + ) + updateNetwork(); +}); + +function updateNetwork() { + const source = document.getElementById("sourceSelect").value; + const target = document.getElementById("targetSelect").value; + const metric = document.getElementById("metricSelect").value; + + if (source && target) { + nodeLinks = kpartite(data, { source, target }, { metric: metric || 1 }); + nodeLinks.nodes.forEach((node) => (node.value = JSON.parse(node.id)[1])); + nodeLinks.links.sort((a, b) => b.metric - a.metric); + nodeLinks.links.forEach((link, index) => (link._rank = index)); + console.log(nodeLinks.links); + } + drawNetwork(); +} + +function drawNetwork() { + const { nodes, links } = nodeLinks; + const threshold = +document.getElementById("thresholdRange").value; + const filteredLinks = links.filter( + (link) => link._rank / links.length >= threshold + ); + const graph = network("#network", { nodes, links: filteredLinks, brush, d3 }); + + graph.nodes + .attr("fill", nodeColor) + .attr("r", 5) + .append("title") + .text((d) => `${d.id}: ${d.metric}`); + + graph.links.attr("stroke", "rgba(var(--bs-body-color-rgb),0.2)"); +} + +function brush(nodes) { + const cols = { + source: document.getElementById("sourceSelect").value, + target: document.getElementById("targetSelect").value, + }; + const listGroupTemplate = html` + + `; + render(listGroupTemplate, document.getElementById("selection")); +}