{"spec_id":"range-interval","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\nrange-interval: Range Interval Chart\nLibrary: plotly 6.7.0 | Python 3.13.13\nQuality: 86/100 | Updated: 2026-05-18\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)\"\n\n# Okabe-Ito palette\nBRAND = \"#009E73\"  # Primary series\nSECONDARY = \"#C475FD\"  # Secondary series\n\n# Data: Monthly temperature ranges (°C) for a temperate climate city\nnp.random.seed(42)\n\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\n\n# Realistic temperature ranges that follow seasonal pattern\nbase_temps = [-2, 0, 5, 12, 18, 22, 25, 24, 19, 12, 5, 0]\nmin_temps = [t - np.random.uniform(3, 6) for t in base_temps]\nmax_temps = [t + np.random.uniform(4, 8) for t in base_temps]\n\n# Create figure\nfig = go.Figure()\n\n# Add range bars as vertical lines with markers at endpoints\nfor i, month in enumerate(months):\n    # Range bar (vertical line)\n    fig.add_trace(\n        go.Scatter(\n            x=[month, month],\n            y=[min_temps[i], max_temps[i]],\n            mode=\"lines\",\n            line={\"color\": BRAND, \"width\": 18},\n            showlegend=False,\n            hoverinfo=\"skip\",\n        )\n    )\n\n# Add markers at min points (bottom)\nfig.add_trace(\n    go.Scatter(\n        x=months,\n        y=min_temps,\n        mode=\"markers\",\n        marker={\"color\": SECONDARY, \"size\": 18, \"line\": {\"color\": BRAND, \"width\": 3}},\n        name=\"Min Temperature\",\n        hovertemplate=\"%{x}<br>Min: %{y:.1f}°C<extra></extra>\",\n    )\n)\n\n# Add markers at max points (top)\nfig.add_trace(\n    go.Scatter(\n        x=months,\n        y=max_temps,\n        mode=\"markers\",\n        marker={\"color\": SECONDARY, \"size\": 18, \"line\": {\"color\": BRAND, \"width\": 3}},\n        name=\"Max Temperature\",\n        hovertemplate=\"%{x}<br>Max: %{y:.1f}°C<extra></extra>\",\n    )\n)\n\n# Add midpoint markers\nmidpoints = [(min_temps[i] + max_temps[i]) / 2 for i in range(len(months))]\nfig.add_trace(\n    go.Scatter(\n        x=months,\n        y=midpoints,\n        mode=\"markers\",\n        marker={\"color\": INK, \"size\": 10, \"line\": {\"color\": BRAND, \"width\": 2}},\n        name=\"Midpoint\",\n        hovertemplate=\"%{x}<br>Mid: %{y:.1f}°C<extra></extra>\",\n    )\n)\n\n# Update layout with theme-adaptive styling\nfig.update_layout(\n    title={\n        \"text\": \"range-interval · python · plotly · anyplot.ai\", \"font\": {\"size\": 28, \"color\": INK}, \"x\": 0.5, \"xanchor\": \"center\"\n    },\n    xaxis={\n        \"title\": {\"text\": \"Month\", \"font\": {\"size\": 22, \"color\": INK}},\n        \"tickfont\": {\"size\": 18, \"color\": INK_SOFT},\n        \"categoryorder\": \"array\",\n        \"categoryarray\": months,\n        \"showgrid\": False,\n        \"linecolor\": INK_SOFT,\n        \"linewidth\": 2,\n    },\n    yaxis={\n        \"title\": {\"text\": \"Temperature (°C)\", \"font\": {\"size\": 22, \"color\": INK}},\n        \"tickfont\": {\"size\": 18, \"color\": INK_SOFT},\n        \"gridcolor\": GRID,\n        \"gridwidth\": 1,\n        \"zeroline\": True,\n        \"zerolinecolor\": INK_SOFT,\n        \"zerolinewidth\": 2,\n        \"linecolor\": INK_SOFT,\n        \"linewidth\": 2,\n    },\n    paper_bgcolor=PAGE_BG,\n    plot_bgcolor=PAGE_BG,\n    font={\"color\": INK},\n    legend={\n        \"font\": {\"size\": 16, \"color\": INK_SOFT}, \"x\": 0.02, \"y\": 0.98, \"bgcolor\": ELEVATED_BG, \"bordercolor\": INK_SOFT, \"borderwidth\": 1\n    },\n    margin={\"l\": 80, \"r\": 40, \"t\": 80, \"b\": 60},\n    hovermode=\"closest\",\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"}