Merge branch 'main' into implementation/span-basic/highcharts

Author: MarkusNeusinger

plots/span-basic/implementations/python/bokeh.py

@@ -1,15 +1,25 @@
-""" pyplots.ai
+""" anyplot.ai
 span-basic: Basic Span Plot (Highlighted Region)
-Library: bokeh 3.8.1 | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-23
+Library: bokeh 3.9.0 | Python 3.13.13
+Quality: 89/100 | Updated: 2026-04-30
 """
 
+import os
+
 import numpy as np
 from bokeh.io import export_png, output_file, save
-from bokeh.models import BoxAnnotation, ColumnDataSource, Label
+from bokeh.models import BoxAnnotation, ColumnDataSource, HoverTool, Label
 from bokeh.plotting import figure
 
 
+# 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"
+BRAND = "#009E73"  # Okabe-Ito position 1 — always first series
+
 # Data - Monthly revenue over 2 years with spans highlighting key periods
 np.random.seed(42)
 months = np.arange(1, 25)
@@ -24,56 +34,79 @@
 p = figure(
     width=4800,
     height=2700,
-    title="span-basic · bokeh · pyplots.ai",
+    title="span-basic · bokeh · anyplot.ai",
     x_axis_label="Month",
     y_axis_label="Revenue (thousands $)",
 )
 
 # Add vertical span - highlight Q4 of Year 1 (months 10-12)
 vertical_span = BoxAnnotation(
-    left=10, right=12, fill_alpha=0.25, fill_color="#306998", line_color="#306998", line_width=2, line_alpha=0.5
+    left=10, right=12, fill_alpha=0.25, fill_color="#0072B2", line_color="#0072B2", line_width=2, line_alpha=0.5
 )
 p.add_layout(vertical_span)
 
 # Add horizontal span - highlight target revenue range (120-140)
 horizontal_span = BoxAnnotation(
-    bottom=120, top=140, fill_alpha=0.2, fill_color="#FFD43B", line_color="#FFD43B", line_width=2, line_alpha=0.5
+    bottom=120, top=140, fill_alpha=0.2, fill_color="#E69F00", line_color="#E69F00", line_width=2, line_alpha=0.5
 )
 p.add_layout(horizontal_span)
 
-# Plot line with markers
-p.line(x="x", y="y", source=source, line_width=4, line_color="#306998", legend_label="Monthly Revenue")
-p.scatter(x="x", y="y", source=source, size=16, fill_color="#306998", line_color="white", line_width=2)
+# Plot line with markers (Okabe-Ito position 1)
+p.line(x="x", y="y", source=source, line_width=4, line_color=BRAND, legend_label="Monthly Revenue")
+p.scatter(x="x", y="y", source=source, size=20, fill_color=BRAND, line_color=PAGE_BG, line_width=2)
+
+# HoverTool — showcases Bokeh's interactive HTML output
+hover = HoverTool(tooltips=[("Month", "@x"), ("Revenue", "@y{0.1} K$")])
+p.add_tools(hover)
 
-# Add labels for spans
+# Add labels for spans — positioned prominently at top of each span
 vertical_label = Label(
-    x=10.2, y=102, text="Q4 Peak Season", text_font_size="24pt", text_color="#1a4d7c", text_font_style="bold"
+    x=10.2, y=143, text="Q4 Peak Season", text_font_size="28pt", text_color="#0072B2", text_font_style="bold"
 )
 p.add_layout(vertical_label)
 
 horizontal_label = Label(
-    x=17, y=125, text="Target Range", text_font_size="28pt", text_color="#B8860B", text_font_style="bold"
+    x=17,
+    y=124,
+    text="Target Range",
+    text_font_size="28pt",
+    text_color="#B8720B" if THEME == "light" else "#E69F00",
+    text_font_style="bold",
 )
 p.add_layout(horizontal_label)
 
-# Style text sizes for 4800x2700 px
+# Apply theme-adaptive chrome
+p.background_fill_color = PAGE_BG
+p.border_fill_color = PAGE_BG
+p.outline_line_color = None  # remove box border; L-shaped spines via xaxis/yaxis lines only
+
+p.title.text_color = INK
 p.title.text_font_size = "48pt"
+p.xaxis.axis_label_text_color = INK
+p.yaxis.axis_label_text_color = INK
 p.xaxis.axis_label_text_font_size = "36pt"
 p.yaxis.axis_label_text_font_size = "36pt"
+p.xaxis.major_label_text_color = INK_SOFT
+p.yaxis.major_label_text_color = INK_SOFT
 p.xaxis.major_label_text_font_size = "28pt"
 p.yaxis.major_label_text_font_size = "28pt"
+p.xaxis.axis_line_color = INK_SOFT
+p.yaxis.axis_line_color = INK_SOFT
+p.xaxis.major_tick_line_color = INK_SOFT
+p.yaxis.major_tick_line_color = INK_SOFT
 
-# Grid styling
-p.grid.grid_line_alpha = 0.3
-p.grid.grid_line_dash = "dashed"
+p.xgrid.grid_line_color = None  # y-only grid preferred for line charts
+p.ygrid.grid_line_color = INK
+p.ygrid.grid_line_alpha = 0.10
 
-# Legend styling
+# Legend — top-left for better visual balance
 p.legend.label_text_font_size = "28pt"
-p.legend.location = "bottom_right"
-p.legend.background_fill_alpha = 0.7
-
-# Save as PNG and HTML
-export_png(p, filename="plot.png")
+p.legend.location = "top_left"
+p.legend.background_fill_color = ELEVATED_BG
+p.legend.border_line_color = INK_SOFT
+p.legend.label_text_color = INK_SOFT
 
-output_file("plot.html")
+# Save
+export_png(p, filename=f"plot-{THEME}.png")
+output_file(f"plot-{THEME}.html")
 save(p)

plots/span-basic/implementations/python/matplotlib.py

@@ -1,45 +1,66 @@
-""" pyplots.ai
+""" anyplot.ai
 span-basic: Basic Span Plot (Highlighted Region)
-Library: matplotlib 3.10.8 | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-23
+Library: matplotlib 3.10.9 | Python 3.13.13
+Quality: 91/100 | Updated: 2026-04-30
 """
 
