From 092e54ae216e6d8eece42d96e831a50ef18df545 Mon Sep 17 00:00:00 2001 From: Fabio Date: Sat, 4 Jul 2026 09:28:21 -0400 Subject: [PATCH] Board: drill down into each county MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Click any county to open a detail panel: its demographics, then the actual officeholders in the mirror — grouped by county government and by municipality, each with name and role — and a link to the county's files on GitHub. Richest for Florida, mirrored to the municipal level: e.g. St. Lucie opens to 33 officeholders (18 county — commission, sheriff, tax collector, school board — plus Fort Pierce, Port St. Lucie, and St. Lucie Village). Counties without officeholders yet show their demographic node and a note. Detail data (viz/county_detail.json, 181 KB) extracted from the entity tree: 67 FL counties, 1,058 county + 2,124 municipal officials. Modal closes on X, backdrop, or Esc. Verified in-browser: click opens the panel, names render First-Last, municipality sections and GitHub links resolve. Co-Authored-By: Claude Fable 5 --- viz/board.html | 74 +++++++++++++++++++++++++++++++++++++++++- viz/county_detail.json | 1 + 2 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 viz/county_detail.json diff --git a/viz/board.html b/viz/board.html index 339ec63ccd..f0034d6ccf 100644 --- a/viz/board.html +++ b/viz/board.html @@ -67,6 +67,40 @@ .tile.a .n{color:var(--amber)} .tile.t .n{color:var(--teal)} .ledger{font-size:10px; color:var(--muted2); border-top:1px solid var(--line-soft); padding-top:11px; line-height:1.6} + .ledger b{color:var(--ink); font-weight:600} + + /* ---- drill-down modal ---- */ + .county{cursor:pointer} + .modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center} + .modal[hidden]{display:none} + .backdrop{position:absolute; inset:0; background:rgba(4,7,11,.75)} + .sheet{position:relative; width:min(660px,92vw); max-height:86vh; overflow:auto; + background:var(--panel); border:1px solid var(--line); padding:22px 24px 26px; + box-shadow:0 24px 70px rgba(0,0,0,.55)} + .close{position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:11px; + letter-spacing:.1em; color:var(--muted); background:transparent; border:1px solid var(--line); + padding:5px 9px; cursor:pointer} + .close:hover{color:var(--ink); border-color:var(--statel)} + .close:focus-visible{outline:2px solid var(--teal); outline-offset:2px} + .sheet-name{font-family:var(--sans); font-size:23px; font-weight:640; letter-spacing:-.01em; text-wrap:balance} + .sheet-sub{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); margin-top:3px} + .dgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); + border:1px solid var(--line-soft); margin:16px 0 4px} + .dcell{background:var(--panel2); padding:9px 11px} + .dk{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} + .dv{font-size:15px; font-variant-numeric:tabular-nums; margin-top:2px} + .osec{margin-top:16px} + .osec h3{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; + color:var(--teal); margin:0 0 7px; display:flex; gap:8px; align-items:baseline; + border-bottom:1px solid var(--line-soft); padding-bottom:6px} + .osec h3 em{font-style:normal; color:var(--muted2); font-size:10px} + .off{display:flex; justify-content:space-between; gap:14px; font-size:12.5px; padding:4px 0; + border-bottom:1px dotted var(--line-soft)} + .off .on{color:var(--ink)} .off .or{color:var(--muted); text-align:right; flex:none; max-width:55%} + .empty{margin-top:16px; font-size:12.5px; color:var(--muted); line-height:1.6} + .ghlink{display:inline-block; margin-top:20px; font-family:var(--mono); font-size:11px; + letter-spacing:.06em; color:var(--teal); text-decoration:none; border:1px solid #1c5f59; padding:8px 12px} + .ghlink:hover{background:rgba(67,214,196,.09)}
@@ -81,7 +115,7 @@ + +