{"spec_id":"box-grouped","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\nbox-grouped: Grouped Box Plot\nLibrary: plotly 6.9.0 | Python 3.13.15\nQuality: 91/100 | Updated: 2026-08-18\n\"\"\"\n\nimport os\n\nimport numpy as np\nimport plotly.graph_objects as go\n\n\n# Theme tokens\nTHEME = os.getenv(\"ANYPLOT_THEME\", \"light\")\nPAGE_BG = \"#FAF8F1\" if THEME == \"light\" else \"#1A1A17\"\nELEVATED_BG = \"#FFFDF6\" if THEME == \"light\" else \"#242420\"\nINK = \"#1A1A17\" if THEME == \"light\" else \"#F0EFE8\"\nINK_SOFT = \"#4A4A44\" if THEME == \"light\" else \"#B8B7B0\"\nGRID = \"rgba(26,26,23,0.15)\" if THEME == \"light\" else \"rgba(240,239,232,0.15)\"\n\n# Imprint palette\nIMPRINT = [\"#009E73\", \"#C475FD\", \"#4467A3\"]\n\n# Data - Employee performance scores by department and experience level\nnp.random.seed(42)\n\ncategories = [\"Sales\", \"Engineering\", \"Marketing\", \"Support\"]\nsubcategories = [\"Junior\", \"Mid-Level\", \"Senior\"]\n\n# Generate realistic performance data with varying distributions\ndata = {\n    \"Sales\": {\n        \"Junior\": np.random.normal(65, 12, 50),\n        \"Mid-Level\": np.random.normal(75, 10, 50),\n        \"Senior\": np.random.normal(85, 8, 50),\n    },\n    \"Engineering\": {\n        \"Junior\": np.random.normal(60, 15, 50),\n        \"Mid-Level\": np.random.normal(78, 9, 50),\n        \"Senior\": np.random.normal(88, 6, 50),\n    },\n    \"Marketing\": {\n        \"Junior\": np.random.normal(62, 14, 50),\n        \"Mid-Level\": np.random.normal(72, 11, 50),\n        \"Senior\": np.random.normal(82, 9, 50),\n    },\n    \"Support\": {\n        \"Junior\": np.random.normal(58, 13, 50),\n        \"Mid-Level\": np.random.normal(70, 10, 50),\n        \"Senior\": np.random.normal(80, 7, 50),\n    },\n}\n\n# Add some outliers for feature coverage\ndata[\"Sales\"][\"Junior\"] = np.append(data[\"Sales\"][\"Junior\"], [35, 95])\ndata[\"Engineering\"][\"Senior\"] = np.append(data[\"Engineering\"][\"Senior\"], [55, 95])\ndata[\"Marketing\"][\"Mid-Level\"] = np.append(data[\"Marketing\"][\"Mid-Level\"], [40, 98])\n\n# Create figure\nfig = go.Figure()\n\n# Add box traces for each subcategory\nfor i, subcat in enumerate(subcategories):\n    x_vals = []\n    y_vals = []\n    for cat in categories:\n        values = data[cat][subcat]\n        x_vals.extend([cat] * len(values))\n        y_vals.extend(values)\n\n    fig.add_trace(\n        go.Box(\n            x=x_vals,\n            y=y_vals,\n            name=subcat,\n            marker_color=IMPRINT[i],\n            boxmean=\"sd\",\n            notched=True,\n            line={\"width\": 1.5},\n            marker={\"size\": 8, \"opacity\": 0.85, \"line\": {\"width\": 1, \"color\": PAGE_BG}},\n            boxpoints=\"outliers\",\n            jitter=0.4,\n            pointpos=0,\n        )\n    )\n\n# Second storytelling layer — call out the department with the strongest overall performance\ndept_medians = {cat: float(np.median(np.concatenate([data[cat][s] for s in subcategories]))) for cat in categories}\nbest_dept = max(dept_medians, key=dept_medians.get)\nfig.add_annotation(\n    x=best_dept,\n    xref=\"x\",\n    y=0.97,\n    yref=\"paper\",\n    text=f\"★ {best_dept}: strongest overall performance\",\n    showarrow=False,\n    font={\"size\": 10, \"color\": INK},\n    bgcolor=ELEVATED_BG,\n    bordercolor=INK_SOFT,\n    borderwidth=1,\n    borderpad=4,\n)\n\n# Benchmark line for visual hierarchy — flags a company-wide performance target\nTARGET_SCORE = 75\nfig.add_hline(\n    y=TARGET_SCORE,\n    line={\"color\": INK_SOFT, \"width\": 1.5, \"dash\": \"dash\"},\n    annotation_text=f\"Company target: {TARGET_SCORE}\",\n    annotation_position=\"top left\",\n    annotation_font={\"size\": 10, \"color\": INK_SOFT},\n)\n\n# Update layout — canonical 3200x1800 landscape canvas\ntitle_text = \"box-grouped · python · plotly · anyplot.ai\"\nfig.update_layout(\n    autosize=False,\n    title={\"text\": title_text, \"font\": {\"size\": 16, \"color\": INK}, \"x\": 0.5, \"xanchor\": \"center\"},\n    xaxis={\n        \"title\": {\"text\": \"Department\", \"font\": {\"size\": 12, \"color\": INK}},\n        \"tickfont\": {\"size\": 10, \"color\": INK_SOFT},\n        \"showgrid\": False,\n        \"showline\": False,\n        \"zeroline\": False,\n    },\n    yaxis={\n        \"title\": {\"text\": \"Performance Score (0-100)\", \"font\": {\"size\": 12, \"color\": INK}},\n        \"tickfont\": {\"size\": 10, \"color\": INK_SOFT},\n        \"gridcolor\": GRID,\n        \"gridwidth\": 1,\n        \"showline\": False,\n        \"zeroline\": False,\n    },\n    legend={\n        \"title\": {\"text\": \"Experience Level\", \"font\": {\"size\": 10, \"color\": INK}},\n        \"font\": {\"size\": 10, \"color\": INK_SOFT},\n        \"bgcolor\": ELEVATED_BG,\n        \"borderwidth\": 0,\n        \"x\": 1.02,\n        \"y\": 1,\n        \"xanchor\": \"left\",\n        \"yanchor\": \"top\",\n    },\n    boxmode=\"group\",\n    paper_bgcolor=PAGE_BG,\n    plot_bgcolor=PAGE_BG,\n    font={\"color\": INK},\n    margin={\"l\": 80, \"r\": 140, \"t\": 90, \"b\": 70},\n)\n\n# Save as PNG and HTML — hard target: 3200x1800 (landscape)\nfig.write_image(f\"plot-{THEME}.png\", width=800, height=450, scale=4)\nfig.write_html(f\"plot-{THEME}.html\", include_plotlyjs=\"cdn\")\n"}