Topic Trend Tracker

*{box-sizing:border-box;margin:0;padding:0}
:root{–bg:#0f172a;–card:#1e293b;–accent:#3b82f6;–accent2:#8b5cf6;–green:#10b981;–yellow:#f59e0b;–red:#ef4444;–text:#e2e8f0;–muted:#94a3b8}
body{font-family:’Segoe UI‘,system-ui,sans-serif;background:var(–bg);color:var(–text);padding:20px;line-height:1.6}
.wrap{max-width:1100px;margin:0 auto}
h1{font-size:1.6rem;margin:4px 0 16px;background:linear-gradient(90deg,var(–accent),var(–accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sub{color:var(–muted);margin-bottom:20px;font-size:.9rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.grid{grid-template-columns:1fr}}
.card{background:var(–card);border-radius:12px;padding:16px;border:1px solid #334155}
.card h3{font-size:.95rem;margin-bottom:12px;color:var(–muted)}
canvas{width:100%!important;height:220px!important}
.trend-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #1e293b;font-size:.85rem}
.trend-item:last-child{border-bottom:none}
.trend-arrow{font-size:1.1rem}
.up{color:var(–green)}.down{color:var(–red)}.flat{color:var(–muted)}
.trend-lbl{flex:1;color:cbd5e1}
.trend-score{color:var(–muted);font-size:.8rem}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600;margin-left:4px}
.tag.hot{background:rgba(239,68,68,.2);color:var(–red)}
.tag.warm{background:rgba(245,158,11,.2);color:var(–yellow)}
.tag.cool{background:rgba(59,130,246,.2);color:var(–accent)}

function drawRadar(canvasId,data,labels){
const c=document.getElementById(canvasId);
const ctx=c.getContext(‚2d‘);
const W=c.offsetWidth,H=220;
c.width=W;c.height=H;
const cx=W/2,cy=H/2,r=80;
const n=data.length;
ctx.clearRect(0,0,W,H);
// grid
for(let l=1;l<=4;l++){
ctx.beginPath();ctx.strokeStyle='#334155';ctx.lineWidth=0.5;
for(let i=0;i<n;i++){
const a1=Math.PI*2*i/n-Math.PI/2;
const a2=Math.PI*2*((i+1)%n)/n-Math.PI/2;
const r1=r*l/4;
ctx.moveTo(cx+Math.cos(a1)*r1,cy+Math.sin(a1)*r1);
ctx.lineTo(cx+Math.cos(a2)*r1,cy+Math.sin(a2)*r1);
}
ctx.stroke();
}
// axes
for(let i=0;i{
const a=Math.PI*2*i/n-Math.PI/2;
const rv=d/100*r;
i===0?ctx.moveTo(cx+Math.cos(a)*rv,cy+Math.sin(a)*rv):ctx.lineTo(cx+Math.cos(a)*rv,cy+Math.sin(a)*rv);
});
ctx.closePath();
ctx.fillStyle=’rgba(59,130,246,.2)‘;ctx.fill();
ctx.strokeStyle=’#3b82f6′;ctx.lineWidth=1.5;ctx.stroke();
data.forEach((d,i)=>{
const a=Math.PI*2*i/n-Math.PI/2;
const rv=d/100*r;
ctx.beginPath();ctx.arc(cx+Math.cos(a)*rv,cy+Math.sin(a)*rv,3,0,Math.PI*2);
ctx.fillStyle=’#3b82f6′;ctx.fill();
});
}

function drawLines(canvasId,series,labels){
const c=document.getElementById(canvasId);
const ctx=c.getContext(‚2d‘);
const W=c.offsetWidth,H=220;
c.width=W;c.height=H;
const pad=30,x0=pad,y0=H-pad,x1=W-pad,y1=pad;
ctx.clearRect(0,0,W,H);
ctx.strokeStyle=’#334155′;
for(let i=0;i{
ctx.beginPath();ctx.strokeStyle=colors[i];ctx.lineWidth=1.5;
data.forEach((d,j)=>{
const x=x0+(x1-x0)*j/(data.length-1);
const y=y0-(y0-y0)*d/100;
j===0?ctx.moveTo(x,y):ctx.lineTo(x,y);
});
ctx.stroke();
});
ctx.font=’9px system-ui‘;ctx.fillStyle=’#94a3b8′;
labels.forEach((l,i)=>{
const x=x0+(x1-x0)*i/(labels.length-1);
ctx.fillText(l,x-10,H-8);
});
// legend
const lbls=[‚Agent AI‘,’AI Security‘,’Edge AI‘,’Regulation‘];
series.forEach((_,i)=>{
ctx.fillStyle=colors[i];ctx.fillRect(8,10+i*16,10,10);
ctx.fillStyle=’#e2e8f0′;ctx.font=’10px system-ui‘;
ctx.fillText(lbls[i],24,19+i*16);
});
}

function drawSeasonal(canvasId,data,labels){
const c=document.getElementById(canvasId);
const ctx=c.getContext(‚2d‘);
const W=c.offsetWidth,H=220;
c.width=W;c.height=H;
const pad=30,x0=pad,y0=H-pad,x1=W-pad,y1=pad;
const n=data.length,bw=(x1-x0)/n-4;
const maxY=Math.max(…data);
ctx.clearRect(0,0,W,H);
ctx.strokeStyle=’#334155′;
for(let i=0;i{
const x=x0+i*(bw+4)+2;
const bh=d/maxY*(y0-y1-20);
const grd=ctx.createLinearGradient(x,y0,x,y0-bh);
grd.addColorStop(0,’#8b5cf6′);grd.addColorStop(1,’#3b82f6′);
ctx.fillStyle=grd;
ctx.beginPath();ctx.roundRect(x,y0-bh,bw,bh,[4,4,0,0]);ctx.fill();
ctx.fillStyle=’#94a3b8′;ctx.font=’9px system-ui‘;
ctx.fillText(labels[i],x+bw/2-10,y0+15);
});
}

drawRadar(‚radarChart‘,
[92,78,85,64,71,88],
[‚Agents‘,’Security‘,’Edge‘,’Regulation‘,’Multimodal‘]
);

drawLines(‚momentumChart‘,
[[45,52,61,68,75,82],[30,35,42,55,70,78],[60,58,55,50,45,40],[20,28,38,48,62,74]],
[‚Dec‘,’Jan‘,’Feb‘,’Mar‘,’Apr‘,’May‘]
);

drawSeasonal(’seasonalChart‘,
[8,12,15,22,28,35,30,25,20,18,14,10],
[‚J‘,’F‘,’M‘,’A‘,’M‘,’J‘,’J‘,’A‘,’S‘,’O‘,’N‘,’D‘]
);

// Content gaps
const gaps=[
{l:’AI Agent Testing & QA frameworks‘,demand:92,coverage:15},
{l:’LLM Fine-tuning cost optimization‘,demand:88,coverage:22},
{l:’AI Agent audit & compliance logging‘,demand:85,coverage:10},
{l:’Multi-modal RAG implementations‘,demand:82,coverage:18},
{l:’AI cost benchmarking frameworks‘,demand:78,coverage:25},
];
document.getElementById(‚gaps‘).innerHTML=gaps.map(g=>{
const gap=g.demand-g.coverage;
const color=gap>60?’var(–red)‘:gap>40?’var(–yellow)‘:’var(–accent)‘;
return `

`;
}).join(“);

// Rising topics
const rising=[
{l:’AI Agent Memory Systems (RAG, episodic, semantic)‘,score:96},
{l:’MCP (Model Context Protocol) tool integration‘,score:93},
{l:’AI Agent observability & tracing‘,score:91},
{l:’Fine-tuning vs RAG decision frameworks‘,score:88},
{l:’AI Agent red teaming & adversarial testing‘,score:86},
{l:’Agent-to-agent communication protocols‘,score:84},
];
document.getElementById(‚rising‘).innerHTML=rising.map(r=>`

`).join(“);