Skip to content

Commit 1dd7fee

Browse files
claudeclaude
committed
feat: add data visualisations to decisions and measurement pages
1 parent 4780b93 commit 1dd7fee

2 files changed

Lines changed: 287 additions & 21 deletions

File tree

‎pages/decisions.html‎

Lines changed: 210 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,125 @@
1818
rel="stylesheet">
1919
<script src="https://cdn.jsdelivr.net/npm/lucide@0.462.0/dist/umd/lucide.min.js" defer></script>
2020
<link rel="stylesheet" href="/assets/css/site.css?v=20260303-1">
21+
<style>
22+
/* ── DECISION VISUAL PANELS ──────────────────────────────────── */
23+
.cases-grid--decisions {
24+
display: flex !important;
25+
flex-direction: column !important;
26+
gap: 0 !important;
27+
margin: 44px 0 !important;
28+
}
29+
.cases-grid--decisions .case-item {
30+
display: grid !important;
31+
grid-template-columns: 260px 1fr !important;
32+
border-radius: 0 !important;
33+
padding: 0 !important;
34+
border-left: none !important;
35+
border-right: none !important;
36+
border-top: none !important;
37+
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
38+
box-shadow: none !important;
39+
min-height: 0 !important;
40+
transform: none !important;
41+
}
42+
.cases-grid--decisions .case-item:first-child { border-top: 1px solid rgba(255,255,255,0.07) !important; border-radius: 10px 10px 0 0 !important; }
43+
.cases-grid--decisions .case-item:last-child { border-radius: 0 0 10px 10px !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
44+
.cases-grid--decisions .case-item::before { display: none !important; }
45+
.cases-grid--decisions .case-item::after { display: none !important; }
46+
.cases-grid--decisions .case-item:hover { transform: none !important; border-color: rgba(255,255,255,0.14) !important; }
47+
48+
.d-visual-panel {
49+
border-right: 1px solid rgba(255,255,255,0.07);
50+
padding: 28px 24px;
51+
display: flex;
52+
flex-direction: column;
53+
background: rgba(0,0,0,0.18);
54+
position: relative;
55+
overflow: hidden;
56+
}
57+
.d-visual-panel::before {
58+
content: '';
59+
position: absolute;
60+
top: 0; left: 0; right: 0;
61+
height: 2px;
62+
background: var(--case-accent);
63+
opacity: 0.8;
64+
}
65+
.d-visual-num {
66+
font-family: 'Bricolage Grotesque', sans-serif;
67+
font-size: 52px;
68+
font-weight: 800;
69+
letter-spacing: -0.05em;
70+
color: rgba(255,255,255,0.06);
71+
line-height: 1;
72+
margin-bottom: 4px;
73+
}
74+
.d-visual-tag {
75+
font-family: 'Space Grotesk', sans-serif;
76+
font-size: 9px;
77+
font-weight: 700;
78+
letter-spacing: 0.14em;
79+
text-transform: uppercase;
80+
color: var(--case-accent);
81+
margin-bottom: 18px;
82+
}
83+
.d-vis-label {
84+
font-size: 9px;
85+
letter-spacing: 0.06em;
86+
color: rgba(255,255,255,0.25);
87+
text-transform: uppercase;
88+
font-weight: 600;
89+
margin-bottom: 8px;
90+
}
91+
.cases-grid--decisions .case-body {
92+
padding: 28px 32px;
93+
display: flex;
94+
flex-direction: column;
95+
justify-content: center;
96+
}
97+
.cases-grid--decisions .case-header { display: none !important; }
98+
.cases-grid--decisions .case-body h3 { font-size: 18px; margin-bottom: 10px; }
99+
.cases-grid--decisions .case-body p { font-size: 14px; line-height: 1.72; margin-bottom: 14px; }
100+
101+
/* timeline viz */
102+
.d-timeline { display: flex; flex-direction: column; gap: 0; }
103+
.d-tl-item { display: flex; gap: 10px; }
104+
.d-tl-spine { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
105+
.d-tl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--case-accent); margin-top: 3px; flex-shrink: 0; }
106+
.d-tl-dot.dim { background: rgba(255,255,255,0.12); }
107+
.d-tl-line { width: 1.5px; flex: 1; background: rgba(255,255,255,0.08); min-height: 18px; }
108+
.d-tl-content { padding-bottom: 14px; }
109+
.d-tl-head { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 2px; }
110+
.d-tl-sub { font-size: 10px; color: rgba(255,255,255,0.3); }
111+
.d-tl-badge { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 3px; background: rgba(103,212,135,0.15); color: #67d487; border: 1px solid rgba(103,212,135,0.25); margin-top: 3px; }
112+
113+
/* heatmap viz */
114+
.d-heatmap { display: flex; flex-wrap: wrap; gap: 3px; }
115+
.d-heat-cell { width: 13px; height: 13px; border-radius: 2px; }
116+
.d-heatmap-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; color: rgba(255,255,255,0.25); }
117+
118+
/* sparkbar viz */
119+
.d-sparkbars { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
120+
.d-sparkbar { flex: 1; border-radius: 2px 2px 0 0; background: var(--case-accent); }
121+
.d-spark-note { font-size: 9px; color: rgba(255,255,255,0.25); margin-top: 6px; line-height: 1.4; }
122+
123+
/* donut viz */
124+
.d-donut-wrap { display: flex; align-items: center; gap: 14px; }
125+
.d-donut-labels { display: flex; flex-direction: column; gap: 5px; }
126+
.d-donut-item { display: flex; align-items: center; gap: 7px; font-size: 10px; color: rgba(255,255,255,0.55); }
127+
.d-donut-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
128+
129+
/* gauge viz */
130+
.d-gauge-val { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--case-accent); line-height: 1; margin-bottom: 4px; }
131+
.d-gauge-track { height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; margin-top: 10px; }
132+
.d-gauge-fill { height: 100%; border-radius: 3px; background: var(--case-accent); transition: width 1.4s cubic-bezier(0.4,0,0.2,1); }
133+
.d-gauge-label { font-size: 9px; color: rgba(255,255,255,0.25); margin-top: 4px; }
134+
135+
@media (max-width: 860px) {
136+
.cases-grid--decisions .case-item { grid-template-columns: 1fr !important; }
137+
.d-visual-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
138+
}
139+
</style>
21140
</head>
22141

