{"spec_id":"coefficient-confidence","library":"muix","language":"javascript","code":"// anyplot.ai\n// coefficient-confidence: Coefficient Plot with Confidence Intervals\n// Library: muix 7.29.1 | JavaScript 22.23.2\n// Quality: 95/100 | Created: 2026-09-01\n//# anyplot-orientation: landscape\n// anyplot.ai\n// coefficient-confidence: Coefficient Plot with Confidence Intervals\n// Library: MUI X Charts | React | Node 22\n// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope.\n// Quality: pending | Created: 2026-09-01\n\nimport { ChartContainer } from \"@mui/x-charts/ChartContainer\";\nimport { ScatterPlot } from \"@mui/x-charts/ScatterChart\";\nimport { ChartsXAxis } from \"@mui/x-charts/ChartsXAxis\";\nimport { ChartsYAxis } from \"@mui/x-charts/ChartsYAxis\";\nimport { ChartsGrid } from \"@mui/x-charts/ChartsGrid\";\nimport { ChartsReferenceLine } from \"@mui/x-charts/ChartsReferenceLine\";\nimport { ChartsLegend } from \"@mui/x-charts/ChartsLegend\";\nimport { ChartsTooltip } from \"@mui/x-charts/ChartsTooltip\";\nimport { useXScale, useYScale } from \"@mui/x-charts/hooks\";\n\nconst t = window.ANYPLOT_TOKENS;\nconst MUTED = t.theme === \"dark\" ? \"#A8A79F\" : \"#6B6A63\"; // muted anchor — \"other/rest\" role\n\n// Multiple linear regression predicting housing sale price, standardized\n// coefficients (β) with 95% confidence intervals. Ordered ascending by\n// |coefficient| so the y-axis (min at bottom) renders largest effect on top.\nconst COEFFICIENTS = [\n  { variable: \"Proximity to Highway\",   coefficient: -0.04, ciLower: -0.19, ciUpper: 0.11 },\n  { variable: \"Number of Bedrooms\",     coefficient: -0.05, ciLower: -0.21, ciUpper: 0.11 },\n  { variable: \"Garage Spaces\",          coefficient: 0.08,  ciLower: -0.09, ciUpper: 0.25 },\n  { variable: \"Lot Size\",               coefficient: 0.11,  ciLower: -0.06, ciUpper: 0.28 },\n  { variable: \"Renovated (Yes/No)\",     coefficient: 0.15,  ciLower: -0.02, ciUpper: 0.32 },\n  { variable: \"Number of Bathrooms\",    coefficient: 0.19,  ciLower: 0.05,  ciUpper: 0.33 },\n  { variable: \"Age of Home\",            coefficient: -0.22, ciLower: -0.35, ciUpper: -0.09 },\n  { variable: \"Crime Rate\",             coefficient: -0.29, ciLower: -0.44, ciUpper: -0.14 },\n  { variable: \"Distance to City Center\", coefficient: -0.34, ciLower: -0.47, ciUpper: -0.21 },\n  { variable: \"School Rating\",          coefficient: 0.38,  ciLower: 0.24,  ciUpper: 0.52 },\n  { variable: \"Square Footage\",         coefficient: 0.52,  ciLower: 0.41,  ciUpper: 0.63 },\n];\n\nconst VARIABLES = COEFFICIENTS.map((d) => d.variable);\nconst N = COEFFICIENTS.length;\n\n// Significant when the 95% CI excludes zero.\nconst isSignificant = (d) => d.ciLower > 0 || d.ciUpper < 0;\n\nconst significantPoints = COEFFICIENTS.map((d, i) => ({ ...d, i }))\n  .filter((d) => isSignificant(d))\n  .map((d) => ({ id: d.i, x: d.coefficient, y: d.i }));\nconst notSignificantPoints = COEFFICIENTS.map((d, i) => ({ ...d, i }))\n  .filter((d) => !isSignificant(d))\n  .map((d) => ({ id: d.i, x: d.coefficient, y: d.i }));\n\n// Horizontal 95% CI whiskers, rendered inside ChartContainer so it can reach\n// the D3 coordinate scales. Placed before <ScatterPlot /> so lines sit below dots.\nfunction ConfidenceWhiskers() {\n  const xScale = useXScale(\"x\");\n  const yScale = useYScale(\"y\");\n\n  return (\n    <g>\n      {COEFFICIENTS.map((d, i) => {\n        const x1 = xScale(d.ciLower) ?? 0;\n        const x2 = xScale(d.ciUpper) ?? 0;\n        const y = yScale(i) ?? 0;\n        const color = isSignificant(d) ? t.palette[0] : MUTED;\n        const cap = 9;\n        return (\n          <g key={d.variable}>\n            <line x1={x1} y1={y} x2={x2} y2={y} stroke={color} strokeWidth={3} strokeLinecap=\"round\" />\n            <line x1={x1} y1={y - cap} x2={x1} y2={y + cap} stroke={color} strokeWidth={3} strokeLinecap=\"round\" />\n            <line x1={x2} y1={y - cap} x2={x2} y2={y + cap} stroke={color} strokeWidth={3} strokeLinecap=\"round\" />\n          </g>\n        );\n      })}\n    </g>\n  );\n}\n\nconst TITLE = \"Housing Price Regression · coefficient-confidence · javascript · muix · anyplot.ai\";\nconst TITLE_SIZE = TITLE.length > 67 ? Math.round(22 * 67 / TITLE.length) : 22;\n\nexport default function Chart() {\n  const W = window.ANYPLOT_SIZE.width;\n  const H = window.ANYPLOT_SIZE.height;\n\n  return (\n    <ChartContainer\n      width={W}\n      height={H}\n      skipAnimation\n      series={[\n        {\n          type: \"scatter\",\n          id: \"significant\",\n          label: \"Significant (95% CI excludes 0)\",\n          data: significantPoints,\n          color: t.palette[0],\n          markerSize: 16,\n          xAxisId: \"x\",\n          yAxisId: \"y\",\n        },\n        {\n          type: \"scatter\",\n          id: \"notSignificant\",\n          label: \"Not significant\",\n          data: notSignificantPoints,\n          color: MUTED,\n          markerSize: 16,\n          xAxisId: \"x\",\n          yAxisId: \"y\",\n        },\n      ]}\n      xAxis={[{\n        id: \"x\",\n        min: -0.65,\n        max: 0.78,\n        label: \"Coefficient Estimate (Standardized β)\",\n        labelStyle: { fontSize: 16, fill: t.ink },\n        tickLabelStyle: { fontSize: 14, fill: t.inkSoft },\n      }]}\n      yAxis={[{\n        id: \"y\",\n        min: -0.5,\n        max: N - 0.5,\n        tickMinStep: 1,\n        valueFormatter: (v) => VARIABLES[Math.round(v)] ?? \"\",\n        tickLabelStyle: { fontSize: 15, fill: t.inkSoft },\n      }]}\n      margin={{ top: 84, bottom: 130, left: 270, right: 70 }}\n    >\n      <ChartsGrid vertical />\n      <ChartsReferenceLine\n        x={0}\n        axisId=\"x\"\n        label=\"No effect (β = 0)\"\n        labelAlign=\"end\"\n        lineStyle={{ stroke: t.inkSoft, strokeDasharray: \"6 4\", strokeWidth: 1.5 }}\n        labelStyle={{ fontSize: 13, fill: t.inkSoft, fontStyle: \"italic\" }}\n      />\n      <ConfidenceWhiskers />\n      <ScatterPlot />\n      <ChartsXAxis axisId=\"x\" />\n      <ChartsYAxis axisId=\"y\" disableLine disableTicks />\n      <ChartsTooltip trigger=\"item\" />\n      <ChartsLegend position={{ vertical: \"bottom\", horizontal: \"middle\" }} direction=\"row\" />\n      <text\n        x={W / 2}\n        y={40}\n        textAnchor=\"middle\"\n        fontSize={TITLE_SIZE}\n        fontWeight={600}\n        fill={t.ink}\n        fontFamily=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\"\n      >\n        {TITLE}\n      </text>\n    </ChartContainer>\n  );\n}\n"}