{"spec_id":"histogram-overlapping","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\nhistogram-overlapping: Overlapping Histograms\nLibrary: plotly 6.9.0 | Python 3.13.15\nQuality: 90/100 | Updated: 2026-08-18\n\"\"\"\n\nimport os\n\nimport numpy as np\nimport plotly.graph_objects as go\n\n\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 (positions 1-2)\nIMPRINT = [\"#009E73\", \"#C475FD\"]\nIMPRINT_LINE = [\"rgba(0,158,115,0.75)\", \"rgba(196,117,253,0.75)\"]\n\n# Shared bin edges so both traces align regardless of the underlying data\nBINS = dict(start=141, end=197, size=3)\n\n# Data - heights by gender (realistic scenario showing overlapping distributions)\nnp.random.seed(42)\nmale_heights = np.random.normal(175, 7, 200)\nfemale_heights = np.random.normal(162, 6, 200)\nmean_male = male_heights.mean()\nmean_female = female_heights.mean()\n\n# Create figure\nfig = go.Figure()\n\n# Add histograms with semi-transparent fills for overlap visibility\nfig.add_trace(\n    go.Histogram(\n        x=male_heights,\n        name=\"Male\",\n        marker=dict(color=IMPRINT[0], line=dict(color=INK_SOFT, width=1)),\n        opacity=0.55,\n        xbins=BINS,\n    )\n)\n\nfig.add_trace(\n    go.Histogram(\n        x=female_heights,\n        name=\"Female\",\n        marker=dict(color=IMPRINT[1], line=dict(color=INK_SOFT, width=1)),\n        opacity=0.55,\n        xbins=BINS,\n    )\n)\n\n# Use overlay mode for true overlapping histograms\nfig.update_layout(barmode=\"overlay\")\n\n# Mean reference lines - visual hierarchy calling out the central-tendency gap\nfig.add_vline(x=mean_male, line=dict(color=IMPRINT_LINE[0], dash=\"dash\", width=2))\nfig.add_vline(x=mean_female, line=dict(color=IMPRINT_LINE[1], dash=\"dash\", width=2))\n\nfig.add_annotation(\n    xref=\"paper\",\n    yref=\"paper\",\n    x=0.02,\n    y=0.99,\n    xanchor=\"left\",\n    yanchor=\"top\",\n    align=\"left\",\n    showarrow=False,\n    text=f\"Male mean {mean_male:.0f} cm  ·  Female mean {mean_female:.0f} cm  ·  Δ {mean_male - mean_female:.0f} cm\",\n    font=dict(size=10, color=INK_SOFT),\n    bgcolor=ELEVATED_BG,\n    bordercolor=INK_SOFT,\n    borderwidth=1,\n    borderpad=6,\n)\n\n# Layout styling for 3200x1800 px output (width=800, height=450, scale=4)\nfig.update_layout(\n    autosize=False,\n    title=dict(\n        text=\"histogram-overlapping · python · plotly · anyplot.ai\",\n        font=dict(size=18, color=INK),\n        x=0.5,\n        xanchor=\"center\",\n    ),\n    xaxis=dict(\n        title=dict(text=\"Height (cm)\", font=dict(size=12, color=INK)),\n        tickfont=dict(size=10, color=INK_SOFT),\n        showgrid=False,\n        linecolor=INK_SOFT,\n        zerolinecolor=INK_SOFT,\n    ),\n    yaxis=dict(\n        title=dict(text=\"Frequency\", font=dict(size=12, color=INK)),\n        tickfont=dict(size=10, color=INK_SOFT),\n        showgrid=True,\n        gridcolor=GRID,\n        linecolor=INK_SOFT,\n        zerolinecolor=INK_SOFT,\n    ),\n    legend=dict(\n        font=dict(size=10, color=INK_SOFT),\n        x=0.98,\n        y=0.98,\n        xanchor=\"right\",\n        yanchor=\"top\",\n        bgcolor=ELEVATED_BG,\n        bordercolor=INK_SOFT,\n        borderwidth=1,\n    ),\n    paper_bgcolor=PAGE_BG,\n    plot_bgcolor=PAGE_BG,\n    margin=dict(l=80, r=40, t=80, b=60),\n)\n\n# Save as PNG (3200 x 1800 px)\nfig.write_image(f\"plot-{THEME}.png\", width=800, height=450, scale=4)\n\n# Save interactive HTML version\nfig.write_html(f\"plot-{THEME}.html\", include_plotlyjs=\"cdn\")\n"}