{"spec_id":"scatter-color-mapped","library":"echarts","language":"javascript","code":"// anyplot.ai\n// scatter-color-mapped: Color-Mapped Scatter Plot\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-05\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic LCG) ------------------------------------\nlet seed = 42;\nfunction rand() {\n  seed = (seed * 1103515245 + 12345) & 0x7fffffff;\n  return seed / 0x7fffffff;\n}\n\nconst stationCount = 220;\nconst points = [];\nfor (let i = 0; i < stationCount; i++) {\n  const rawLongitude = -170 + rand() * 60; // degrees W, Pacific basin (negative = west)\n  const latitude = -10 + rand() * 50; // degrees N, equator to mid-latitude\n  const baseTemp = 29 - 0.32 * Math.abs(latitude - 5); // warmer near the equator\n  const gradient = (rawLongitude + 170) * 0.02; // mild east-west drift\n  const noise = (rand() - 0.5) * 2.5;\n  const seaSurfaceTemp = baseTemp + gradient + noise;\n  const longitudeW = -rawLongitude; // positive magnitude, paired with the \"(°W)\" suffix below\n  points.push([longitudeW, latitude, Number(seaSurfaceTemp.toFixed(2))]);\n}\n\nconst temps = points.map((p) => p[2]);\nconst tempMin = Math.min(...temps);\nconst tempMax = Math.max(...temps);\nlet warmest = points[0];\nlet coldest = points[0];\nfor (const p of points) {\n  if (p[2] > warmest[2]) warmest = p;\n  if (p[2] < coldest[2]) coldest = p;\n}\n\n// --- Init --------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option --------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"scatter-color-mapped · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: 500 },\n  },\n  grid: { left: 90, right: 220, top: 100, bottom: 90 },\n  xAxis: {\n    type: \"value\",\n    name: \"Longitude (°W)\",\n    nameLocation: \"middle\",\n    nameGap: 40,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    min: 110,\n    max: 170,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid, opacity: 0.6 } },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Latitude (°N)\",\n    nameLocation: \"middle\",\n    nameGap: 55,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    min: -10,\n    max: 40,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid, opacity: 0.6 } },\n  },\n  visualMap: {\n    type: \"continuous\",\n    dimension: 2,\n    min: Math.floor(tempMin),\n    max: Math.ceil(tempMax),\n    orient: \"vertical\",\n    right: 40,\n    top: \"middle\",\n    itemHeight: 500,\n    text: [\"Sea Surface Temp (°C)\", \"\"],\n    textStyle: { color: t.inkSoft, fontSize: 14 },\n    inRange: { color: t.seq },\n    calculable: true,\n  },\n  series: [\n    {\n      type: \"scatter\",\n      data: points,\n      symbolSize: 16,\n      itemStyle: {\n        opacity: 0.75,\n        borderColor: t.pageBg,\n        borderWidth: 1,\n      },\n      markPoint: {\n        symbol: \"circle\",\n        symbolSize: 30,\n        itemStyle: { color: \"transparent\", borderColor: t.ink, borderWidth: 2 },\n        label: {\n          color: t.ink,\n          fontSize: 13,\n          fontWeight: 600,\n          position: \"top\",\n          formatter: (p) => `${p.data.name} ${p.value.toFixed(1)}°C`,\n        },\n        data: [\n          { name: \"Warmest\", coord: [warmest[0], warmest[1]], value: warmest[2] },\n          { name: \"Coldest\", coord: [coldest[0], coldest[1]], value: coldest[2] },\n        ],\n      },\n    },\n  ],\n});\n"}