feat(plotly): implement slope-basic

plots/slope-basic/implementations/python/plotly.py

@@ -1,12 +1,28 @@
-""" pyplots.ai
+""" anyplot.ai
 slope-basic: Basic Slope Chart (Slopegraph)
-Library: plotly 6.5.0 | Python 3.13.11
-Quality: 91/100 | Created: 2025-12-23
+Library: plotly 6.7.0 | Python 3.13.13
+Quality: 88/100 | Updated: 2026-04-30
 """
 
+import os
+
 import plotly.graph_objects as go
 
 
+# Theme tokens
+THEME = os.getenv("ANYPLOT_THEME", "light")
+PAGE_BG = "#FAF8F1" if THEME == "light" else "#1A1A17"
+ELEVATED_BG = "#FFFDF6" if THEME == "light" else "#242420"
+INK = "#1A1A17" if THEME == "light" else "#F0EFE8"
+INK_SOFT = "#4A4A44" if THEME == "light" else "#B8B7B0"
+INK_MUTED = "#6B6A63" if THEME == "light" else "#A8A79F"
+GRID = "rgba(26,26,23,0.10)" if THEME == "light" else "rgba(240,239,232,0.10)"
+
+# Okabe-Ito: increase = brand green, decrease = vermillion, flat = adaptive neutral
+COLOR_UP = "#009E73"
+COLOR_DOWN = "#D55E00"
+COLOR_FLAT = INK_MUTED
+
 # Data - Product sales Q1 vs Q4 comparison (10 products showing various patterns)
 products = [
     "Laptop Pro",
@@ -21,39 +37,36 @@
     "Monitor Stand",
 ]
 
-# Sales figures in thousands ($K)
 sales_q1 = [245, 180, 120, 195, 85, 110, 45, 30, 75, 55]
 sales_q4 = [310, 220, 195, 160, 145, 130, 95, 85, 70, 40]
 
-# Color coding by change direction
 colors = []
 for q1, q4 in zip(sales_q1, sales_q4, strict=True):
     if q4 > q1:
-        colors.append("#306998")  # Python Blue for increase
+        colors.append(COLOR_UP)
     elif q4 < q1:
-        colors.append("#FFD43B")  # Python Yellow for decrease
+        colors.append(COLOR_DOWN)
     else:
-        colors.append("#888888")  # Gray for no change
+        colors.append(COLOR_FLAT)
 
-# Create figure
+# Plot
 fig = go.Figure()
 
-# Add slope lines for each product
 for i, product in enumerate(products):
     fig.add_trace(
         go.Scatter(
             x=[0, 1],
             y=[sales_q1[i], sales_q4[i]],
             mode="lines+markers",
             line={"color": colors[i], "width": 3},
-            marker={"size": 14},
+            marker={"size": 14, "color": colors[i]},
             name=product,
             showlegend=False,
             hovertemplate=f"{product}<br>Q1: ${sales_q1[i]}K<br>Q4: ${sales_q4[i]}K<extra></extra>",
         )
     )
 
-# Add labels at start points (Q1)
+# Labels at Q1 (left side)
 for i, product in enumerate(products):
     fig.add_annotation(
         x=-0.05,
@@ -64,7 +77,7 @@
         font={"size": 16, "color": colors[i]},
     )
 
-# Add labels at end points (Q4)
+# Labels at Q4 (right side)
 for i, product in enumerate(products):
     fig.add_annotation(
         x=1.05,
@@ -75,35 +88,39 @@
         font={"size": 16, "color": colors[i]},
     )
 
-# Layout
+# Style
 fig.update_layout(
+    paper_bgcolor=PAGE_BG,
+    plot_bgcolor=PAGE_BG,
+    font={"color": INK},
     title={
-        "text": "Product Sales Q1 vs Q4 · slope-basic · plotly · pyplots.ai",
-        "font": {"size": 28},
+        "text": "Product Sales Q1 vs Q4 · slope-basic · plotly · anyplot.ai",
+        "font": {"size": 28, "color": INK},
         "x": 0.5,
         "xanchor": "center",
     },
     xaxis={
         "tickmode": "array",
         "tickvals": [0, 1],
         "ticktext": ["Q1 2024", "Q4 2024"],
-        "tickfont": {"size": 22},
-        "range": [-0.4, 1.4],
+        "tickfont": {"size": 22, "color": INK_SOFT},
+        "range": [-0.5, 1.5],
         "showgrid": False,
         "zeroline": False,
+        "linecolor": INK_SOFT,
     },
     yaxis={
-        "title": {"text": "Sales ($K)", "font": {"size": 22}},
-        "tickfont": {"size": 18},
+        "title": {"text": "Sales ($K)", "font": {"size": 22, "color": INK}},
+        "tickfont": {"size": 18, "color": INK_SOFT},
         "showgrid": True,
         "gridwidth": 1,
-        "gridcolor": "rgba(0,0,0,0.1)",
+        "gridcolor": GRID,
         "zeroline": False,
+        "linecolor": INK_SOFT,
     },
-    template="plotly_white",
-    margin={"l": 200, "r": 200, "t": 80, "b": 60},
+    margin={"l": 220, "r": 220, "t": 80, "b": 60},
 )
 
-# Save outputs
-fig.write_image("plot.png", width=1600, height=900, scale=3)
-fig.write_html("plot.html")
+# Save
+fig.write_image(f"plot-{THEME}.png", width=1600, height=900, scale=3)
+fig.write_html(f"plot-{THEME}.html", include_plotlyjs="cdn")