{"spec_id":"scatter-text","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// scatter-text: Scatter Plot with Text Labels Instead of Points\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-09-02\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Synthetic 2D projection (e.g. a t-SNE/UMAP embedding) of programming\n// language names, loosely clustered by language family. Every point is\n// rendered as its own name instead of a marker glyph.\nconst clusters = [\n  {\n    name: \"Data & scientific\",\n    points: [\n      { name: \"Python\", x: 1.6, y: 4.8 },\n      { name: \"R\", x: 2.6, y: 5.6 },\n      { name: \"Julia\", x: 0.6, y: 5.4 },\n      { name: \"MATLAB\", x: 3.2, y: 6.6 },\n      { name: \"SAS\", x: 3.6, y: 4.4 },\n    ],\n  },\n  {\n    name: \"Web & frontend\",\n    points: [\n      { name: \"JavaScript\", x: 5.8, y: 1.4 },\n      { name: \"TypeScript\", x: 6.6, y: 2.4 },\n      { name: \"PHP\", x: 4.8, y: 0.6 },\n      { name: \"Ruby\", x: 5.4, y: -0.6 },\n      { name: \"Dart\", x: 7.2, y: 1.0 },\n    ],\n  },\n  {\n    name: \"Systems programming\",\n    points: [\n      { name: \"C\", x: -2.4, y: -0.4 },\n      { name: \"C++\", x: -1.4, y: 0.6 },\n      { name: \"Rust\", x: -3.2, y: 1.2 },\n      { name: \"Go\", x: -2.0, y: 2.0 },\n      { name: \"Zig\", x: -3.6, y: -0.8 },\n    ],\n  },\n  {\n    name: \"JVM & enterprise\",\n    points: [\n      { name: \"Java\", x: 3.4, y: -2.6 },\n      { name: \"Kotlin\", x: 4.4, y: -1.8 },\n      { name: \"Scala\", x: 2.6, y: -3.4 },\n      { name: \"C#\", x: 5.2, y: -3.0 },\n      { name: \"VB.NET\", x: 3.8, y: -4.2 },\n    ],\n  },\n  {\n    name: \"Scripting & ops\",\n    points: [\n      { name: \"Bash\", x: -4.6, y: 3.8 },\n      { name: \"Perl\", x: -3.8, y: 4.8 },\n      { name: \"Lua\", x: -5.4, y: 4.4 },\n      { name: \"PowerShell\", x: -4.2, y: 5.6 },\n      { name: \"Groovy\", x: -2.8, y: 4.2 },\n    ],\n  },\n];\n\n// --- Chart -------------------------------------------------------------------\n// \"Data & scientific\" is the featured cluster (brand green, drawn first): a\n// low-opacity halo behind it gives the chart one focal point instead of five\n// visually equal groups. Series order controls z-order, so declaring the\n// halo series first keeps it beneath every text label.\nconst focusHalo = {\n  type: \"scatter\",\n  name: \"focus-halo\",\n  showInLegend: false,\n  enableMouseTracking: false,\n  dataLabels: { enabled: false },\n  data: [{ x: 2.32, y: 5.36 }],\n  marker: {\n    enabled: true,\n    radius: 130,\n    fillColor: \"rgba(0, 158, 115, 0.1)\",\n    lineWidth: 0,\n    states: { hover: { enabled: false } },\n  },\n};\n\nconst clusterSeries = clusters.map((cluster, i) => {\n  // Matte red (\"Scripting & ops\") sits close to the WCAG contrast floor on the\n  // near-black dark background; a theme-adaptive ink-colored outline lifts it\n  // above the floor there. Every other cluster/theme keeps the page-background\n  // outline so it stays invisible, as before.\n  const outlineColor = i === 4 && t.theme === \"dark\" ? t.ink : t.pageBg;\n  return {\n    type: \"scatter\",\n    name: cluster.name,\n    color: t.palette[i],\n    data: cluster.points,\n    marker: { enabled: false, states: { hover: { enabled: false } } },\n    dataLabels: {\n      enabled: true,\n      format: \"{point.name}\",\n      allowOverlap: false,\n      crop: false,\n      overflow: \"allow\",\n      align: \"center\",\n      verticalAlign: \"middle\",\n      style: {\n        color: t.palette[i],\n        fontSize: \"15px\",\n        fontWeight: \"600\",\n        textOutline: `1px ${outlineColor}`,\n      },\n    },\n  };\n});\n\nconst series = [focusHalo, ...clusterSeries];\n\nHighcharts.chart(\"container\", {\n  chart: {\n    backgroundColor: \"transparent\",\n    animation: false,\n    spacing: [24, 32, 24, 32],\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  title: {\n    text: \"scatter-text · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    title: {\n      text: \"t-SNE dimension 1\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    min: -6.6,\n    max: 8.4,\n    labels: { enabled: false },\n    lineColor: t.inkSoft,\n    tickLength: 0,\n    gridLineWidth: 1,\n    gridLineColor: t.grid,\n  },\n  yAxis: {\n    title: {\n      text: \"t-SNE dimension 2\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    min: -5.5,\n    max: 7.8,\n    labels: { enabled: false },\n    lineColor: t.inkSoft,\n    tickLength: 0,\n    gridLineWidth: 1,\n    gridLineColor: t.grid,\n  },\n  legend: {\n    title: {\n      text: \"Language family\",\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n    },\n    // Marker-free scatter series draw no legend symbol, so the color key\n    // lives in the legend text itself instead of a swatch.\n    useHTML: true,\n    labelFormatter: function () {\n      return `<span style=\"color:${this.color}\">${this.name}</span>`;\n    },\n    itemStyle: { fontSize: \"14px\", fontWeight: \"600\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  plotOptions: { series: { animation: false } },\n  series,\n});\n"}