{"spec_id":"count-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// count-basic: Basic Count Plot\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 96/100 | Created: 2026-08-11\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data: raw, uncounted observations ---------------------------------------\n// Simulates 600 individual survey responses (\"which language did you use most\n// this year?\") — a count plot's job is to tally these itself, no pre-aggregation.\nfunction lcg(seed) {\n  let state = seed;\n  return () => {\n    state = (state * 1664525 + 1013904223) % 4294967296;\n    return state / 4294967296;\n  };\n}\nconst rand = lcg(42);\n\nconst languages = [\"JavaScript\", \"Python\", \"Java\", \"TypeScript\", \"Go\", \"Rust\", \"C++\"];\nconst shares = [0.26, 0.24, 0.16, 0.14, 0.09, 0.07, 0.04];\n\nconst responses = [];\nfor (let i = 0; i < 600; i++) {\n  const r = rand();\n  let cumulative = 0;\n  for (let j = 0; j < languages.length; j++) {\n    cumulative += shares[j];\n    if (r < cumulative) {\n      responses.push(languages[j]);\n      break;\n    }\n  }\n}\n\n// --- Count occurrences per category, sort descending -------------------------\nconst counts = {};\nfor (const language of responses) counts[language] = (counts[language] || 0) + 1;\nconst ranked = Object.entries(counts).sort((a, b) => b[1] - a[1]);\nconst categories = ranked.map(([language]) => language);\nconst frequencies = ranked.map(([, count]) => count);\nconst total = frequencies.reduce((sum, count) => sum + count, 0);\nconst average = Math.round(total / frequencies.length);\n\n// The leader (rank 1) is rendered at full opacity with a bolder label; the rest\n// sit at reduced opacity so the top bar reads as an immediate focal point.\nconst barData = frequencies.map((count, i) => ({\n  value: count,\n  itemStyle: {\n    color: t.palette[0],\n    opacity: i === 0 ? 1 : 0.55,\n    borderRadius: [6, 6, 0, 0],\n  },\n  label: i === 0 ? { fontWeight: 700 } : {},\n}));\n\n// --- Init ---------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option ---------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"count-basic · javascript · echarts · anyplot.ai\",\n    subtext: \"600 survey responses, ranked by frequency — leader spotlighted\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: 500 },\n    subtextStyle: { color: t.inkSoft, fontSize: 14 },\n    itemGap: 10,\n  },\n  tooltip: {\n    trigger: \"axis\",\n    axisPointer: { type: \"shadow\" },\n    formatter: (params) => {\n      const p = params[0];\n      const pct = ((p.value / total) * 100).toFixed(1);\n      return `${p.name}<br/>${p.value} responses (${pct}%)`;\n    },\n  },\n  grid: { left: 90, right: 60, top: 130, bottom: 80 },\n  xAxis: {\n    type: \"category\",\n    data: categories,\n    name: \"Primary Language\",\n    nameLocation: \"middle\",\n    nameGap: 40,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Number of Responses\",\n    nameLocation: \"middle\",\n    nameGap: 55,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: [\n    {\n      type: \"bar\",\n      data: barData,\n      barWidth: \"60%\",\n      label: {\n        show: true,\n        position: \"top\",\n        color: t.ink,\n        fontSize: 14,\n      },\n      emphasis: {\n        focus: \"series\",\n        itemStyle: { opacity: 1, shadowBlur: 12, shadowColor: \"rgba(0, 0, 0, 0.25)\" },\n      },\n      // Spotlight band: a translucent brand-green column behind the leader\n      // category, from axis floor to chart ceiling — reinforces the focal\n      // point beyond the bar's own opacity contrast.\n      markArea: {\n        silent: true,\n        itemStyle: { color: \"rgba(0, 158, 115, 0.08)\" },\n        data: [[{ xAxis: categories[0] }, { xAxis: categories[0] }]],\n      },\n      // Reference line at the mean count — a distinctive ECharts feature\n      // (markLine) rendered in the theme's neutral/structural ink tone so it\n      // reads as chart scaffolding, not a competing data series.\n      markLine: {\n        silent: true,\n        symbol: \"none\",\n        lineStyle: { color: t.ink, opacity: 0.35, type: \"dashed\", width: 1.5 },\n        label: { color: t.inkSoft, fontSize: 12, formatter: \"avg {c}\" },\n        data: [{ yAxis: average }],\n      },\n    },\n  ],\n});\n"}