Upload 2 files

app.js

@@ -41,7 +41,7 @@ function loadTab(id){
   if(id==='tab-adoption'){buildAdoptionPct();buildAdoptionAbs();buildGrowthSignals();buildTrendBars();}
   if(id==='tab-competitive'){buildCompShare();buildCompRatio();buildScatterUC();}
   if(id==='tab-engagement'){buildEngagement();buildScatterEng();}
-  if(id==='tab-opportunity'){buildOpportunityHist();buildOpportunityScatter();}
+  if(id==='tab-opportunity'){buildOpportunityCharts();}
   if(id==='tab-specialty'){buildSpecialtyStack();buildSpecialtyPct();}
 
 }
@@ -99,25 +99,44 @@ function buildScatterEng(){const ctx=document.getElementById('chart-scatter-eng'
   new Chart(ctx,{type:'scatter',data:{datasets:[{label:'SEG_A',data:mk(400,5.28,0.0005),backgroundColor:CA+'66',pointRadius:3},{label:'SEG_B',data:mk(300,8.94,0.0018),backgroundColor:CB+'66',pointRadius:3},{label:'SEG_C',data:mk(200,8.71,0.0017),backgroundColor:CC+'66',pointRadius:3}]},options:{maintainAspectRatio:false,responsive:true,plugins:{legend:{position:'bottom'}},scales:{x:{title:{display:true,text:'Total Rep Visits (86 wks)'},grid:{color:'#f1f5f9'}},y:{title:{display:true,text:'Pfizer TRx / week'},grid:{color:'#f1f5f9'}}}}});}
 
 /* ==================== TAB 6: OPPORTUNITY ==================== */
-function buildOpportunityHist(){
-  const bins=[1750,20,31,30,27,47,295,308,514,1108,890,790,752,754,650,466,258,105,51,8,14,10,18,13,17,27,33,20,16,10];
-  const edges=[];for(let i=0;i<=30;i++)edges.push(0.295+i*(0.941-0.295)/30);
-  const labels=edges.slice(0,-1).map((e,i)=>((e+edges[i+1])/2).toFixed(2));
-  mkBar('chart-opp-hist',labels,[{data:bins,backgroundColor:CU+'cc',borderRadius:2,borderSkipped:false}],{plugins:{legend:{display:false}},x:{ticks:{maxTicksLimit:10,font:{size:10}}}});
-}
-
-function buildOpportunityScatter(){
+function buildOpportunityCharts(){
   fetch('opportunity_data.json').then(r=>r.json()).then(data=>{
-    const nv=data.noVisits.map(h=>({x:h.uc,y:h.sc,...h}));
-    const cv=data.covered.map(h=>({x:h.uc,y:h.sc,...h}));
+    // Add a tiny random jitter to the y-axis (Score) so overlapping points are visible
+    // We keep the original 'uc' and 'sc' to show in tooltips
+    const jitter = () => (Math.random() - 0.5) * 0.04;
+    const nv=data.noVisits.map(h=>({x:h.uc, y:Math.max(0, h.sc + jitter()), ...h}));
+    const cv=data.covered.map(h=>({x:h.uc, y:Math.max(0, h.sc + jitter()), ...h}));
+    
+    // Histogram
+    const all = [...data.noVisits, ...data.covered];
+    const scores = all.map(h=>h.sc);
+    const minSc = Math.min(...scores);
+    const maxSc = Math.max(...scores);
+    
+    const numBins = 20;
+    const binWidth = (maxSc > minSc) ? (maxSc - minSc) / numBins : 1;
+    let edges = [];
+    for(let i=0; i<=numBins; i++) edges.push(minSc + i * binWidth);
+    
+    let bins = Array(numBins).fill(0);
+    scores.forEach(s => {
+      let b = Math.floor((s - minSc) / binWidth);
+      if (b >= numBins) b = numBins - 1;
+      bins[b]++;
+    });
+    
+    const histLabels = edges.slice(0, -1).map((e, i) => ((e + edges[i+1])/2).toFixed(2));
+    mkBar('chart-opp-hist', histLabels, [{data:bins, backgroundColor:CU+'cc', borderRadius:2, borderSkipped:false}], {plugins:{legend:{display:false}},x:{ticks:{maxTicksLimit:10,font:{size:10}}}});
+
+    // Scatter Plot
     const ctx=document.getElementById('chart-opp-scatter');if(!ctx)return;
     const chart=new Chart(ctx,{type:'scatter',data:{datasets:[
-      {label:'No Rep Visits',data:nv,backgroundColor:RED+'99',pointRadius:4,pointStyle:'circle'},
-      {label:'Covered',data:cv,backgroundColor:CB+'77',pointRadius:4,pointStyle:'rect'}
+      {label:'No Rep Visits',data:nv,backgroundColor:RED+'aa',pointRadius:4,pointStyle:'circle'},
+      {label:'Covered',data:cv,backgroundColor:CB+'88',pointRadius:4,pointStyle:'rect'}
     ]},options:{maintainAspectRatio:false,responsive:true,
       plugins:{legend:{position:'bottom'},tooltip:{callbacks:{
         title:pts=>{const p=pts[0];return p.datasetIndex===0?'ID: '+p.raw.id:'Covered HCP';},
-        label:p=>[`UC TRx: ${p.raw.x.toFixed(4)}/wk`,`Score: ${p.raw.y.toFixed(4)}`,p.raw.sp?`Specialty: ${p.raw.sp}`:'']
+        label:p=>[`UC TRx: ${p.raw.uc.toFixed(4)}/wk`,`Score: ${p.raw.sc.toFixed(4)}`,p.raw.sp?`Specialty: ${p.raw.sp}`:'']
       }}},
       scales:{x:{title:{display:true,text:'UC TRx Mean (weekly)'},grid:{color:'#f1f5f9'}},y:{title:{display:true,text:'Opportunity Score'},grid:{color:'#f1f5f9'}}},
       onClick:(evt,els)=>{

index.html

@@ -41,7 +41,7 @@
 <div class="grid-5">
 <div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Total HCPs</span><div class="kpi-icon" style="background:#f1f5f9;color:#64748b"><i class="fas fa-users"></i></div></div><div class="kpi-value" data-count="20931">0</div><div class="kpi-sub">86-week longitudinal panel</div></div>
 <div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Labeled Cohort</span><div class="kpi-icon" style="background:#eef6fc;color:var(--pfizer-blue)"><i class="fas fa-tag"></i></div></div><div class="kpi-value" data-count="11899">0</div><div class="kpi-sub">56.9% of total market</div></div>
-<div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Unlabeled Pool</span><div class="kpi-icon" style="background:#f5f3ff;color:var(--seg-unlabeled)"><i class="fas fa-search"></i></div></div><div class="kpi-value" data-count="9032">0</div><div class="kpi-sub">43.1% pending classification</div></div>
+<div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Unlabeled Pool</span><div class="kpi-icon" style="background:#f5f3ff;color:var(--seg-unlabeled)"><i class="fas fa-search"></i></div></div><div class="kpi-value" data-count="633">0</div><div class="kpi-sub">Pending classification</div></div>
 <div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Feature Columns</span><div class="kpi-icon" style="background:#ecfaff;color:var(--pfizer-sky)"><i class="fas fa-database"></i></div></div><div class="kpi-value" data-count="191">0</div><div class="kpi-sub">7 feature blocks engineered</div></div>
 <div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Deep Learning Recall</span><div class="kpi-icon" style="background:#ecfdf5;color:var(--accent-green)"><i class="fas fa-brain"></i></div></div><div class="kpi-value" data-count="75" data-suffix="%">0</div><div class="kpi-sub">On minority class (SEG_C)</div></div>
 </div>
@@ -204,18 +204,18 @@
 
 <!-- ==================== TAB 6: UNLABELED OPPORTUNITY ==================== -->
 <div id="tab-opportunity" class="tab-content">
-<div class="section-header"><div class="section-icon"><i class="fas fa-crosshairs"></i></div><div><div class="section-title">Unlabeled HCP Opportunity</div><div class="section-subtitle">Prioritizing 9,032 unclassified HCPs for commercial outreach</div></div></div>
+<div class="section-header"><div class="section-icon"><i class="fas fa-crosshairs"></i></div><div><div class="section-title">Unlabeled HCP Opportunity</div><div class="section-subtitle">Prioritizing 633 unclassified HCPs for commercial outreach</div></div></div>
 
 <div class="grid-3" style="margin-bottom:24px">
-<div class="card tier-card tier-1"><div class="tier-value" style="color:var(--accent-green)">1,600</div><div class="tier-label">Tier 1 — Immediate</div><div class="tier-desc">Score ≥ 0.60. Highest prescribing + growth signals.</div></div>
-<div class="card tier-card tier-2"><div class="tier-value" style="color:var(--accent-amber)">5,643</div><div class="tier-label">Tier 2 — Validate</div><div class="tier-desc">Score 0.35–0.60. Moderate opportunity, needs validation.</div></div>
-<div class="card tier-card tier-3"><div class="tier-value" style="color:var(--text-muted)">1,789</div><div class="tier-label">Tier 3 — Monitor</div><div class="tier-desc">Score < 0.35. Low activity, monitor for emergence.</div></div>
+<div class="card tier-card tier-1"><div class="tier-value" style="color:var(--accent-green)">43</div><div class="tier-label">Tier 1 — Immediate</div><div class="tier-desc">Score ≥ 0.60. Highest prescribing + growth signals.</div></div>
+<div class="card tier-card tier-2"><div class="tier-value" style="color:var(--accent-amber)">22</div><div class="tier-label">Tier 2 — Validate</div><div class="tier-desc">Score 0.35–0.60. Moderate opportunity, needs validation.</div></div>
+<div class="card tier-card tier-3"><div class="tier-value" style="color:var(--text-muted)">568</div><div class="tier-label">Tier 3 — Monitor</div><div class="tier-desc">Score < 0.35. Low activity, monitor for emergence.</div></div>
 </div>
 
-<div class="alert-box alert-warning"><i class="fas fa-exclamation-triangle"></i><span><strong>Coverage Gap:</strong> 5,733 of 9,032 unlabeled HCPs (63.5%) have zero rep visits. Among Tier 1 (high-opportunity) HCPs, many prescribe actively but have never been contacted by a sales representative.</span></div>
+<div class="alert-box alert-warning"><i class="fas fa-exclamation-triangle"></i><span><strong>Coverage Gap:</strong> 347 of 633 unlabeled HCPs (54.8%) have zero rep visits. Among Tier 1 (high-opportunity) HCPs, many prescribe actively but have never been contacted by a sales representative.</span></div>
 
 <div class="grid-2" style="margin-top:24px">
-<div class="card"><div class="chart-title">Opportunity Score Distribution (9,032 Unlabeled HCPs)</div><div class="chart-container" style="height:300px"><canvas id="chart-opp-hist"></canvas></div></div>
+<div class="card"><div class="chart-title">Opportunity Score Distribution (633 Unlabeled HCPs)</div><div class="chart-container" style="height:300px"><canvas id="chart-opp-hist"></canvas></div></div>
 <div class="card"><div class="chart-title">Click a red point to identify the HCP below ↓</div><div class="chart-container" style="height:300px"><canvas id="chart-opp-scatter"></canvas></div></div>
 </div>