{"spec_id":"pictogram-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// pictogram-basic: Pictogram Chart (Isotype Visualization)\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-08-20\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\nconst UNIT = 5; // thousand tons represented by each icon\nconst rows = [\n  { category: \"Apples\", value: 47 },\n  { category: \"Bananas\", value: 38 },\n  { category: \"Oranges\", value: 29 },\n  { category: \"Grapes\", value: 21 },\n  { category: \"Strawberries\", value: 14 },\n];\n\nconst iconCounts = rows.map(({ value }) => {\n  const full = Math.floor(value / UNIT);\n  const remainder = (value - full * UNIT) / UNIT;\n  // Cap partial-icon opacity well below full (1.0) so fractional remainders\n  // stay visually distinct from whole icons at a glance.\n  const partial = remainder > 0.02 ? [0.45 + 0.15 * remainder] : [];\n  return [...Array(full).fill(1), ...partial];\n});\nconst maxIcons = Math.max(...iconCounts.map((icons) => icons.length));\n\nconst categories = rows.map((row) => `${row.category} — ${row.value}k t`);\n\nconst series = rows.map((row, i) => ({\n  name: row.category,\n  dataLabels: { style: { color: t.palette[i] } },\n  data: iconCounts[i].map((opacity, x) => ({\n    x,\n    y: i,\n    dataLabels: {\n      style: {\n        opacity,\n        fontSize: i === 0 ? \"34px\" : \"30px\", // emphasize the top category\n        // Thin ink stroke keeps faint partial icons visible on light bg.\n        textOutline: opacity < 1 ? `1px ${t.ink}` : \"none\",\n      },\n    },\n  })),\n}));\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"scatter\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"pictogram-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  caption: {\n    text: `Each ● represents ${UNIT},000 tons of annual fruit production`,\n    align: \"left\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    min: -0.5,\n    max: maxIcons - 0.5,\n    gridLineWidth: 0,\n    lineWidth: 0,\n    tickLength: 0,\n    labels: { enabled: false },\n    title: { text: null },\n  },\n  yAxis: {\n    categories,\n    reversed: true,\n    gridLineWidth: 0,\n    lineWidth: 0,\n    tickLength: 0,\n    title: { text: null },\n    labels: { style: { color: t.inkSoft, fontSize: \"16px\" } },\n    // Alternate subtle row banding for visual rhythm beyond icon count/opacity.\n    plotBands: rows\n      .map((_, i) => i)\n      .filter((i) => i % 2 === 1)\n      .map((i) => ({ from: i - 0.5, to: i + 0.5, color: t.grid })),\n  },\n  legend: { enabled: false },\n  tooltip: { enabled: false },\n  plotOptions: {\n    scatter: {\n      animation: false,\n      marker: { enabled: false },\n      dataLabels: {\n        enabled: true,\n        format: \"●\",\n        align: \"center\",\n        verticalAlign: \"middle\",\n        y: 0,\n        style: { fontWeight: \"normal\" },\n      },\n    },\n  },\n  series,\n});\n"}