23142
<body>
@@ -49,10 +168,24 @@ <h1>Five decisions that Knowledge Intelligence makes newly possible.</h1>
49168
<div class="cases-grid cases-grid--decisions fade-in">
50169

51170
<div class="case-item case-item--opportunity">
52-
<div class="case-header">
53-
<div class="cn">01</div>
54-
<div class="ctag">Strategic Timing</div>
55-
<div class="case-icon"><i data-lucide="eye" class="lucide" aria-hidden="true"></i></div>
171+
<div class="d-visual-panel">
172+
<div class="d-visual-num">01</div>
173+
<div class="d-visual-tag">Strategic Timing</div>
174+
<div class="d-vis-label">Signal lead time</div>
175+
<div class="d-timeline">
176+
<div class="d-tl-item">
177+
<div class="d-tl-spine"><div class="d-tl-dot"></div><div class="d-tl-line"></div></div>
178+
<div class="d-tl-content"><div class="d-tl-head">KI signal detected</div><div class="d-tl-sub">T = 0</div><div class="d-tl-badge">6–12 month advantage</div></div>
179+
</div>
180+
<div class="d-tl-item">
181+
<div class="d-tl-spine"><div class="d-tl-dot"></div><div class="d-tl-line"></div></div>
182+
<div class="d-tl-content"><div class="d-tl-head">Strategic position set</div><div class="d-tl-sub">T + 3 months</div></div>
183+
</div>
184+
<div class="d-tl-item">
185+
<div class="d-tl-spine"><div class="d-tl-dot dim"></div></div>
186+
<div class="d-tl-content"><div class="d-tl-head" style="color:rgba(255,255,255,0.25)">Mainstream recognition</div><div class="d-tl-sub">T + 9–12 months</div></div>
187+
</div>
188+
</div>
56189
</div>
57190
<div class="case-body">
58191
<h3>Detecting emerging themes before they are named</h3>
@@ -66,10 +199,13 @@ <h3>Detecting emerging themes before they are named</h3>
66199
</div>
67200

