Graph Viewer

A Next.js app for visualising directed graphs from CSV/Excel files, or building your own interactively.

Live demo: Vercel Page

---

Running locally

npm install
npm run dev

Then open http://localhost:3000.

---

The three viewers

Viewer	Purpose	File input
Viewer 1	Force-directed graph, longer link distances	CSV or XLSX
Viewer 2	Force-directed graph, tighter clustering, nodes stay in bounds	CSV or XLSX
Viewer 3	Manual graph builder — no file needed	—

---

File formats

Both viewers 1 and 2 accept .csv or .xlsx. The app auto-detects which format you're using based on the first cell.

Format A — Edge list (CSV or XLSX)

Use this when you have a list of connections with weights.

CSV — must have these exact column headers in row 1:

source_node,edge_weight,destination_node
Alice,3,Bob
Alice,1,Carol
Bob,2,Carol

• source_node — label for the origin node
• edge_weight — a whole number; the edge is drawn this many times (affects the force simulation's pull strength)
• destination_node — label for the destination node

XLSX — same three columns, headers in row 1, data from row 2. Cell A1 must not be empty (that's how the app tells it apart from Format B).

---

Format B — Adjacency matrix (XLSX only)

Use this when you have a grid showing the weight between every pair of nodes.

• Cell A1 must be empty
• Row 1 (from B1 onwards) — destination node names
• Column A (from A2 onwards) — source node names
• Each cell in the grid — the connection weight between that row's source and that column's destination (use 0 or leave blank for no connection)

Example:

	Bob	Carol	Dave
Alice	30	10
Bob		20	50
Carol	10		10

Note: cell values are divided by 10 internally, so a value of 30 becomes an edge weight of 3. Use blank or 0 for no connection.

---

Viewer 3 — Manual graph builder

No file needed. Build a graph by hand:

• Double-click the canvas to add a node at that position
• "+ Add Node" button adds a node at a random position
• Click a node to select it as the link source (turns yellow)
• Click another node to draw a directed edge between them
• Drag nodes to reposition them
• "Release after drag" checkbox — when checked, nodes float free after dragging; when unchecked, they stay pinned where you drop them

---

Project structure

pages/
  index.js          # main page, file parsing, viewer switcher
  _app.js
  _document.js
  api/
    hello.js
components/
  GraphViewer.js    # Viewer 1
  GraphViewer2.js   # Viewer 2
  GraphViewer3.js   # Viewer 3 (manual builder)
styles/
  style.css

---

Tech stack

• Next.js 14
• D3.js v7 — force simulation and SVG rendering
• PapaParse — CSV parsing
• SheetJS (xlsx) — Excel parsing