{"spec_id":"scatter-connected-temporal","library":"echarts","language":"javascript","code":"// anyplot.ai\n// scatter-connected-temporal: Connected Scatter Plot with Temporal Path\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 93/100 | Updated: 2026-06-10\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Annual CO₂ concentration (ppm) vs. global temperature anomaly (°C), 1980–2023\nconst years = [\n  1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989,\n  1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999,\n  2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009,\n  2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019,\n  2020, 2021, 2022, 2023\n];\n\nconst co2 = [\n  338.7, 340.1, 341.4, 343.0, 344.4, 345.9, 347.2, 348.9, 351.5, 352.9,\n  354.4, 355.6, 356.3, 357.1, 358.9, 360.6, 362.4, 363.8, 366.6, 368.3,\n  369.5, 371.1, 373.2, 375.8, 377.5, 379.8, 381.9, 383.8, 385.6, 387.4,\n  389.9, 391.6, 394.0, 396.5, 398.6, 400.9, 404.2, 406.5, 408.5, 411.4,\n  413.9, 416.2, 418.6, 421.1\n];\n\nconst tempAnomaly = [\n  0.26, 0.32, 0.14, 0.31, 0.16, 0.12, 0.18, 0.33, 0.40, 0.29,\n  0.45, 0.41, 0.22, 0.24, 0.31, 0.45, 0.35, 0.46, 0.61, 0.40,\n  0.42, 0.54, 0.63, 0.62, 0.54, 0.68, 0.61, 0.66, 0.54, 0.64,\n  0.72, 0.61, 0.64, 0.68, 0.75, 0.87, 1.01, 0.92, 0.83, 0.98,\n  1.02, 0.85, 0.89, 1.17\n];\n\nconst keyYears = new Set([1980, 2000, 2010, 2023]);\nconst labelPos = { 1980: \"left\", 2000: \"top\", 2010: \"top\", 2023: \"right\" };\nconst n = years.length;\n\n// Encode temporal index as 3rd dimension for native visualMap coloring\nconst seriesData = years.map((year, i) => {\n  const isKey = keyYears.has(year);\n  return {\n    value: [co2[i], tempAnomaly[i], i],\n    name: String(year),\n    symbolSize: isKey ? 16 : 8,\n    itemStyle: { borderColor: t.pageBg, borderWidth: 1.5 },\n    label: {\n      show: isKey,\n      formatter: String(year),\n      position: labelPos[year] || \"top\",\n      color: t.inkSoft,\n      fontSize: 14,\n      fontWeight: \"bold\",\n      distance: 10\n    }\n  };\n});\n\nconst titleText =\n  \"Temperature Anomaly vs CO₂ · scatter-connected-temporal · javascript · echarts · anyplot.ai\";\nconst titleFontSize = Math.max(13, Math.round(22 * (67 / titleText.length)));\n\nconst chart = echarts.init(document.getElementById(\"container\"));\n\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  // Native ECharts continuous colormap for temporal gradient — no manual lerp needed\n  visualMap: {\n    show: false,\n    type: \"continuous\",\n    min: 0,\n    max: n - 1,\n    dimension: 2,\n    inRange: { color: t.seq }\n  },\n  title: {\n    text: titleText,\n    left: \"center\",\n    top: 18,\n    textStyle: { color: t.ink, fontSize: titleFontSize, fontWeight: \"bold\" }\n  },\n  grid: { left: 110, right: 50, top: 80, bottom: 90 },\n  xAxis: {\n    type: \"value\",\n    name: \"Atmospheric CO₂ (ppm)\",\n    nameLocation: \"middle\",\n    nameGap: 45,\n    nameTextStyle: { color: t.ink, fontSize: 15 },\n    min: 334,\n    max: 426,\n    axisLabel: { color: t.inkSoft, fontSize: 13 },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid } }\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Global Temperature Anomaly (°C)\",\n    nameLocation: \"middle\",\n    nameGap: 65,\n    nameTextStyle: { color: t.ink, fontSize: 15 },\n    min: -0.1,\n    max: 1.3,\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 13,\n      formatter: (v) => v.toFixed(1)\n    },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid } }\n  },\n  series: [\n    {\n      type: \"line\",\n      showSymbol: true,\n      label: { show: false },\n      lineStyle: { width: 2.5, opacity: 0.65 },\n      // Arrow at path terminus: ECharts markLine makes time direction unmissable\n      markLine: {\n        silent: true,\n        label: { show: false },\n        lineStyle: { color: t.seq[1], width: 2.5, opacity: 0.85 },\n        symbol: [\"none\", \"arrow\"],\n        symbolSize: 14,\n        data: [[\n          { coord: [co2[n - 2], tempAnomaly[n - 2]] },\n          { coord: [co2[n - 1], tempAnomaly[n - 1]] }\n        ]]\n      },\n      data: seriesData\n    }\n  ]\n});\n"}