Audience Segmentation Explorer Dashboard

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,’Segoe UI‘,Roboto,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh;padding:2rem}
.container{max-width:1200px;margin:0 auto}
h1{font-size:1.8rem;color:#f8fafc;margin-bottom:.25rem}
.subtitle{color:#94a3b8;margin-bottom:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem}
.card{background:#1e293b;border-radius:12px;padding:1.5rem;border:1px solid #334155}
.card h2{font-size:1rem;color:#a78bfa;margin-bottom:1rem}
.chart-wrap{position:relative;height:220px}
.segment-list{list-style:none}
.segment-list li{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border-bottom:1px solid #334155}
.segment-list li:last-child{border-bottom:none}
.segment-info{display:flex;align-items:center;gap:.75rem}
.segment-dot{width:10px;height:10px;border-radius:50%}
.segment-name{color:#e2e8f0;font-size:.9rem}
.segment-stats{text-align:right}
.segment-count{color:#f8fafc;font-weight:600;font-size:.9rem}
.segment-pct{color:#64748b;font-size:.8rem}
.journey-steps{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.journey-step{padding:.4rem .8rem;border-radius:6px;font-size:.75rem;font-weight:600}
.journey-arrow{color:#475569;font-size:.8rem}

new Chart(document.getElementById(‚visitorTypeChart‘),{
type:’doughnut‘,
data:{labels:[‚Returning Visitors‘,’New Visitors‘],
datasets:[{data:[58,42],backgroundColor:[‚#8b5cf6′,’#3b82f6′],borderWidth:0}]},
options:{responsive:true,maintainAspectRatio:false,cutout:’65%‘,
plugins:{legend:{position:’bottom‘,labels:{color:’#94a3b8′,padding:16}}}
}
});

new Chart(document.getElementById(‚journeyChart‘),{
type:’bar‘,
data:{labels:[‚Landing‘,’Read 1′,’Read 2+‘,’Use Tool‘,’Share‘,’Subscribe‘],
datasets:[{label:’Readers Remaining (%)‘,
data:[100,68,42,28,19,12],
backgroundColor:’#a78bfa‘,borderRadius:4}]},
options:{responsive:true,maintainAspectRatio:false,
plugins:{legend:{display:false}},
scales:{x:{ticks:{color:’#94a3b8′},grid:{display:false}},y:{ticks:{color:’#64748b‘,callback:v=>v+’%‘},grid:{color:’#1e293b‘}}}
});

const segments=[
{name:’AI Engineers‘,count:’2,840′,pct:’28%‘,color:’#3b82f6′},
{name:’DevOps / MLOps‘,count:’1,920′,pct:’19%‘,color:’#10b981′},
{name:’C-Suite / Leaders‘,count:’1,540′,pct:’15%‘,color:’#8b5cf6′},
{name:’Data Scientists‘,count:’1,380′,pct:’14%‘,color:’#f59e0b‘},
{name:’Startup Founders‘,count:’1,120′,pct:’11%‘,color:’#ef4444′},
{name:’Students / Researchers‘,count:’840′,pct:’8%‘,color:’#06b6d4′},
{name:’Other‘,count:’460′,pct:’5%‘,color:’#64748b‘}
];
document.getElementById(’segments‘).innerHTML=segments.map(s=>`

${s.name}

${s.count}

${s.pct}

`).join(“);

new Chart(document.getElementById(‚preferenceChart‘),{
type:’radar‘,
data:{labels:[‚Technical Deep-Dives‘,’Interactive Tools‘,’Case Studies‘,’Tutorials‘,’Industry Reports‘,’News Updates‘],
datasets:[
{label:’AI Engineers‘,data:[90,75,65,80,45,30],borderColor:’#3b82f6′,backgroundColor:’rgba(59,130,246,0.15)‘},
{label:’C-Suite‘,data:[35,60,85,20,90,75],borderColor:’#8b5cf6′,backgroundColor:’rgba(139,92,246,0.15)‘},
{label:’Startup Founders‘,data:[55,80,75,65,60,50],borderColor:’#ef4444′,backgroundColor:’rgba(239,68,68,0.15)‘}
]},
options:{responsive:true,maintainAspectRatio:false,
plugins:{legend:{labels:{color:’#94a3b8′,padding:12}}},
scales:{r:{ticks:{display:false},grid:{color:’#334155′},pointLabels:{color:’#94a3b8′,font:{size:11}}}}
});

new Chart(document.getElementById(‚depthChart‘),{
type:’bar‘,
data:{labels:[‚Bounce (v+’%‘},grid:{color:’#1e293b‘}}}
});