{"spec_id":"coefficient-confidence","library":"echarts","language":"javascript","code":"// anyplot.ai\n// coefficient-confidence: Coefficient Plot with Confidence Intervals\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 89/100 | Created: 2026-09-01\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Predictors of weekly e-commerce conversion rate (percentage-point effect),\n// ordered by absolute coefficient magnitude, descending.\nconst rows = [\n  { variable: \"Mobile Optimization Score\", coefficient: 4.8, ciLower: 2.1, ciUpper: 7.5, significant: true },\n  { variable: \"Checkout Steps\", coefficient: -3.9, ciLower: -6.4, ciUpper: -1.4, significant: true },\n  { variable: \"Free Shipping Offer\", coefficient: 3.2, ciLower: 0.9, ciUpper: 5.5, significant: true },\n  { variable: \"Page Load Speed\", coefficient: -2.7, ciLower: -5.0, ciUpper: -0.4, significant: true },\n  { variable: \"Popup Ads\", coefficient: -2.1, ciLower: -4.6, ciUpper: 0.4, significant: false },\n  { variable: \"Product Reviews Count\", coefficient: 1.8, ciLower: -0.3, ciUpper: 3.9, significant: false },\n  { variable: \"Live Chat Support\", coefficient: 1.5, ciLower: -0.8, ciUpper: 3.8, significant: false },\n  { variable: \"Email Campaign Frequency\", coefficient: 1.1, ciLower: -1.2, ciUpper: 3.4, significant: false },\n  { variable: \"Search Bar Prominence\", coefficient: 0.6, ciLower: -1.7, ciUpper: 2.9, significant: false },\n  { variable: \"Loyalty Points Program\", coefficient: 0.3, ciLower: -2.0, ciUpper: 2.6, significant: false },\n];\nconst indexed = rows.map((r, i) => ({ ...r, idx: i }));\nconst categories = rows.map((r) => r.variable);\nconst significant = indexed.filter((r) => r.significant);\nconst notSignificant = indexed.filter((r) => !r.significant);\n\n// --- Custom-series renderer for horizontal confidence-interval whiskers -----\nfunction whiskerRenderItem(color, lineWidth) {\n  return function (params, api) {\n    const categoryIndex = api.value(0);\n    const low = api.coord([api.value(1), categoryIndex]);\n    const high = api.coord([api.value(2), categoryIndex]);\n    const capHalf = 9;\n    const style = { stroke: color, lineWidth };\n    return {\n      type: \"group\",\n      children: [\n        { type: \"line\", shape: { x1: low[0], y1: low[1] - capHalf, x2: low[0], y2: low[1] + capHalf }, style },\n        { type: \"line\", shape: { x1: high[0], y1: high[1] - capHalf, x2: high[0], y2: high[1] + capHalf }, style },\n        { type: \"line\", shape: { x1: low[0], y1: low[1], x2: high[0], y2: high[1] }, style },\n      ],\n    };\n  };\n}\n\n// --- Init ---------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option ---------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"Website Conversion Drivers · coefficient-confidence · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 30,\n    textStyle: { color: t.ink, fontSize: 17, fontWeight: 500 },\n  },\n  legend: {\n    data: [\"Significant\", \"Not significant\"],\n    top: 90,\n    itemWidth: 16,\n    itemHeight: 16,\n    textStyle: { color: t.inkSoft, fontSize: 15 },\n  },\n  grid: { left: 60, right: 90, top: 150, bottom: 100, containLabel: true },\n  xAxis: {\n    type: \"value\",\n    name: \"Coefficient Estimate (percentage points)\",\n    nameLocation: \"center\",\n    nameGap: 42,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  yAxis: {\n    type: \"category\",\n    data: categories,\n    inverse: true,\n    axisLabel: { color: t.inkSoft, fontSize: 15 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  series: [\n    {\n      type: \"custom\",\n      name: \"__whisker_sig\",\n      silent: true,\n      renderItem: whiskerRenderItem(t.palette[0], 2.5),\n      encode: { x: [1, 2], y: 0 },\n      data: significant.map((r) => [r.idx, r.ciLower, r.ciUpper]),\n      z: 2,\n    },\n    {\n      type: \"custom\",\n      name: \"__whisker_notsig\",\n      silent: true,\n      renderItem: whiskerRenderItem(t.inkSoft, 1.5),\n      encode: { x: [1, 2], y: 0 },\n      data: notSignificant.map((r) => [r.idx, r.ciLower, r.ciUpper]),\n      z: 2,\n    },\n    {\n      name: \"Significant\",\n      type: \"scatter\",\n      symbolSize: 18,\n      itemStyle: { color: t.palette[0] },\n      data: significant.map((r) => [r.coefficient, r.idx]),\n      markLine: {\n        silent: true,\n        symbol: \"none\",\n        label: { show: false },\n        lineStyle: { color: t.ink, type: \"dashed\", width: 1.5 },\n        data: [{ xAxis: 0 }],\n      },\n      z: 3,\n    },\n    {\n      name: \"Not significant\",\n      type: \"scatter\",\n      symbolSize: 18,\n      itemStyle: { color: t.inkSoft },\n      data: notSignificant.map((r) => [r.coefficient, r.idx]),\n      z: 3,\n    },\n  ],\n});\n"}