showing a graph

1 files changed, 56 insertions, 0 deletions

diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..6cc83e4
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,56 @@
+/**
+ * No.6092 site for Charles Stankievech
+ * - load db.json
+ * - map the nodes to a graph
+ * - click the nodes to open them
+ * - some of the nodes are images, others are 3D
+ */
+
+import ForceGraph3D from "3d-force-graph";
+
+async function main() {
+  const db = await loadDB();
+
+  const trees = {};
+  const data = { nodes: [], links: [] };
+
+  console.log(db);
+
+  db.page.forEach((item, index) => {
+    data.nodes.push({
+      id: index,
+    });
+    for (let tagIndex = 0; tagIndex < 8; tagIndex += 1) {
+      const value = item["tag_" + tagIndex];
+      if (value) {
+        if (value in trees) {
+          data.links.push({
+            source: choice(trees[value]),
+            target: index,
+          });
+          // don't link to the root node more than once!
+          if (trees[value][0]) {
+            trees[value].push(index);
+          } else {
+            trees[value] = [index];
+          }
+        } else {
+          trees[value] = [index];
+        }
+      }
+    }
+  });
+
+  let graph = ForceGraph3D();
+  graph(document.querySelector("#graph")).graphData(data);
+}
+
+const randint = (limit) => Math.floor(Math.random() * limit);
+const choice = (list) => list[randint(list.length)];
+
+async function loadDB() {
+  const request = await fetch("/db.json");
+  return await request.json();
+}
+
+main();