68201
<div class="case-item case-item--risk">
69-
<div class="case-header">
70-
<div class="cn">02</div>
71-
<div class="ctag">Risk</div>
72-
<div class="case-icon"><i data-lucide="user-x" class="lucide" aria-hidden="true"></i></div>
202+
<div class="d-visual-panel">
203+
<div class="d-visual-num">02</div>
204+
<div class="d-visual-tag">Concentration Risk</div>
205+
<div class="d-vis-label">Knowledge holders per domain</div>
206+
<div class="d-heatmap" id="heatmap-02"></div>
207+
<div class="d-heatmap-legend"><span>1 holder</span><span>Critical</span><span>10+</span></div>
208+
<div class="d-spark-note" style="margin-top:10px">Domains with <span style="color:#ef6b6b;font-weight:600">&lt;3 holders</span> flagged critical</div>
73209
</div>
74210
<div class="case-body">
75211
<h3>Measuring concentration risk in the knowledge estate</h3>
@@ -85,10 +221,12 @@ <h3>Measuring concentration risk in the knowledge estate</h3>
85221
</div>
86222

87223
<div class="case-item case-item--signal">
88-
<div class="case-header">
89-
<div class="cn">03</div>
90-
<div class="ctag">Concept Health</div>
91-
<div class="case-icon"><i data-lucide="brain" class="lucide" aria-hidden="true"></i></div>
224+
<div class="d-visual-panel">
225+
<div class="d-visual-num">03</div>
226+
<div class="d-visual-tag">Concept Health</div>
227+
<div class="d-vis-label">Framework performance decay</div>
228+
<div class="d-sparkbars" id="spark-03"></div>
229+
<div class="d-spark-note">Without KI: decay is invisible until sunk cost is entrenched</div>
92230
</div>
93231
<div class="case-body">
94232
<h3>Evidence-based evolution of strategic concepts</h3>
@@ -102,10 +240,25 @@ <h3>Evidence-based evolution of strategic concepts</h3>
102240
</div>
103241

104242
<div class="case-item case-item--governance">
105-
<div class="case-header">
106-
<div class="cn">04</div>
107-
<div class="ctag">Confidence</div>
108-
<div class="case-icon"><i data-lucide="shield-check" class="lucide" aria-hidden="true"></i></div>
243+
<div class="d-visual-panel">
244+
<div class="d-visual-num">04</div>
245+
<div class="d-visual-tag">Confidence Governance</div>
246+
<div class="d-vis-label">Estate confidence distribution</div>
247+
<div class="d-donut-wrap">
248+
<svg width="72" height="72" viewBox="0 0 72 72" aria-hidden="true">
249+
<circle cx="36" cy="36" r="28" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="10"/>
250+
<circle cx="36" cy="36" r="28" fill="none" stroke="#67d487" stroke-width="10" stroke-dasharray="52 124" stroke-dashoffset="-9" stroke-linecap="round"/>
251+
<circle cx="36" cy="36" r="28" fill="none" stroke="#e0bc56" stroke-width="10" stroke-dasharray="40 136" stroke-dashoffset="-64" stroke-linecap="round"/>
252+
<circle cx="36" cy="36" r="28" fill="none" stroke="#ef6b6b" stroke-width="10" stroke-dasharray="84 92" stroke-dashoffset="-107" stroke-linecap="round"/>
253+
<text x="36" y="40" text-anchor="middle" font-size="12" font-weight="700" fill="white" font-family="Bricolage Grotesque,sans-serif">29%</text>
254+
</svg>
255+
<div class="d-donut-labels">
256+
<div class="d-donut-item"><div class="d-donut-swatch" style="background:#67d487"></div>Trust  29%</div>
257+
<div class="d-donut-item"><div class="d-donut-swatch" style="background:#e0bc56"></div>Review 23%</div>
258+
<div class="d-donut-item"><div class="d-donut-swatch" style="background:#ef6b6b"></div>Retire  48%</div>
259+
</div>
260+
</div>
261+
<div class="d-spark-note" style="margin-top:10px">Typical ungoverned baseline. Trust proportion rises as governance matures.</div>
109262
</div>
110263
<div class="case-body">
111264
<h3>Governing confidence across the knowledge estate</h3>
@@ -120,10 +273,14 @@ <h3>Governing confidence across the knowledge estate</h3>
120273
</div>
121274

