{"spec_id":"scatter-connected-temporal","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// scatter-connected-temporal: Connected Scatter Plot with Temporal Path\n// Library: highcharts 12.6.0 | JavaScript 22.22.3\n// Quality: 88/100 | Created: 2026-06-09\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// US Phillips Curve data [year, unemployment%, inflation%] 1960-1995\nconst rawData = [\n  [1960,  5.5,  1.7], [1961,  6.7,  1.0], [1962,  5.5,  1.0], [1963,  5.7,  1.3],\n  [1964,  5.2,  1.3], [1965,  4.5,  1.6], [1966,  3.8,  2.9], [1967,  3.8,  3.1],\n  [1968,  3.6,  4.2], [1969,  3.5,  5.5], [1970,  4.9,  5.7], [1971,  5.9,  4.4],\n  [1972,  5.6,  3.2], [1973,  4.9,  6.2], [1974,  5.6, 11.0], [1975,  8.5,  9.1],\n  [1976,  7.7,  5.8], [1977,  7.1,  6.5], [1978,  6.1,  7.6], [1979,  5.8, 11.3],\n  [1980,  7.1, 13.5], [1981,  7.6, 10.4], [1982,  9.7,  6.2], [1983,  9.6,  3.2],\n  [1984,  7.5,  4.3], [1985,  7.2,  3.6], [1986,  7.0,  1.9], [1987,  6.2,  3.6],\n  [1988,  5.5,  4.1], [1989,  5.3,  4.8], [1990,  5.6,  5.4], [1991,  6.8,  4.2],\n  [1992,  7.5,  3.0], [1993,  6.9,  3.0], [1994,  6.1,  2.6], [1995,  5.6,  2.8]\n];\n\n// 1980 has its own per-point label; omit it from the regular set\nconst labelYears = new Set([1960, 1965, 1970, 1975, 1985, 1990, 1995]);\n\n// Scatter series with lineWidth connects points in DATA ARRAY ORDER (temporal order),\n// unlike line series which sorts by x — crucial for the connected scatter path.\nconst seriesData = rawData.map(function([year, unemp, infl]) {\n  const isStart = year === 1960;\n  const isEnd = year === 1995;\n  const isPeak = year === 1980;\n  const point = {\n    x: unemp,\n    y: infl,\n    name: String(year),\n    marker: {\n      radius: (isStart || isEnd) ? 9 : isPeak ? 13 : 7,\n      symbol: isStart ? 'triangle' : (isEnd ? 'diamond' : 'circle'),\n      fillColor: isPeak ? t.amber : t.palette[0],\n      lineWidth: isPeak ? 2.5 : 1.5,\n      lineColor: t.pageBg\n    }\n  };\n  // Prominent focal-point label for the 1980 stagflation climax\n  if (isPeak) {\n    point.dataLabels = {\n      enabled: true,\n      formatter: function () { return '★ Stagflation Peak'; },\n      y: -22,\n      style: {\n        color: t.amber,\n        fontSize: '14px',\n        fontWeight: '700',\n        textOutline: '2px ' + t.pageBg\n      }\n    };\n  }\n  return point;\n});\n\nHighcharts.chart('container', {\n  chart: {\n    type: 'scatter',\n    backgroundColor: 'transparent',\n    animation: false,\n    style: { fontFamily: 'inherit' },\n    spacingTop: 20,\n    spacingRight: 30,\n    spacingBottom: 20,\n    spacingLeft: 15\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: 'scatter-connected-temporal · javascript · highcharts · anyplot.ai',\n    style: { color: t.ink, fontSize: '22px', fontWeight: '600' }\n  },\n  subtitle: {\n    text: 'US Phillips Curve, 1960 → 1995 · path traces chronological order',\n    style: { color: t.inkSoft, fontSize: '14px' }\n  },\n  xAxis: {\n    title: {\n      text: 'Unemployment Rate (%)',\n      style: { color: t.inkSoft, fontSize: '16px' }\n    },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineWidth: 0.5,\n    gridLineColor: t.grid,\n    labels: {\n      style: { color: t.inkSoft, fontSize: '14px' },\n      format: '{value}%'\n    }\n  },\n  yAxis: {\n    title: {\n      text: 'Inflation Rate (%)',\n      style: { color: t.inkSoft, fontSize: '16px' }\n    },\n    gridLineWidth: 0.5,\n    gridLineColor: t.grid,\n    labels: {\n      style: { color: t.inkSoft, fontSize: '14px' },\n      format: '{value}%'\n    }\n  },\n  legend: { enabled: false },\n  tooltip: {\n    formatter: function () {\n      return '<b>' + this.point.name + '</b><br/>' +\n             'Unemployment: ' + this.x.toFixed(1) + '%<br/>' +\n             'Inflation: ' + this.y.toFixed(1) + '%';\n    },\n    backgroundColor: t.elevatedBg,\n    borderColor: t.inkSoft,\n    style: { color: t.ink, fontSize: '14px' }\n  },\n  plotOptions: {\n    series: { animation: false },\n    scatter: {\n      lineWidth: 2,\n      color: t.palette[0],\n      marker: {\n        enabled: true,\n        radius: 7,\n        symbol: 'circle',\n        fillColor: t.palette[0],\n        lineWidth: 1.5,\n        lineColor: t.pageBg\n      },\n      dataLabels: {\n        enabled: true,\n        formatter: function () {\n          return labelYears.has(parseInt(this.point.name, 10)) ? this.point.name : null;\n        },\n        y: -16,\n        style: {\n          color: t.inkSoft,\n          fontSize: '15px',\n          fontWeight: 'normal',\n          textOutline: '2px ' + t.pageBg\n        }\n      }\n    }\n  },\n  series: [{\n    name: 'Phillips Curve (1960–1995)',\n    data: seriesData\n  }]\n});\n"}