{"spec_id":"scatter-text","library":"echarts","language":"javascript","code":"// anyplot.ai\n// scatter-text: Scatter Plot with Text Labels Instead of Points\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 91/100 | Created: 2026-09-02\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// World cities: average annual temperature vs. average annual rainfall,\n// grouped by continent. Each point is rendered as its city name only.\nconst REGIONS = [\n  {\n    name: \"Africa\",\n    cities: [\n      [\"Cairo\", 21.4, 25],\n      [\"Lagos\", 26.9, 1700],\n      [\"Nairobi\", 19.0, 800],\n      [\"Cape Town\", 17.0, 515],\n      [\"Casablanca\", 17.7, 400],\n    ],\n  },\n  {\n    name: \"Asia\",\n    cities: [\n      [\"Tokyo\", 15.4, 1520],\n      [\"Singapore\", 27.0, 2340],\n      [\"Mumbai\", 27.2, 2200],\n      [\"Bangkok\", 28.3, 1500],\n      [\"Seoul\", 12.5, 1370],\n      [\"Riyadh\", 26.0, 100],\n    ],\n  },\n  {\n    name: \"Europe\",\n    cities: [\n      [\"London\", 11.3, 600],\n      [\"Paris\", 12.3, 640],\n      [\"Berlin\", 9.8, 570],\n      [\"Madrid\", 14.8, 430],\n      [\"Moscow\", 5.8, 700],\n      [\"Rome\", 13.5, 990],\n    ],\n  },\n  {\n    name: \"Americas\",\n    cities: [\n      [\"New York\", 12.9, 1200],\n      [\"Mexico City\", 16.0, 800],\n      [\"Sao Paulo\", 19.2, 1400],\n      [\"Toronto\", 9.4, 830],\n      [\"Lima\", 18.9, 15],\n      [\"Buenos Aires\", 20.2, 1050],\n    ],\n  },\n  {\n    name: \"Oceania\",\n    cities: [\n      [\"Sydney\", 17.9, 1200],\n      [\"Auckland\", 15.5, 1240],\n      [\"Perth\", 18.6, 730],\n    ],\n  },\n];\n\n// Pixel offsets [dx, dy] for labels that would otherwise collide with a\n// neighbor or sit on the y=0 gridline (screen y grows downward).\nconst LABEL_OFFSETS = {\n  Nairobi: [20, -18],\n  Perth: [-20, 18],\n  Berlin: [-20, 0],\n  London: [20, 0],\n  Lima: [0, -22],\n  Cairo: [0, -22],\n};\n\n// --- Init -------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Title (fontsize scales down for long titles, see plot-generator.md) ---\nconst TITLE = \"scatter-text · javascript · echarts · anyplot.ai\";\nconst titleFontSize = Math.round(22 * Math.min(1, 67 / TITLE.length));\n\n// --- Option -----------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: TITLE,\n    left: \"center\",\n    top: 34,\n    textStyle: { color: t.ink, fontSize: titleFontSize, fontWeight: 500 },\n  },\n  legend: {\n    top: 96,\n    left: \"center\",\n    itemWidth: 16,\n    itemHeight: 16,\n    textStyle: { color: t.inkSoft, fontSize: 16 },\n  },\n  tooltip: {\n    trigger: \"item\",\n    formatter: (p) =>\n      `${p.marker}${p.data.name}<br/>Temperature: ${p.data.value[0]}°C<br/>Rainfall: ${p.data.value[1]} mm`,\n  },\n  grid: { left: 130, right: 80, top: 190, bottom: 110 },\n  xAxis: {\n    type: \"value\",\n    name: \"Average Temperature (°C)\",\n    nameLocation: \"middle\",\n    nameGap: 46,\n    nameTextStyle: { color: t.ink, fontSize: 18 },\n    min: 0,\n    max: 32,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Average Annual Rainfall (mm)\",\n    nameLocation: \"middle\",\n    nameGap: 80,\n    nameTextStyle: { color: t.ink, fontSize: 18 },\n    min: 0,\n    max: 2500,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: REGIONS.map((region, i) => ({\n    name: region.name,\n    type: \"scatter\",\n    symbol: \"circle\",\n    symbolSize: 0,\n    data: region.cities.map(([city, temp, rain]) => {\n      const offset = LABEL_OFFSETS[city];\n      return {\n        name: city,\n        value: [temp, rain],\n        ...(offset ? { label: { position: offset } } : {}),\n      };\n    }),\n    label: {\n      show: true,\n      formatter: \"{b}\",\n      position: \"inside\",\n      color: t.palette[i],\n      fontSize: 16,\n      fontWeight: 600,\n      textBorderColor: t.pageBg,\n      textBorderWidth: 3,\n    },\n    emphasis: {\n      label: { fontSize: 19 },\n    },\n  })),\n});\n"}