{"spec_id":"line-stepwise","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\nline-stepwise: Step Line Plot\nLibrary: plotly 6.7.0 | Python 3.13.13\nQuality: 88/100 | Updated: 2026-05-13\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 - Server response time monitoring (discrete state changes)\nnp.random.seed(42)\nhours = np.arange(0, 24, 1)\nresponse_times = np.array(\n    [\n        45,\n        45,\n        42,\n        42,\n        48,\n        55,\n        65,\n        72,\n        78,\n        82,  # Morning ramp-up\n        80,\n        75,\n        85,\n        90,\n        88,\n        85,\n        78,\n        65,\n        55,\n        50,  # Afternoon peak\n        48,\n        45,\n        44,\n        43,  # Evening decline\n    ]\n)\n\n# Plot\nfig = go.Figure()\n\nfig.add_trace(\n    go.Scatter(\n        x=hours,\n        y=response_times,\n        mode=\"lines+markers\",\n        line={\"shape\": \"hv\", \"color\": BRAND, \"width\": 4},\n        marker={\"size\": 14, \"color\": BRAND, \"line\": {\"color\": PAGE_BG, \"width\": 2}},\n        name=\"Response Time\",\n        hovertemplate=\"Hour: %{x}<br>Response: %{y} ms<extra></extra>\",\n    )\n)\n\n# Style\nfig.update_layout(\n    title={\n        \"text\": \"line-stepwise · plotly · anyplot.ai\",\n        \"font\": {\"size\": 28, \"color\": INK},\n        \"x\": 0.5,\n        \"xanchor\": \"center\",\n    },\n    xaxis={\n        \"title\": {\"text\": \"Hour of Day\", \"font\": {\"size\": 22, \"color\": INK}},\n        \"tickfont\": {\"size\": 18, \"color\": INK_SOFT},\n        \"tickmode\": \"linear\",\n        \"tick0\": 0,\n        \"dtick\": 2,\n        \"range\": [-0.5, 23.5],\n        \"showgrid\": True,\n        \"gridcolor\": GRID,\n        \"gridwidth\": 1,\n        \"linecolor\": INK_SOFT,\n        \"zerolinecolor\": INK_SOFT,\n    },\n    yaxis={\n        \"title\": {\"text\": \"Response Time (ms)\", \"font\": {\"size\": 22, \"color\": INK}},\n        \"tickfont\": {\"size\": 18, \"color\": INK_SOFT},\n        \"range\": [35, 95],\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=False,\n    margin={\"l\": 100, \"r\": 80, \"t\": 120, \"b\": 100},\n)\n\n# Save\nfig.write_image(f\"plot-{THEME}.png\", width=1600, height=900, scale=3)\nfig.write_html(f\"plot-{THEME}.html\", include_plotlyjs=\"cdn\")\n"}