A great introduction to the dataset on a curated set of examples
+
diff --git a/graphviz/frontend/src/VizSmall3D.tsx b/graphviz/frontend/src/VizSmall3D.tsx
new file mode 100644
index 0000000..0ca2be0
--- /dev/null
+++ b/graphviz/frontend/src/VizSmall3D.tsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import ForceGraph3D from "react-force-graph-3d";
+
+import data from "./data/data.json";
+import titlesData from "./data/titles.json";
+import HomeButton from "./utils/HomeButton";
+import { FloatingPanel } from "./utils/FloatingPanel";
+import { DetailsPanel } from "./utils/DetailsPanel";
+import { FloatingPanelStack } from "./utils/FloatingPanelStack";
+import { drawRoundedRect, getConnectedComponents } from "./graph/common";
+import { buildGraph } from "./VizSmallConnected";
+import * as THREE from 'three';
+import SpriteText from 'three-spritetext';
+
+export function VizSmall3D() {
+ const fgRef = useRef();
+ const [selectedNode, setSelectedNode] = useState(null);
+ const [minGraphSize, setMinGraphSize] = useState(10);
+ const [showLabel, setShowLabel] = useState(false);
+
+ const graphData = useMemo(() => {
+ const full = buildGraph(data);
+
+ const components = getConnectedComponents(full.nodes, full.links);
+
+ // keep only components large enough
+ const validIds = new Set(
+ components
+ .filter(comp => comp.length >= minGraphSize && comp.length < 50)
+ .flat()
+ );
+
+ const filteredNodes = full.nodes.filter(n => validIds.has(n.id));
+
+ const filteredLinks = full.links.filter(
+ l => validIds.has(l.source) && validIds.has(l.target)
+ );
+
+ return {
+ nodes: filteredNodes,
+ links: filteredLinks
+ };
+ }, [minGraphSize]);
+
+
+ return (
+
+
+ node.label}
+ nodeAutoColorBy="type"
+ linkColor={() => "black"}
+ linkWidth={2.5}
+ onNodeClick={(node) => setSelectedNode(node)}
+ backgroundColor="white"
+ nodeThreeObject={(node) => {
+ const circle = new THREE.Mesh(
+ new THREE.SphereGeometry(node.members.length * 2),
+ new THREE.MeshLambertMaterial({
+ color: node.type.includes("claim") ? "DarkMagenta" : "green",
+ transparent: true,
+ opacity: 0.75
+ }));
+
+ if (!showLabel) {
+ return circle;
+ }
+
+ const group = new THREE.Group();
+ group.add(circle);
+
+ const text = new SpriteText(node.label);
+ text.textHeight = 8;
+ text.offsetY = -12;
+ text.color = "black";
+
+ group.add(text);
+
+ return group;
+ }
+ }
+ />
+
+
+
+
+
+
+ setMinGraphSize(Number(e.target.value))}
+ />
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/graphviz/frontend/src/VizSmallConnected.tsx b/graphviz/frontend/src/VizSmallConnected.tsx
index 05b931c..c8320d9 100644
--- a/graphviz/frontend/src/VizSmallConnected.tsx
+++ b/graphviz/frontend/src/VizSmallConnected.tsx
@@ -10,7 +10,7 @@ import { DetailsPanel } from "./utils/DetailsPanel";
import { FloatingPanelStack } from "./utils/FloatingPanelStack";
import { drawRoundedRect, getConnectedComponents } from "./graph/common";
-function buildGraph(data) {
+export function buildGraph(data) {
const nodes = [];
const links = [];
diff --git a/graphviz/frontend/src/index.html b/graphviz/frontend/src/index.html
index d87e486..59a2142 100644
--- a/graphviz/frontend/src/index.html
+++ b/graphviz/frontend/src/index.html
@@ -4,7 +4,7 @@
-
Parcel React App
+
LLMs For Disinformation Analysis
diff --git a/graphviz/frontend/src/index.tsx b/graphviz/frontend/src/index.tsx
index efd88cf..c8b0f08 100644
--- a/graphviz/frontend/src/index.tsx
+++ b/graphviz/frontend/src/index.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import { VizSmallConnected } from "./VizSmallConnected";
import { VizTimeFilter } from "./VizTimeFilter";
import { Home } from "./Home";
+import { VizSmall3D } from "./VizSmall3D";
export function AppRouter() {
const [route, setRoute] = useState(() => window.location.hash);
@@ -19,6 +20,7 @@ export function AppRouter() {
if (route === "#small") return
;
if (route === "#time") return
;
+ if (route === "#3d") return
;
return
;
}
diff --git a/graphviz/frontend/static/small.png b/graphviz/frontend/static/small.png
index fe20612..596236e 100644
Binary files a/graphviz/frontend/static/small.png and b/graphviz/frontend/static/small.png differ
diff --git a/graphviz/frontend/static/time.png b/graphviz/frontend/static/time.png
index ca5fc8a..f8b7c6d 100644
Binary files a/graphviz/frontend/static/time.png and b/graphviz/frontend/static/time.png differ