An interactive Arabic (RTL) force-directed map of the computing disciplines.
Every edge reads [derived → source] — "يستمد من" — so the picture is a
derivation network, not an "X vs Y" comparison. Tap a node for its description,
its "X ∩ Y" formula, and what it is called in the UK, the US and France.
A rebuild of the original single-file ../computing-fields-network.html
(Preact + htm + CDN d3) on a real toolchain.
| Framework | Vite + React 19 + TypeScript |
| Components | shadcn/ui on Base UI (components.json → "style": "base-nova") |
| Direction | RTL throughout — "rtl": true, <html dir="rtl">, Base UI DirectionProvider |
| Styling | Tailwind v4, CSS-variable theme |
| Graph | d3-force / d3-zoom for the maths, React for the DOM |
| Type | Aref Ruqaa (display) + IBM Plex Sans Arabic (text), self-hosted via Fontsource |
npm run dev # dev server
npm run build # typecheck + production build
npm run lint
npm run typecheck
npm run smoke # drive real Chrome through the interactions (dev server must be up)src/
lib/fields.ts the dataset: FIELDS, LINKS, and the derived helpers
components/field-graph.tsx the SVG canvas — simulation, pan/zoom, node drag
components/field-drawer.tsx the bottom sheet (Base UI Drawer, non-modal)
index.css theme tokens, field hues, font imports
d3 owns the geometry and React owns the DOM. The simulation is created once
in a lazy useState initialiser and parked with .stop(), so node coordinates
and link endpoints already exist on the first render; the effect then attaches
the tick handler and restarts it. Each tick clamps nodes inside the world bounds
and bumps a counter to re-render.
Pan and zoom go through d3-zoom, but the transform is written straight to the
<g> element with setAttribute — React never owns that attribute, so panning
costs no re-renders. Node dragging uses plain React pointer events with pointer
capture; d3-zoom's .filter() rejects anything originating inside a
[data-node] element so a node drag never also pans the canvas.
Selecting a node is a zoom, not a camera move. The scale is nudged into a
readable band (FOCUS_SCALE) anchored on the node's own screen point, so the
node stays exactly where it was tapped and nothing slides sideways; if the scale
is already comfortable the camera does not move at all. The single exception is
a relation-chip jump to a node that is off-canvas — that gets nudged just inside
the edge, never further.
Portrait gets the swipeable Drawer; landscape gets a plain Sheet pinned
to the right, chosen with useMediaQuery("(orientation: landscape)"). Base UI
has no built-in recipe for this — the docs say "positioning is handled by your
styles" and swipeDirection accepts only physical values — so the media query
drives both the primitive and its styling.
Both are non-modal with no backdrop, so the network stays live beside them,
and both set disablePointerDismissal. That last one is load-bearing: selection
fires on pointerup, so the tap's trailing click landed outside an
already-open popup and dismissed it instantly. The canvas owns dismissal
instead (background tap clears the selection); Escape and swipe still close.
Two fixes were made to the generated sheet.tsx, which is ours to own:
its rtl: variants flipped the enter/exit translate while positioning stayed
physical (right-0), so under dir="rtl" a right-pinned sheet slid in from the
left — those overrides are removed. It also gained an optional showOverlay
so a non-modal sheet can skip its backdrop.
Both themes are first-class. Every hybrid field hue is a CSS variable with a
light and a dark value (--field-ce, --field-ai, …), and the SVG references
var(--color-foreground) / var(--color-background) rather than fixed hex, so
nodes, labels and text halos invert correctly. Toggle with the header button or
the d key.
npx shadcn@latest add <component>Only button and drawer are vendored — anything else is one command away.