{"spec_id":"span-basic","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\nspan-basic: Basic Span Plot (Highlighted Region)\nLibrary: plotly 6.9.0 | Python 3.13.14\nQuality: 90/100 | Updated: 2026-07-25\n\"\"\"\n\nimport os\n\nimport numpy as np\nimport plotly.graph_objects as go\n\n\n# Theme tokens (see prompts/default-style-guide.md \"Theme-adaptive Chrome\")\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 — first series always brand green; recession reaches the\n# deferred semantic-red anchor (bad/loss economic event), target zone takes\n# the next canonical slot (lavender)\nIMPRINT_PALETTE = [\"#009E73\", \"#C475FD\", \"#4467A3\", \"#BD8233\", \"#AE3030\", \"#2ABCCD\", \"#954477\", \"#99B314\"]\nBRAND = IMPRINT_PALETTE[0]\nRECESSION_COLOR = IMPRINT_PALETTE[4]\nTARGET_COLOR = IMPRINT_PALETTE[1]\n\n# Data - economic indicator over a decade, with a recession dip and a growth target band\nnp.random.seed(42)\nyears = np.arange(2005, 2015)\nbase_values = np.array([100, 105, 110, 95, 85, 90, 100, 108, 115, 120])\neconomic_index = base_values + np.random.randn(len(years)) * 3\n\n# Span regions to highlight\nrecession_start, recession_end = 2007.5, 2009.5\ntarget_low, target_high = 105, 115\n\n# Figure\nfig = go.Figure()\n\nfig.add_hrect(\n    y0=target_low,\n    y1=target_high,\n    fillcolor=TARGET_COLOR,\n    opacity=0.25,\n    line_width=0,\n    annotation_text=\"Target Zone (105-115)\",\n    annotation_position=\"top left\",\n    annotation=dict(font=dict(size=12, color=INK)),\n)\n\nfig.add_vrect(\n    x0=recession_start,\n    x1=recession_end,\n    fillcolor=RECESSION_COLOR,\n    opacity=0.25,\n    line_width=0,\n    annotation_text=\"Recession (2008-2009)\",\n    annotation_position=\"top left\",\n    annotation=dict(font=dict(size=12, color=INK)),\n)\n\nfig.add_trace(\n    go.Scatter(\n        x=years,\n        y=economic_index,\n        mode=\"lines+markers\",\n        line=dict(color=BRAND, width=3.5),\n        marker=dict(size=13, color=BRAND, line=dict(color=PAGE_BG, width=1.5)),\n        name=\"Economic Index\",\n    )\n)\n\n# Layout — theme-adaptive chrome, 3200x1800 canvas (see prompts/library/plotly.md)\ntitle = \"span-basic · python · plotly · anyplot.ai\"\nfig.update_layout(\n    autosize=False,\n    width=800,\n    height=450,\n    margin=dict(l=80, r=40, t=80, b=60),\n    title=dict(text=title, font=dict(size=16, color=INK), x=0.5, xanchor=\"center\"),\n    xaxis=dict(\n        title=dict(text=\"Year\", font=dict(size=12, color=INK)),\n        tickfont=dict(size=10, color=INK_SOFT),\n        dtick=1,\n        showline=True,\n        linecolor=INK_SOFT,\n        zerolinecolor=INK_SOFT,\n        gridcolor=GRID,\n    ),\n    yaxis=dict(\n        title=dict(text=\"Economic Index (base = 100)\", font=dict(size=12, color=INK)),\n        tickfont=dict(size=10, color=INK_SOFT),\n        showline=True,\n        linecolor=INK_SOFT,\n        zerolinecolor=INK_SOFT,\n        gridcolor=GRID,\n    ),\n    paper_bgcolor=PAGE_BG,\n    plot_bgcolor=PAGE_BG,\n    font=dict(color=INK),\n    showlegend=True,\n    legend=dict(\n        font=dict(size=10, color=INK_SOFT),\n        bgcolor=ELEVATED_BG,\n        bordercolor=INK_SOFT,\n        borderwidth=1,\n        x=0.02,\n        y=0.02,\n        xanchor=\"left\",\n        yanchor=\"bottom\",\n    ),\n)\n\n# Save (PNG + HTML, 3200x1800 px)\nfig.write_image(f\"plot-{THEME}.png\", width=800, height=450, scale=4)\nfig.write_html(f\"plot-{THEME}.html\", include_plotlyjs=\"cdn\")\n"}