{"spec_id":"histogram-cumulative","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\nhistogram-cumulative: Cumulative Histogram\nLibrary: plotly 6.7.0 | Python 3.13.13\nQuality: 92/100 | Updated: 2026-05-11\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.10)\" if THEME == \"light\" else \"rgba(240,239,232,0.10)\"\nBRAND = \"#009E73\"  # Okabe-Ito position 1\n\n# Data: Simulated test scores with realistic distribution\nnp.random.seed(42)\nscores = np.concatenate(\n    [\n        np.random.normal(65, 10, 300),  # Average performers\n        np.random.normal(85, 5, 150),  # High performers\n        np.random.normal(45, 8, 50),  # Low performers\n    ]\n)\nscores = np.clip(scores, 0, 100)\n\n# Calculate cumulative histogram for reference lines\nbin_count = 25\ncounts, bin_edges = np.histogram(scores, bins=bin_count)\ncumulative_counts = np.cumsum(counts)\ncumulative_proportion = cumulative_counts / len(scores)\n\n# Create figure with native cumulative histogram\nfig = go.Figure()\n\n# Add cumulative histogram using Plotly's native cumulative feature\nfig.add_trace(\n    go.Histogram(\n        x=scores,\n        nbinsx=bin_count,\n        cumulative=dict(enabled=True, direction=\"increasing\"),\n        histnorm=\"percent\",\n        marker=dict(color=BRAND, line=dict(width=0)),\n        name=\"Cumulative Distribution\",\n        hovertemplate=\"Score ≤ %{x:.1f}<br>Proportion: %{y:.2%}<extra></extra>\",\n    )\n)\n\n# Add percentile reference lines\npercentiles = [0.25, 0.50, 0.75]\nfor p in percentiles:\n    x_val = np.percentile(scores, p * 100)\n    # Vertical line\n    fig.add_trace(\n        go.Scatter(\n            x=[x_val, x_val],\n            y=[0, p * 100],\n            mode=\"lines\",\n            line=dict(color=INK_SOFT, width=2, dash=\"dash\"),\n            showlegend=False,\n            hoverinfo=\"skip\",\n        )\n    )\n    # Horizontal line\n    fig.add_trace(\n        go.Scatter(\n            x=[0, x_val],\n            y=[p * 100, p * 100],\n            mode=\"lines\",\n            line=dict(color=INK_SOFT, width=2, dash=\"dash\"),\n            showlegend=False,\n            hoverinfo=\"skip\",\n        )\n    )\n\n# Add percentile markers\nfig.add_trace(\n    go.Scatter(\n        x=[np.percentile(scores, 25), np.percentile(scores, 50), np.percentile(scores, 75)],\n        y=[25, 50, 75],\n        mode=\"markers+text\",\n        marker=dict(color=BRAND, size=14, line=dict(color=INK, width=2)),\n        text=[\"25%\", \"50%\", \"75%\"],\n        textposition=\"top right\",\n        textfont=dict(size=16, color=INK),\n        showlegend=False,\n        hovertemplate=\"%{text} of scores ≤ %{x:.1f}<extra></extra>\",\n    )\n)\n\n# Update layout with theme-adaptive styling\nfig.update_layout(\n    title=dict(\n        text=\"histogram-cumulative · plotly · anyplot.ai\", font=dict(size=28, color=INK), x=0.5, xanchor=\"center\"\n    ),\n    xaxis=dict(\n        title=dict(text=\"Test Score (points)\", font=dict(size=22, color=INK)),\n        tickfont=dict(size=18, color=INK_SOFT),\n        range=[0, 105],\n        showgrid=True,\n        gridcolor=GRID,\n        gridwidth=1,\n        linecolor=INK_SOFT,\n        zerolinecolor=INK_SOFT,\n    ),\n    yaxis=dict(\n        title=dict(text=\"Cumulative Proportion (%)\", font=dict(size=22, color=INK)),\n        tickfont=dict(size=18, color=INK_SOFT),\n        range=[0, 105],\n        showgrid=True,\n        gridcolor=GRID,\n        gridwidth=1,\n        linecolor=INK_SOFT,\n        zerolinecolor=INK_SOFT,\n    ),\n    paper_bgcolor=PAGE_BG,\n    plot_bgcolor=PAGE_BG,\n    showlegend=True,\n    legend=dict(\n        x=0.65, y=0.35, font=dict(size=16, color=INK_SOFT), bgcolor=ELEVATED_BG, bordercolor=INK_SOFT, borderwidth=1\n    ),\n    margin=dict(l=80, r=40, t=80, b=80),\n)\n\n# Save outputs\nfig.write_image(f\"plot-{THEME}.png\", width=1600, height=900, scale=3)\nfig.write_html(f\"plot-{THEME}.html\", include_plotlyjs=\"cdn\")\n"}