CiteWeb 🕸️

Turn any paper into a living citation graph. Paste a DOI and CiteWeb maps its references (papers it cites) and its citations (papers that cite it), then lets you keep adding DOIs — and even authors — to grow the web. Shared references, citations and authors naturally overlap.

Features

• Start from a DOI or an author — paste a DOI for a paper graph, or an ORCID / OpenAlex link for an author + co-authorship graph.
• Expand any node — references & citations for papers, Papers / Co-authors for authors, and find more papers in a topic for topics.
• Rich node detail — click a paper for its abstract, venue, and an open-access full-text link; click an author for their works, citations, h-index, affiliation, and ORCID. Loaded on click, so the graph stays fast.
• Authors — add a paper's authors individually, or load all of an author's works; co-author edges are weighted by shared papers.
• Topics 🏷 — add a paper's OpenAlex topics as nodes (shared topics cluster papers), with keywords shown as chips in the info panel. Click a topic to pull in its top papers — 15 at first, then 5 more on each click.
• Reference recommender ✨ — blends Semantic Scholar similarity with citation-graph structure — bibliographic coupling (shared references) and co-citation — sortable by best match / similarity / citations, with a shortlist and BibTeX / RIS / CSV export.
• Graph insights 📊 — graph-theory analysis run in your browser from the Analyze tab. Influence ranks papers by PageRank and surfaces betweenness bridges (influential nodes grow and glow). Clusters groups nodes into communities and colors the canvas by group. Click any node to see its own metrics — connections, influence, bridge, community — in the panel.
• Connection finder 🔗 — Trace connection from a node, then pick another, to light up the shortest path between them and read each hop's relationship. Optionally watch the search replay in slow motion, ring by ring.
• Import a bibliography (.bib / .ris / DOIs) to seed the graph and surface missing references.
• Save & share — the graph auto-saves to your browser (a reload restores it exactly), and the URL stays in sync (?g=…) so the address bar is always a shareable link that rebuilds the graph from your added papers and authors.
• Floating, collapsible sidebar to manage Papers, Authors, Topics, and the shortlist, plus a search box to filter them, node-size / spacing controls, and a node breakdown.
• Export as image 🖼 — save the graph (including any open node box and the left panel) to a PNG.
• Map-style zoom controls plus a dark / light theme toggle (remembered).
• Data from Crossref + OpenAlex + Semantic Scholar — no API key, no backend.

Color legend

Color	Meaning
🌸 Pink	Seed paper (a DOI you added)
🔵 Blue	References (works the paper cites)
🟠 Orange	Cited by (works that cite the paper)
🟢 Teal	Author
🟣 Purple	An author's other works
🟡 Amber	Suggested reference
🟩 Green	Topic

Run it

npm install
npm run dev      # http://localhost:5173

Build for production:

npm run build
npm run preview

Lint:

npm run lint

Try it

Use the example DOI on the home page: 10.1371/journal.pcsy.0000095

Tech

• React + Vite
• react-router-dom (routing)
• zustand (graph state shared across pages)
• react-force-graph-2d + d3-force (force-directed canvas graph)
• Crossref + OpenAlex APIs

How it works

src/api.js fetches a paper from OpenAlex and Crossref in parallel, preferring Crossref's deposited reference list and falling back to OpenAlex. Citations come from OpenAlex (filter=cites:<id>), authors from authorships, and an author's works from filter=author.id:<id>. src/store.js merges every fetched paper, author and work into one node/link set, de-duplicating by normalized DOI / author id so overlaps emerge as you grow the graph. Crucially, existing node objects are mutated in place (never recreated) so the force simulation's link references stay valid as the graph grows.

Analytics & privacy

Optional, anonymous and cookieless. Visit/duration counts use Cloudflare Web Analytics — add your beacon token in index.html (it does nothing until set). Feature-usage events (start, recommend, topics, import, export, …) are routed through src/analytics.js, which forwards to a cookieless events provider (Umami or Plausible) if one is loaded, and is otherwise a no-op. No personal data, no cross-site tracking.

The graph is saved only in your own browser's localStorage (never uploaded); the URL encodes just the DOIs / author ids you added, and the graph reconnects those authors to their papers on rebuild.

Continuous integration

.github/workflows/build.yml lints and builds the app on every push / PR to main (Node 20 & 22) and uploads the dist/ bundle as an artifact.

Project structure

src/
  api.js            # Crossref + OpenAlex data layer
  store.js          # zustand graph state (nodes, links, actions)
  graphMetrics.js   # client-side PageRank + betweenness (graph insights)
  useTheme.js       # dark / light theme hook
  App.jsx           # routes
  pages/
    Home.jsx        # DOI entry
    GraphView.jsx   # graph + sidebar + panels
  components/
    Graph.jsx       # force-directed canvas, node glyphs, zoom/theme controls

See CHANGELOG.md for the history of changes.