Network · network-map
Network map
The whole organization on one diagram, for the top of Kepengurusan: every division line meeting at the central interchange, each ending at a station with its member count.
Map
It sits in a tone-ink band. Member counts are illustrative.
Preview
- BPHBadan Pengurus HarianBadan Pengurus Harian8 members
- DANUSDana UsahaDana Usaha9 members
- DEPOLDepartemen OlahragaDepartemen Olahraga10 members
- HUMASHubungan MasyarakatHubungan Masyarakat9 members
- ITInformasi TeknologiInformasi Teknologi7 members
- MEDKREFMedia KreatifMedia Kreatif12 members
- PKAPerkembangan Karir dan AkademikPerkembangan Karir dan Akademik8 members
- SOSBUDSosial BudayaSosial Budaya10 members
Show codeHide code
<section className="tone-ink">
<Container className="py-16">
<NetworkMap divisions={[{ code: "humas", members: 9, href: "#humas" }, …]} linkAs={NextLink} />
</Container>
</section>How it's built
- Inline SVG generated from data, never drawn by hand. Strokes come from the line tokens through
data-line, so the map follows dark mode and tone-ink. - BPH, the main line, runs south; the seven other lines leave at 0°, 45° and 90°.
- Labels sit below horizontal routes and right of vertical ones, clear of every line.
- Below
lgthe radial drawing gives way to a stack of short horizontal routes, one per division.
Rules
The SVG is aria-hidden and not focusable. The list of division links next to it is the accessible, keyboard-reachable version, and it doubles as the phone layout. Each division links to its section on the page.