Build, animate, and analyze relationship networks over time — entirely in your browser.
RelNet is a single-page tool for mapping how a network of people and organizations evolves across years. It was built to visualize the growth of an international research collaboration, but it works for any time‑evolving network: research groups, co‑authorship, teams, communities, alumni, supply chains — anything made of people, organizations, and the ties between them.
No installation, no accounts, no server. Everything runs locally in the browser, and your data never leaves your machine.
https://tpy37.github.io/relnet/
The live page opens with a small fictional demo dataset so you can click around immediately. Use Import / Templates → Clear all to start from scratch, or Reload demo data to bring it back.
A 30-second tour — switching between years, connecting people with a relationship type, opening the analysis dashboard (centrality + charts), and the animation renderer. Everything runs in your browser.
- Map a network across time. Add as many years (or time points) as you like and switch between them with the tabs. "Copy from previous" carries a year's ties forward so you only edit the changes.
- Click to connect. Select two or more people, then click a relationship button to link them. Selecting 3+ people links every pair and tags them as one group.
- Edit everything. People, organizations, relationship types (name, color, line style, analysis weight), and years are all editable in the Manage panel — nothing is hard‑coded.
- Import your own data. Bring in people and links from CSV (fill a template in a spreadsheet), or load a full saved project from JSON.
- Download templates with one click so you never have to guess the format.
- Save & reload your whole project as a JSON file. Work is also autosaved in your browser between visits.
- 📊 Analyze the network: degree, weighted degree, closeness, betweenness, and eigenvector centrality per year, with charts of how a chosen person's position changes over time and a ranked leaderboard for any year.
- 🎬 Render an animation of the network growing year by year and download it as an animated GIF (or record a WebM video) — great for slides, papers, and the web.
- Open https://tpy37.github.io/relnet/ (or open
index.htmllocally — see below). - Click two people in the graph or the left sidebar, then click Collaboration (or another relationship type).
- Switch years with the tabs at the top; use Copy from previous to carry ties forward.
- Add your own people under ⚙ Manage, or bulk‑import via ⇅ Import / Templates.
- Hit 📊 Analyze for metrics, or 🎬 Animation render to produce a GIF.
- Click 💾 Save to download your project; reload it later with Load.
Because RelNet is a single static file, you can just open it:
git clone https://github.com/tpy37/relnet.git
cd relnet
open index.html # macOS (use "start" on Windows, "xdg-open" on Linux)If your browser blocks the GIF export when opening the file directly (some browsers restrict workers on file://), serve it over a tiny local server instead:
python3 -m http.server 8000
# then visit http://localhost:8000| column | required | notes |
|---|---|---|
label |
yes | short name shown on the node (e.g. CARTER) |
full_name |
no | full name / role, shown on hover |
organization |
no | created automatically if new; defaults to Independent |
faculty |
no | yes/no — faculty are drawn larger |
| column | required | notes |
|---|---|---|
year |
yes | matches a year tab; created if it doesn't exist |
person_a |
yes | matched by label (or id) |
person_b |
yes | matched by label (or id) |
relationship |
yes | one of your relationship type ids/labels |
The Save button exports a complete project — organizations, relationship types, people, years, links, and node positions. Loading it restores everything exactly. RelNet also reads the older AsPIRE network export format, reconstructing organizations and relationship types automatically.
Download ready‑to‑edit copies of all three from inside the app (⇅ Import / Templates) or from the templates/ folder.
The metrics mirror standard network‑science definitions and match NetworkX:
- Closeness uses the Wasserman–Faust formulation (handles disconnected graphs).
- Betweenness is computed with Brandes' algorithm on weighted shortest paths and normalized.
- Eigenvector centrality is found by power iteration (L2‑normalized).
- Each relationship type carries a weight (editable under Manage → Relationship types) used for the weighted/distance‑based measures.
These are exploratory descriptive measures — useful for spotting central or bridging people and tracking integration over time, not statistical tests.
- Create a repository (e.g.
relnet) on your GitHub account and push these files (seePUBLISH.mdfor exact commands). - On GitHub, open Settings → Pages.
- Under Build and deployment → Source, choose Deploy from a branch.
- Pick the
mainbranch and the/ (root)folder, then Save. - Wait ~1 minute. Your site goes live at
https://<your-username>.github.io/<repo>/.
The included empty .nojekyll file tells GitHub Pages to serve the files as‑is.
- D3.js v7 for the force‑directed graph and layout.
- gif.js for client‑side GIF encoding (loaded only when you render).
- Plain HTML/CSS/JS for everything else — no build step, no framework.
Everything runs in your browser. Imported files are read locally, autosave uses your browser's local storage, and exports download straight to your computer. Nothing is uploaded anywhere.
MIT — free to use, modify, and share.