122275
<div class="case-item case-item--opportunity">
123-
<div class="case-header">
124-
<div class="cn">05</div>
125-
<div class="ctag">External Alignment</div>
126-
<div class="case-icon"><i data-lucide="arrow-left-right" class="lucide" aria-hidden="true"></i></div>
276+
<div class="d-visual-panel">
277+
<div class="d-visual-num">05</div>
278+
<div class="d-visual-tag">External Alignment</div>
279+
<div class="d-vis-label">Internal vs external drift</div>
280+
<div class="d-gauge-val">74%</div>
281+
<div style="font-size:10px;color:rgba(255,255,255,0.35);margin-bottom:8px">of leaders report internal knowledge has drifted from market reality</div>
282+
<div class="d-gauge-track"><div class="d-gauge-fill" style="width:74%" id="gauge-05"></div></div>
283+
<div class="d-gauge-label">KI tracks this drift continuously and flags misalignment before it becomes a strategic error</div>
127284
</div>
128285
<div class="case-body">
129286
<h3>Deliberate alignment between internal knowledge and external context</h3>
@@ -153,6 +310,39 @@ <h3>Deliberate alignment between internal knowledge and external context</h3>
153310
</a>
154311
</nav>
155312
<script src="/assets/js/site.js?v=20260303-1" defer></script>
313+
<script>
314+
(function() {
315+
// Heatmap for case 02
316+
var hm = document.getElementById('heatmap-02');
317+
if (hm) {
318+
var vals = [0.95,0.9,0.85,0.75,0.6,0.45,0.3,0.2,0.9,0.85,0.8,0.7,0.55,0.35,0.2,0.15,0.85,0.75,0.6,0.5,0.3,0.2,0.15,0.1];
319+
vals.forEach(function(v, i) {
320+
var cell = document.createElement('div');
321+
cell.className = 'd-heat-cell';
322+
if (v > 0.65) { cell.style.background = 'rgba(239,107,107,'+Math.min(1,v)+')'; }
323+
else if (v > 0.35) { cell.style.background = 'rgba(224,188,86,'+v+')'; }
324+
else { cell.style.background = 'rgba(255,255,255,0.1)'; }
325+
cell.style.animationDelay = (i * 0.03) + 's';
326+
hm.appendChild(cell);
327+
});
328+
}
329+
330+
// Spark bars for case 03 — decay pattern
331+
var sp = document.getElementById('spark-03');
332+
if (sp) {
333+
var heights = [98, 92, 85, 76, 64, 50, 36, 24, 18, 12];
334+
var colors = [0.85, 0.75, 0.6, 0.5, 0.4, 0.3, 0.25, 0.2, 0.18, 0.15];
335+
heights.forEach(function(h, i) {
336+
var bar = document.createElement('div');
337+
bar.className = 'd-sparkbar';
338+
bar.style.height = h + '%';
339+
bar.style.opacity = colors[i];
340+
bar.style.animationDelay = (i * 0.06) + 's';
341+
sp.appendChild(bar);
342+
});
343+
}
344+
}());
345+
</script>
156346
</body>
157347

158348
</html>

0 commit comments

Comments
 (0)