{"spec_id":"pictogram-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// pictogram-basic: Pictogram Chart (Isotype Visualization)\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 90/100 | Created: 2026-06-03\n\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Coffee production by country, 2022 (millions of 60 kg bags)\nconst ICON_UNIT  = 5;  // 1 icon = 5 million bags\nconst categories = [\"Brazil\", \"Vietnam\", \"Colombia\", \"Indonesia\", \"Ethiopia\", \"Honduras\"];\nconst production = [63, 29, 14, 12, 10, 8];\nconst iconCounts = production.map(v => v / ICON_UNIT);\nconst maxIcons   = 14;  // axis ceiling (above max 12.6)\n\n// Scale title font for longer string\nconst titleText = \"Coffee Production · pictogram-basic · javascript · echarts · anyplot.ai\";\nconst titleSize = Math.max(14, Math.round(22 * 67 / titleText.length));\n\nconst chart = echarts.init(document.getElementById(\"container\"));\n\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n\n  title: {\n    text: titleText,\n    subtext: \"○  Each icon = 5 million 60 kg bags\",\n    left: \"center\",\n    top: 20,\n    textStyle: {\n      color: t.ink,\n      fontSize: titleSize,\n      fontWeight: \"bold\",\n    },\n    subtextStyle: {\n      color: t.inkSoft,\n      fontSize: 16,\n    },\n    itemGap: 8,\n  },\n\n  grid: {\n    left: 130,\n    right: 160,\n    top: 130,\n    bottom: 90,\n  },\n\n  xAxis: {\n    type: \"value\",\n    max: maxIcons,\n    interval: 2,\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 14,\n      formatter: v => v > 0 ? (v * ICON_UNIT) + \"M\" : \"0\",\n    },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n    name: \"Production (millions of 60 kg bags)\",\n    nameLocation: \"middle\",\n    nameGap: 55,\n    nameTextStyle: { color: t.inkSoft, fontSize: 14 },\n  },\n\n  yAxis: {\n    type: \"category\",\n    data: categories,\n    inverse: true,\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 16,\n      margin: 12,\n    },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n\n  series: [\n    {\n      type: \"pictorialBar\",\n      symbol: \"circle\",\n      symbolSize: [80, 80],\n      symbolMargin: \"10%\",\n      symbolRepeat: true,\n      symbolBoundingData: maxIcons,\n      emphasis: { disabled: true },\n      label: {\n        show: true,\n        position: \"right\",\n        color: t.inkSoft,\n        fontSize: 14,\n        formatter: params => production[params.dataIndex] + \"M bags\",\n      },\n      data: iconCounts.map((val, i) => ({\n        value: val,\n        itemStyle: { color: t.palette[i % 8] },\n      })),\n    },\n  ],\n});\n"}