feat(altair): implement slope-basic

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

@@ -1,14 +1,34 @@
-""" pyplots.ai
+""" anyplot.ai
 slope-basic: Basic Slope Chart (Slopegraph)
-Library: altair 6.0.0 | Python 3.13.11
-Quality: 94/100 | Created: 2025-12-17
+Library: altair 6.1.0 | Python 3.13.13
+Quality: 86/100 | Created: 2026-04-30
 """
 
-import altair as alt
+import os
+import sys
+
 import pandas as pd
 
 
-# Data - Product sales comparing Q1 vs Q4 (10 products)
+_script_dir = os.path.dirname(os.path.abspath(__file__))
+if _script_dir in sys.path:
+    sys.path.remove(_script_dir)
+
+import altair as alt  # noqa: E402
+
+
+# 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"
+
+# Okabe-Ito: position 1 = Increase, position 2 = Decrease
+COLOR_INCREASE = "#009E73"
+COLOR_DECREASE = "#D55E00"
+
+# Data
 data = pd.DataFrame(
     {
         "Product": [
@@ -28,84 +48,67 @@
     }
 )
 
-# Reshape data to long format for slope chart
 df_long = pd.melt(data, id_vars=["Product"], value_vars=["Q1 Sales", "Q4 Sales"], var_name="Period", value_name="Sales")
-
-# Determine direction of change for color coding
 data["Direction"] = data.apply(lambda row: "Increase" if row["Q4 Sales"] > row["Q1 Sales"] else "Decrease", axis=1)
 df_long = df_long.merge(data[["Product", "Direction"]], on="Product")
 
-# Create slope chart
+color_scale = alt.Scale(domain=["Increase", "Decrease"], range=[COLOR_INCREASE, COLOR_DECREASE])
+
+# Plot
 lines = (
     alt.Chart(df_long)
     .mark_line(strokeWidth=3, opacity=0.8)
     .encode(
-        x=alt.X("Period:N", axis=alt.Axis(labelFontSize=20, titleFontSize=24, title=None, labelAngle=0)),
+        x=alt.X("Period:N", axis=alt.Axis(labelFontSize=20, title=None, labelAngle=0)),
         y=alt.Y(
             "Sales:Q",
             axis=alt.Axis(labelFontSize=18, titleFontSize=22, title="Sales (units)"),
             scale=alt.Scale(zero=False),
         ),
         color=alt.Color(
-            "Direction:N",
-            scale=alt.Scale(domain=["Increase", "Decrease"], range=["#306998", "#FFD43B"]),
-            legend=alt.Legend(titleFontSize=20, labelFontSize=18, orient="top-right"),
+            "Direction:N", scale=color_scale, legend=alt.Legend(titleFontSize=20, labelFontSize=18, orient="top-right")
         ),
         detail="Product:N",
     )
 )
 
-# Add points at endpoints
 points = (
     alt.Chart(df_long)
     .mark_circle(size=200, opacity=0.9)
-    .encode(
-        x="Period:N",
-        y="Sales:Q",
-        color=alt.Color(
-            "Direction:N", scale=alt.Scale(domain=["Increase", "Decrease"], range=["#306998", "#FFD43B"]), legend=None
-        ),
-    )
+    .encode(x="Period:N", y="Sales:Q", color=alt.Color("Direction:N", scale=color_scale, legend=None))
 )
 
-# Add labels at left endpoint (Q1)
 labels_left = (
     alt.Chart(df_long[df_long["Period"] == "Q1 Sales"])
     .mark_text(align="right", dx=-15, fontSize=16)
-    .encode(
-        x="Period:N",
-        y="Sales:Q",
-        text="Product:N",
-        color=alt.Color(
-            "Direction:N", scale=alt.Scale(domain=["Increase", "Decrease"], range=["#306998", "#FFD43B"]), legend=None
-        ),
-    )
+    .encode(x="Period:N", y="Sales:Q", text="Product:N", color=alt.Color("Direction:N", scale=color_scale, legend=None))
 )
 
-# Add labels at right endpoint (Q4)
 labels_right = (
     alt.Chart(df_long[df_long["Period"] == "Q4 Sales"])
     .mark_text(align="left", dx=15, fontSize=16)
-    .encode(
-        x="Period:N",
-        y="Sales:Q",
-        text="Product:N",
-        color=alt.Color(
-            "Direction:N", scale=alt.Scale(domain=["Increase", "Decrease"], range=["#306998", "#FFD43B"]), legend=None
-        ),
-    )
+    .encode(x="Period:N", y="Sales:Q", text="Product:N", color=alt.Color("Direction:N", scale=color_scale, legend=None))
 )
 
-# Combine layers
+# Style
 chart = (
     (lines + points + labels_left + labels_right)
-    .properties(
-        width=1400, height=850, title=alt.Title(text="slope-basic · altair · pyplots.ai", fontSize=28, anchor="middle")
+    .properties(width=1400, height=850, background=PAGE_BG, title="slope-basic · altair · anyplot.ai")
+    .configure_title(color=INK, fontSize=28, anchor="middle")
+    .configure_axis(
+        domainColor=INK_SOFT,
+        tickColor=INK_SOFT,
+        grid=True,
+        gridColor=INK,
+        gridOpacity=0.10,
+        gridDash=[4, 4],
+        labelColor=INK_SOFT,
+        titleColor=INK,
     )
-    .configure_axis(grid=True, gridOpacity=0.3, gridDash=[4, 4])
-    .configure_view(strokeWidth=0)
+    .configure_view(fill=PAGE_BG, stroke=INK_SOFT)
+    .configure_legend(fillColor=ELEVATED_BG, strokeColor=INK_SOFT, labelColor=INK_SOFT, titleColor=INK)
 )
 
-# Save as PNG (4800 × 2700 px) and HTML
-chart.save("plot.png", scale_factor=3.0)
-chart.save("plot.html")
+# Save
+chart.save(f"plot-{THEME}.png", scale_factor=3.0)
+chart.save(f"plot-{THEME}.html")