+import os
+
 import matplotlib.pyplot as plt
 import numpy as np
 
 
-# Data - Stock prices with highlighted recession period
-np.random.seed(42)
-dates = np.arange(2006, 2016, 0.1)  # 10 years of data
+# 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"
 
-# Simulate stock price with trend and volatility
-price = 100 + np.cumsum(np.random.randn(len(dates)) * 2)
+BRAND = "#009E73"  # Okabe-Ito position 1 — first series
+C2 = "#D55E00"  # Okabe-Ito position 2
+C3 = "#0072B2"  # Okabe-Ito position 3
+
+# Data — stock prices with a simulated recession dip
+np.random.seed(42)
+dates = np.arange(2004, 2016, 0.1)
 
-# Add a dip during recession period (2008-2009)
+price = 100 + np.cumsum(np.random.randn(len(dates)) * 1.5)
 recession_mask = (dates >= 2008) & (dates < 2010)
-price[recession_mask] -= np.linspace(0, 30, recession_mask.sum())
-price[dates >= 2010] -= 30
-price = price + np.abs(price.min()) + 50  # Keep positive
+price[recession_mask] -= np.linspace(0, 35, recession_mask.sum())
+price[dates >= 2010] -= 35
+price = price - price.min() + 70
+
+# Plot
+fig, ax = plt.subplots(figsize=(16, 9), facecolor=PAGE_BG)
+ax.set_facecolor(PAGE_BG)
+
+ax.plot(dates, price, linewidth=3, color=BRAND, label="Stock Price Index")
+
+# Vertical span — recession period (2008–2009)
+ax.axvspan(2008, 2010, alpha=0.22, color=C2, label="Recession Period")
 
-# Create plot (4800x2700 px)
-fig, ax = plt.subplots(figsize=(16, 9))
+# Horizontal span — risk zone (low values)
+ax.axhspan(70, 95, alpha=0.18, color=C3, label="Risk Zone")
 
-# Plot line data
-ax.plot(dates, price, linewidth=3, color="#306998", label="Stock Price")
+# Style
+ax.set_xlabel("Year", fontsize=20, color=INK)
+ax.set_ylabel("Price Index", fontsize=20, color=INK)
+ax.set_title("span-basic · matplotlib · anyplot.ai", fontsize=24, fontweight="medium", color=INK)
+ax.tick_params(axis="both", labelsize=16, colors=INK_SOFT, labelcolor=INK_SOFT)
 
-# Vertical span highlighting recession period (2008-2009)
-ax.axvspan(2008, 2009, alpha=0.25, color="#FFD43B", label="Recession Period")
+ax.spines["top"].set_visible(False)
+ax.spines["right"].set_visible(False)
+for spine in ("left", "bottom"):
+    ax.spines[spine].set_color(INK_SOFT)
 
-# Horizontal span highlighting danger zone (low values)
-ax.axhspan(60, 80, alpha=0.2, color="#D62728", label="Risk Zone")
+ax.yaxis.grid(True, alpha=0.12, linewidth=0.8, color=INK)
 
-# Labels and styling
-ax.set_xlabel("Year", fontsize=20)
-ax.set_ylabel("Price ($)", fontsize=20)
-ax.set_title("span-basic · matplotlib · pyplots.ai", fontsize=24)
-ax.tick_params(axis="both", labelsize=16)
-ax.grid(True, alpha=0.3, linestyle="--")
-ax.legend(fontsize=16, loc="upper left")
+leg = ax.legend(fontsize=16, loc="upper left")
+leg.get_frame().set_facecolor(ELEVATED_BG)
+leg.get_frame().set_edgecolor(INK_SOFT)
+plt.setp(leg.get_texts(), color=INK_SOFT)
 
 plt.tight_layout()
