|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | +<meta charset="UTF-8"> |
| 5 | +<title>Viz 2 · Human Attention Heatmap</title> |
| 6 | +<style> |
| 7 | + body { background: #0f1923; color: #ccd6e0; font-family: 'Segoe UI', system-ui, sans-serif; |
| 8 | + display: flex; flex-direction: column; align-items: center; justify-content: center; |
| 9 | + min-height: 100vh; margin: 0; padding: 2rem; } |
| 10 | + .card { background: #162433; border-radius: 14px; padding: 2rem 2.5rem; |
| 11 | + border: 1px solid #1e3448; width: 100%; max-width: 960px; } |
| 12 | + h2 { color: white; font-size: 1.4rem; margin-bottom: 0.3rem; } |
| 13 | + .desc { color: #7a99b0; font-size: 0.88rem; margin-bottom: 1.5rem; line-height: 1.5; max-width: 80ch; } |
| 14 | + table { border-collapse: collapse; width: 100%; } |
| 15 | + th { color: #7a99b0; font-weight: 600; font-size: 11px; padding: 6px 10px; text-align: center; white-space: nowrap; } |
| 16 | + th.spec-col { text-align: left; min-width: 130px; } |
| 17 | + td { padding: 5px 8px; font-size: 12px; text-align: center; border: 1px solid #0f1923; border-radius: 3px; font-weight: 600; } |
| 18 | + td.spec-label { text-align: left; color: #ccd6e0; font-weight: 400; white-space: nowrap; padding-right: 16px; } |
| 19 | + .legend { display: flex; gap: 16px; align-items: center; margin-top: 14px; font-size: 11px; color: #7a99b0; } |
| 20 | + .swatch { display: inline-block; width: 32px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 4px; } |
| 21 | + .nav { margin-top: 1.5rem; font-size: 0.8rem; color: #445566; } |
| 22 | + .nav a { color: #57c4ad; text-decoration: none; margin: 0 0.5rem; } |
| 23 | + |
| 24 | + /* Column header annotations */ |
| 25 | + .col-note { font-size: 9px; color: #557799; font-weight: 400; display: block; } |
| 26 | +</style> |
| 27 | +</head> |
| 28 | +<body> |
| 29 | +<div class="card"> |
| 30 | + <h2>Human attention map — net lines changed per spec per commit</h2> |
| 31 | + <p class="desc"> |
| 32 | + Blue = lines added, red/orange = lines removed, dash = unchanged. |
| 33 | + The concentration of change in <strong style="color:#57c4ad">05 Integration</strong> stands out immediately. |
| 34 | + The Mar 10 structural column shows the human splitting module 05 into three new specs — a deliberate architectural decision. |
| 35 | + Most specs were written once and barely touched again. |
| 36 | + </p> |
| 37 | + |
| 38 | + <table id="heatmap"></table> |
| 39 | + |
| 40 | + <div class="legend"> |
| 41 | + <span><span class="swatch" style="background:#1a6b96"></span>lines added</span> |
| 42 | + <span><span class="swatch" style="background:rgba(26,107,150,0.3)"></span>small addition</span> |
| 43 | + <span><span class="swatch" style="background:#e76f51"></span>lines removed</span> |
| 44 | + <span><span class="swatch" style="background:#0f1923;border:1px solid #334455"></span>unchanged</span> |
| 45 | + </div> |
| 46 | + |
| 47 | + <div class="nav"> |
| 48 | + <a href="viz1_stacked_growth.html">← Growth</a> · |
| 49 | + <a href="viz3_timeline.html">Timeline →</a> · |
| 50 | + <a href="viz4_snapshot.html">Snapshot →</a> · |
| 51 | + <a href="viz5_integration.html">Integration →</a> |
| 52 | + </div> |
| 53 | +</div> |
| 54 | + |
| 55 | +<script> |
| 56 | +const DATES = ['Feb 26', 'Feb 27', 'Mar 9', 'Mar 10', 'Mar 20', 'Apr 9', 'Apr 13']; |
| 57 | +const COL_NOTES = ['initial', 'reporting', 'restructure', 'split +3', 'workflows', 'CCA params', 'NP exp.']; |
| 58 | +const SPECS = [ |
| 59 | + '00 Project','01 Discovery','02 Metadata','03 Preprocessing','04 Annotation', |
| 60 | + '05 Integration','06 Clustering','07 Post-annot.','08 Differential', |
| 61 | + '09 Interpretation','10 Trajectory','11 Comm.','12 Reporting' |
| 62 | +]; |
| 63 | +const DATA = { |
| 64 | + '00 Project': [131, 166, 166, 172, 172, 176, 176], |
| 65 | + '01 Discovery': [155, 165, 165, 165, 165, 165, 165], |
| 66 | + '02 Metadata': [109, 119, 119, 119, 119, 119, 119], |
| 67 | + '03 Preprocessing': [166, 177, 177, 177, 182, 182, 182], |
| 68 | + '04 Annotation': [135, 147, 107, 146, 146, 146, 146], |
| 69 | + '05 Integration': [158, 170, 355, 228, 228, 425, 488], |
| 70 | + '06 Clustering': [ 0, 0, 0, 85, 85, 87, 87], |
| 71 | + '07 Post-annot.': [ 0, 0, 0, 165, 169, 169, 169], |
| 72 | + '08 Differential': [132, 151, 0, 163, 168, 168, 168], |
| 73 | + '09 Interpretation': [ 0, 170, 170, 171, 171, 171, 171], |
| 74 | + '10 Trajectory': [ 0, 151, 153, 153, 153, 153, 153], |
| 75 | + '11 Comm.': [ 0, 0, 0, 83, 83, 83, 83], |
| 76 | + '12 Reporting': [ 48, 48, 48, 48, 48, 48, 48], |
| 77 | +}; |
| 78 | + |
| 79 | +function cellColor(v) { |
| 80 | + if (v === 0) return '#0f1923'; |
| 81 | + const max = 230; |
| 82 | + const t = Math.min(Math.abs(v) / max, 1); |
| 83 | + if (v > 0) { |
| 84 | + const r = Math.round(15 + t * (26 - 15)); |
| 85 | + const g = Math.round(36 + t * (107 - 36)); |
| 86 | + const b = Math.round(55 + t * (210 - 55)); |
| 87 | + return `rgb(${r},${g},${b})`; |
| 88 | + } else { |
| 89 | + const r = Math.round(80 + t * (231 - 80)); |
| 90 | + const g = Math.round(30 + t * (20)); |
| 91 | + const b = Math.round(30 + t * (10)); |
| 92 | + return `rgb(${r},${g},${b})`; |
| 93 | + } |
| 94 | +} |
| 95 | + |
| 96 | +function textColor(v, bg) { |
| 97 | + if (v === 0) return '#334455'; |
| 98 | + return Math.abs(v) > 50 ? 'white' : '#ccd6e0'; |
| 99 | +} |
| 100 | + |
| 101 | +const table = document.getElementById('heatmap'); |
| 102 | +// Header |
| 103 | +let html = '<thead><tr><th class="spec-col">Spec</th>'; |
| 104 | +DATES.forEach((d, i) => { |
| 105 | + html += `<th>${d}<span class="col-note">${COL_NOTES[i]}</span></th>`; |
| 106 | +}); |
| 107 | +html += '</tr></thead><tbody>'; |
| 108 | + |
| 109 | +SPECS.forEach(sp => { |
| 110 | + const deltas = DATA[sp].map((v, i) => i === 0 ? v : v - DATA[sp][i-1]); |
| 111 | + html += `<tr><td class="spec-label">${sp}</td>`; |
| 112 | + deltas.forEach(v => { |
| 113 | + const bg = cellColor(v); |
| 114 | + const tc = textColor(v, bg); |
| 115 | + const label = v === 0 ? '—' : (v > 0 ? `+${v}` : `${v}`); |
| 116 | + html += `<td style="background:${bg};color:${tc}">${label}</td>`; |
| 117 | + }); |
| 118 | + html += '</tr>'; |
| 119 | +}); |
| 120 | + |
| 121 | +// Totals row |
| 122 | +html += '<tr style="border-top:2px solid #334455"><td class="spec-label" style="color:#7a99b0">Total lines</td>'; |
| 123 | +DATES.forEach((_, ci) => { |
| 124 | + const total = SPECS.reduce((s, sp) => s + DATA[sp][ci], 0); |
| 125 | + html += `<td style="background:#1a2e40;color:#e9c46a;font-size:11px">${total.toLocaleString()}</td>`; |
| 126 | +}); |
| 127 | +html += '</tr></tbody>'; |
| 128 | + |
| 129 | +table.innerHTML = html; |
| 130 | +</script> |
| 131 | +</body> |
| 132 | +</html> |
0 commit comments