{"spec_id":"coefficient-confidence","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// coefficient-confidence: Coefficient Plot with Confidence Intervals\n// Library: chartjs 4.4.7 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-01\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n// `muted` (other/rest/confidence-band-fill anchor) isn't in ANYPLOT_TOKENS —\n// derive it from the theme per the style guide's theme-adaptive value.\nconst MUTED = window.ANYPLOT_THEME === \"dark\" ? \"#A8A79F\" : \"#6B6A63\";\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Standardized coefficients from a multiple linear regression predicting\n// house sale price, ordered by |coefficient| descending.\nconst rows = [\n  { variable: \"Square Footage\", coefficient: 42.8, ciLower: 36.1, ciUpper: 49.5, significant: true },\n  { variable: \"Distance to City Center (mi)\", coefficient: -31.4, ciLower: -39.2, ciUpper: -23.6, significant: true },\n  { variable: \"Bathrooms\", coefficient: 24.6, ciLower: 16.3, ciUpper: 32.9, significant: true },\n  { variable: \"Age of Home (years)\", coefficient: -19.7, ciLower: -28.5, ciUpper: -10.9, significant: true },\n  { variable: \"Garage Spaces\", coefficient: 16.2, ciLower: 7.4, ciUpper: 25.0, significant: true },\n  { variable: \"Lot Size (acres)\", coefficient: 11.5, ciLower: 2.1, ciUpper: 20.9, significant: true },\n  { variable: \"Bedrooms\", coefficient: 7.8, ciLower: -2.6, ciUpper: 18.2, significant: false },\n  { variable: \"Renovated Kitchen\", coefficient: 5.3, ciLower: -4.9, ciUpper: 15.5, significant: false },\n];\n\nconst labels = rows.map((row) => row.variable);\nconst ciRanges = rows.map((row) => [row.ciLower, row.ciUpper]);\nconst significantEstimates = rows.map((row) => (row.significant ? [row.coefficient - 0.35, row.coefficient + 0.35] : null));\nconst notSignificantEstimates = rows.map((row) => (row.significant ? null : [row.coefficient - 0.35, row.coefficient + 0.35]));\nconst zeroLine = labels.map((label) => ({ x: 0, y: label }));\n\n// --- Mount -------------------------------------------------------------------\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\n// --- Chart ---------------------------------------------------------------\nnew Chart(canvas, {\n  type: \"bar\",\n  data: {\n    labels,\n    datasets: [\n      {\n        label: \"95% Confidence Interval\",\n        data: ciRanges,\n        backgroundColor: MUTED + \"55\",\n        borderWidth: 0,\n        barThickness: 6,\n        borderSkipped: false,\n      },\n      {\n        type: \"line\",\n        label: \"Zero effect\",\n        data: zeroLine,\n        borderColor: t.inkSoft,\n        borderWidth: 2,\n        borderDash: [8, 6],\n        pointRadius: 0,\n        fill: false,\n        tension: 0,\n      },\n      {\n        label: \"Significant (95% CI excludes 0)\",\n        data: significantEstimates,\n        backgroundColor: t.palette[0],\n        borderWidth: 0,\n        barThickness: 20,\n        borderRadius: 10,\n        borderSkipped: false,\n      },\n      {\n        label: \"Not significant\",\n        data: notSignificantEstimates,\n        backgroundColor: MUTED,\n        borderWidth: 0,\n        barThickness: 20,\n        borderRadius: 10,\n        borderSkipped: false,\n      },\n    ],\n  },\n  options: {\n    indexAxis: \"y\",\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    layout: { padding: { top: 8, right: 24, bottom: 8, left: 8 } },\n    plugins: {\n      title: {\n        display: true,\n        text: \"coefficient-confidence · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 22, weight: \"500\" },\n        padding: { bottom: 20 },\n      },\n      legend: {\n        position: \"bottom\",\n        labels: { color: t.ink, font: { size: 15 }, boxWidth: 24, padding: 18 },\n      },\n      tooltip: { enabled: false },\n    },\n    scales: {\n      x: {\n        title: { display: true, text: \"Coefficient Estimate ($1,000s per unit, standardized)\", color: t.ink, font: { size: 17 } },\n        ticks: { color: t.inkSoft, font: { size: 14 } },\n        grid: { color: t.grid },\n      },\n      y: {\n        ticks: { color: t.ink, font: { size: 15 } },\n        grid: { display: false },\n      },\n    },\n  },\n});\n"}