-plt.savefig("plot.png", dpi=300, bbox_inches="tight")
+plt.savefig(f"plot-{THEME}.png", dpi=300, bbox_inches="tight", facecolor=PAGE_BG)

plots/span-basic/implementations/python/seaborn.py

@@ -1,50 +1,82 @@
-""" pyplots.ai
+""" anyplot.ai
 span-basic: Basic Span Plot (Highlighted Region)
-Library: seaborn 0.13.2 | Python 3.13.11
-Quality: 91/100 | Created: 2025-12-23
+Library: seaborn 0.13.2 | Python 3.13.13
+Quality: 88/100 | Updated: 2026-04-30
 """
 
+import os
+
 import matplotlib.pyplot as plt
 import numpy as np
 import pandas as pd
 import seaborn as sns
 
 
-# Data - Monthly sales with recession period and target threshold
+# 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"
+
+BRAND = "#009E73"  # Okabe-Ito position 1 — always first series
+SPAN_RECESSION = "#D55E00"  # Okabe-Ito position 2
+SPAN_TARGET = "#0072B2"  # Okabe-Ito position 3
+
+sns.set_theme(
+    style="ticks",
+    rc={
+        "figure.facecolor": PAGE_BG,
+        "axes.facecolor": PAGE_BG,
+        "axes.edgecolor": INK_SOFT,
+        "axes.labelcolor": INK,
+        "text.color": INK,
+        "xtick.color": INK_SOFT,
+        "ytick.color": INK_SOFT,
+        "grid.color": INK,
+        "grid.alpha": 0.10,
+        "legend.facecolor": ELEVATED_BG,
+        "legend.edgecolor": INK_SOFT,
+    },
+)
+
+# Data - Monthly sales revenue with recession period and target threshold
 np.random.seed(42)
 months = pd.date_range(start="2006-01", periods=60, freq="ME")
 base_trend = np.linspace(100, 150, 60)
-# Dip during recession period (2008-2009)
 recession_effect = np.where((months >= "2008-01") & (months <= "2009-12"), -30 * np.sin(np.linspace(0, np.pi, 60)), 0)
 sales = base_trend + recession_effect + np.random.randn(60) * 8
-
 df = pd.DataFrame({"Month": months, "Sales": sales})
 
 # Plot
-fig, ax = plt.subplots(figsize=(16, 9))
+fig, ax = plt.subplots(figsize=(16, 9), facecolor=PAGE_BG)
 
-# Vertical span - recession period (2008-2009)
+# Vertical span — recession period (2008–2009)
 ax.axvspan(
     pd.Timestamp("2008-01-01"),
     pd.Timestamp("2009-12-31"),
     alpha=0.25,
-    color="#306998",
-    label="Recession Period (2008-2009)",
+    color=SPAN_RECESSION,
+    label="Recession (2008–2009)",
 )
 
-# Horizontal span - target sales zone (120-140)
-ax.axhspan(120, 140, alpha=0.2, color="#FFD43B", label="Target Zone (120-140)")
+# Horizontal span — target sales zone (120–140)
+ax.axhspan(120, 140, alpha=0.20, color=SPAN_TARGET, label="Target Zone (120–140)")
 
-# Line plot using seaborn
-sns.lineplot(data=df, x="Month", y="Sales", ax=ax, linewidth=3, color="#306998")
+# Line plot
+sns.lineplot(data=df, x="Month", y="Sales", ax=ax, linewidth=3, color=BRAND)
 
-# Styling
-ax.set_title("span-basic · seaborn · pyplots.ai", fontsize=24)
-ax.set_xlabel("Month", fontsize=20)
-ax.set_ylabel("Sales (thousands $)", fontsize=20)
-ax.tick_params(axis="both", labelsize=16)
+# Style
+ax.set_title("span-basic · seaborn · anyplot.ai", fontsize=24, fontweight="medium", color=INK)
+ax.set_xlabel("Month", fontsize=20, color=INK)
+ax.set_ylabel("Sales (thousands $)", fontsize=20, color=INK)
+ax.tick_params(axis="both", labelsize=16, colors=INK_SOFT)
+ax.spines["top"].set_visible(False)
+ax.spines["right"].set_visible(False)
+ax.spines["left"].set_color(INK_SOFT)
+ax.spines["bottom"].set_color(INK_SOFT)
+ax.yaxis.grid(True, alpha=0.10, linewidth=0.8, color=INK)
 ax.legend(fontsize=16, loc="upper left")
-ax.grid(True, alpha=0.3, linestyle="--")
 
 plt.tight_layout()
-plt.savefig("plot.png", dpi=300, bbox_inches="tight")
+plt.savefig(f"plot-{THEME}.png", dpi=300, bbox_inches="tight", facecolor=PAGE_BG)