{"spec_id":"scatter-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// scatter-basic: Basic Scatter Plot\n// Library: highcharts 12.6.0 | JavaScript 22.22.3\n// Quality: 87/100 | Created: 2026-06-25\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// Data — marketing spend vs sales revenue, 120 companies, r ≈ 0.7\nlet seed = 42;\nfunction lcg() {\n    seed = (seed * 1664525 + 1013904223) & 0xffffffff;\n    return (seed >>> 0) / 0xffffffff;\n}\nfunction randn() {\n    const u = lcg() + 1e-10;\n    return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * lcg());\n}\n\nconst N = 120;\nconst data = [];\nfor (let i = 0; i < N; i++) {\n    const spend = 10 + lcg() * 90;\n    const revenue = 200 + 8 * spend + randn() * 100;\n    data.push([\n        Math.round(spend * 10) / 10,\n        Math.round(revenue * 10) / 10\n    ]);\n}\n\n// OLS regression line\nconst sumX = data.reduce((s, [x]) => s + x, 0);\nconst sumY = data.reduce((s, [, y]) => s + y, 0);\nconst sumXY = data.reduce((s, [x, y]) => s + x * y, 0);\nconst sumX2 = data.reduce((s, [x]) => s + x * x, 0);\nconst slope = (N * sumXY - sumX * sumY) / (N * sumX2 - sumX * sumX);\nconst intercept = (sumY - slope * sumX) / N;\nconst xVals = data.map(([x]) => x);\nconst xMin = Math.min.apply(null, xVals);\nconst xMax = Math.max.apply(null, xVals);\nconst trendLine = [\n    [Math.round(xMin * 10) / 10, Math.round((slope * xMin + intercept) * 10) / 10],\n    [Math.round(xMax * 10) / 10, Math.round((slope * xMax + intercept) * 10) / 10]\n];\n\n// Chart\nHighcharts.chart(\"container\", {\n    chart: {\n        type: \"scatter\",\n        backgroundColor: \"transparent\",\n        animation: false,\n        style: { fontFamily: \"inherit\" }\n    },\n    credits: { enabled: false },\n    colors: t.palette,\n    title: {\n        text: \"scatter-basic · javascript · highcharts · anyplot.ai\",\n        style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" }\n    },\n    xAxis: {\n        title: {\n            text: \"Marketing Spend ($ thousands)\",\n            style: { color: t.inkSoft, fontSize: \"16px\" }\n        },\n        lineColor: t.inkSoft,\n        tickColor: t.inkSoft,\n        gridLineColor: t.grid,\n        gridLineWidth: 1,\n        labels: { style: { color: t.inkSoft, fontSize: \"14px\" } }\n    },\n    yAxis: {\n        title: {\n            text: \"Sales Revenue ($ thousands)\",\n            style: { color: t.inkSoft, fontSize: \"16px\" }\n        },\n        lineColor: t.inkSoft,\n        tickColor: t.inkSoft,\n        gridLineColor: t.grid,\n        labels: { style: { color: t.inkSoft, fontSize: \"14px\" } }\n    },\n    legend: {\n        enabled: true,\n        itemStyle: { color: t.inkSoft, fontSize: \"13px\" },\n        itemHoverStyle: { color: t.ink }\n    },\n    tooltip: {\n        backgroundColor: t.elevatedBg,\n        borderColor: t.grid,\n        style: { color: t.ink, fontSize: \"13px\" },\n        formatter: function () {\n            if (this.series.type === \"line\") {\n                return false;\n            }\n            return \"<b>\" + this.series.name + \"</b><br>\" +\n                   \"Spend: <b>$\" + this.x + \"k</b><br>\" +\n                   \"Revenue: <b>$\" + this.y + \"k</b>\";\n        }\n    },\n    plotOptions: {\n        series: { animation: false },\n        scatter: {\n            opacity: 0.65,\n            marker: {\n                radius: 4,\n                symbol: \"circle\",\n                lineWidth: 1,\n                lineColor: t.pageBg\n            }\n        },\n        line: {\n            marker: { enabled: false },\n            enableMouseTracking: false,\n            states: { hover: { lineWidthPlus: 0 } }\n        }\n    },\n    responsive: {\n        rules: [{\n            condition: { maxWidth: 800 },\n            chartOptions: {\n                title: { style: { fontSize: \"16px\" } },\n                xAxis: {\n                    title: { style: { fontSize: \"12px\" } },\n                    labels: { style: { fontSize: \"11px\" } }\n                },\n                yAxis: {\n                    title: { style: { fontSize: \"12px\" } },\n                    labels: { style: { fontSize: \"11px\" } }\n                }\n            }\n        }]\n    },\n    series: [\n        {\n            type: \"scatter\",\n            name: \"Companies\",\n            data: data,\n            color: t.palette[0]\n        },\n        {\n            type: \"line\",\n            name: \"Trend (r ≈ 0.7)\",\n            data: trendLine,\n            color: t.palette[1],\n            dashStyle: \"LongDash\",\n            lineWidth: 2.5,\n            marker: { enabled: false },\n            enableMouseTracking: false\n        }\n    ]\n});\n"}