{"spec_id":"timeline-basic","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\ntimeline-basic: Event Timeline\nLibrary: plotly 6.7.0 | Python 3.13.13\nQuality: 92/100 | Updated: 2026-05-11\n\"\"\"\n\nimport os\n\nimport pandas as pd\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)\"\n\n# Okabe-Ito palette (first series always #009E73)\nIMPRINT = [\n    \"#009E73\",  # bluish green (brand)\n    \"#C475FD\",  # vermillion\n    \"#4467A3\",  # blue\n    \"#BD8233\",  # reddish purple\n]\n\n# Data - Economic and stock market milestones (2018-2024)\ndata = {\n    \"date\": [\n        \"2018-12-26\",\n        \"2019-07-17\",\n        \"2020-03-16\",\n        \"2020-11-09\",\n        \"2021-03-11\",\n        \"2021-11-09\",\n        \"2022-03-16\",\n        \"2023-03-10\",\n        \"2024-01-10\",\n    ],\n    \"event\": [\n        \"Market Bottom\",\n        \"Bull Run Begins\",\n        \"COVID Crash\",\n        \"Post-Election Rally\",\n        \"Recovery Accelerates\",\n        \"Peak Market Euphoria\",\n        \"Rate Hikes Begin\",\n        \"Bank Crisis Resolved\",\n        \"AI Boom Peaks\",\n    ],\n    \"category\": [\"Market\", \"Market\", \"Crisis\", \"Recovery\", \"Recovery\", \"Expansion\", \"Correction\", \"Crisis\", \"Growth\"],\n}\ndf = pd.DataFrame(data)\n\n# Color mapping for categories\ncolors = {\n    \"Market\": IMPRINT[0],\n    \"Recovery\": IMPRINT[1],\n    \"Crisis\": IMPRINT[2],\n    \"Expansion\": IMPRINT[3],\n    \"Growth\": IMPRINT[0],\n    \"Correction\": IMPRINT[1],\n}\n\n# Alternate positions to prevent label overlap\npositions = [1, -1, 1, -1, 1, -1, 1, -1, 1]\ndf[\"position\"] = positions\ndf[\"x_pos\"] = range(len(df))\n\n# Create figure\nfig = go.Figure()\n\n# Add the timeline axis line\nfig.add_trace(\n    go.Scatter(\n        x=[-0.5, len(df) - 0.5],\n        y=[0, 0],\n        mode=\"lines\",\n        line=dict(color=INK_SOFT, width=3),\n        hoverinfo=\"skip\",\n        showlegend=False,\n    )\n)\n\n# Add vertical connector lines for each event\nfor idx, row in df.iterrows():\n    fig.add_trace(\n        go.Scatter(\n            x=[row[\"x_pos\"], row[\"x_pos\"]],\n            y=[0, row[\"position\"] * 0.4],\n            mode=\"lines\",\n            line=dict(color=INK_SOFT, width=2, dash=\"dot\"),\n            hoverinfo=\"skip\",\n            showlegend=False,\n        )\n    )\n\n# Add event markers and labels by category\nfor category in df[\"category\"].unique():\n    cat_df = df[df[\"category\"] == category].reset_index(drop=True)\n\n    fig.add_trace(\n        go.Scatter(\n            x=cat_df[\"x_pos\"],\n            y=[0] * len(cat_df),\n            mode=\"markers\",\n            marker=dict(size=14, color=colors[category], line=dict(color=PAGE_BG, width=2)),\n            name=category,\n            hovertemplate=\"<b>%{customdata[0]}</b><br>%{customdata[1]}<extra></extra>\",\n            customdata=list(\n                zip(cat_df[\"event\"].tolist(), [pd.to_datetime(d).strftime(\"%B %d, %Y\") for d in cat_df[\"date\"]])\n            ),\n        )\n    )\n\n# Add event labels\nfor idx, row in df.iterrows():\n    y_offset = row[\"position\"] * 0.5\n    fig.add_annotation(\n        x=row[\"x_pos\"],\n        y=y_offset,\n        text=row[\"event\"],\n        showarrow=False,\n        font=dict(size=18, color=INK),\n        xanchor=\"center\",\n        yanchor=\"bottom\" if row[\"position\"] > 0 else \"top\",\n    )\n\n# Add date labels\nfor idx, row in df.iterrows():\n    y_offset = row[\"position\"] * 0.15\n    date_str = pd.to_datetime(row[\"date\"]).strftime(\"%b %Y\")\n    fig.add_annotation(\n        x=row[\"x_pos\"],\n        y=y_offset,\n        text=date_str,\n        showarrow=False,\n        font=dict(size=14, color=INK_SOFT),\n        xanchor=\"center\",\n        yanchor=\"bottom\" if row[\"position\"] > 0 else \"top\",\n    )\n\n# Layout\nfig.update_layout(\n    title=dict(text=\"timeline-basic · plotly · anyplot.ai\", font=dict(size=28, color=INK), x=0.5, xanchor=\"center\"),\n    xaxis=dict(\n        title=dict(text=\"Economic Timeline (2018-2024)\", font=dict(size=22, color=INK)),\n        tickfont=dict(size=16, color=INK_SOFT),\n        tickvals=[0, 2, 4, 6, 8],\n        ticktext=[\"Dec 2018\", \"Mar 2020\", \"Mar 2021\", \"Mar 2022\", \"Jan 2024\"],\n        showgrid=True,\n        gridcolor=GRID,\n        gridwidth=1,\n        zeroline=False,\n        linecolor=INK_SOFT,\n    ),\n    yaxis=dict(visible=False, range=[-1, 1], fixedrange=True),\n    template=\"plotly_white\",\n    paper_bgcolor=PAGE_BG,\n    plot_bgcolor=PAGE_BG,\n    showlegend=True,\n    legend=dict(\n        orientation=\"h\",\n        yanchor=\"bottom\",\n        y=1.02,\n        xanchor=\"center\",\n        x=0.5,\n        font=dict(size=16, color=INK_SOFT),\n        bgcolor=ELEVATED_BG,\n        bordercolor=INK_SOFT,\n        borderwidth=1,\n    ),\n    margin=dict(l=80, r=80, t=120, b=80),\n)\n\n# Save as PNG and HTML\nfig.write_image(f\"plot-{THEME}.png\", width=1600, height=900, scale=3)\nfig.write_html(f\"plot-{THEME}.html\", include_plotlyjs=\"cdn\")\n"}