Merge branch 'main' into implementation/ecdf-basic/bokeh

Author: MarkusNeusinger

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

@@ -1,14 +1,23 @@
 """ anyplot.ai
 ecdf-basic: Basic ECDF Plot
-Library: altair 6.1.0 | Python 3.14.4
-Quality: 86/100 | Updated: 2026-04-24
+Library: altair 6.2.2 | Python 3.13.14
+Quality: 90/100 | Updated: 2026-06-25
 """
 
 import os
+import sys
+
+
+# The file is named altair.py; remove its own directory from sys.path so
+# `import altair` resolves to the library, not this script.
+_HERE = os.path.dirname(os.path.abspath(__file__))
+sys.path = [p for p in sys.path if not p or os.path.abspath(p) != _HERE]
+os.chdir(_HERE)  # saves (plot-*.png, plot-*.html) land in the implementations dir
 
 import altair as alt
 import numpy as np
 import pandas as pd
+from PIL import Image
 
 
 # Theme tokens
@@ -17,56 +26,126 @@
 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"
+INK_MUTED = "#6B6A63" if THEME == "light" else "#A8A79F"
+BRAND = "#009E73"  # Imprint palette position 1 — always first series
 
 # Data: API response latency from a production web service
 np.random.seed(42)
 response_times_ms = np.random.normal(loc=120, scale=35, size=250)
 response_times_ms = np.clip(response_times_ms, 20, None)
 
-sorted_latency = np.sort(response_times_ms)
-cumulative_proportion = np.arange(1, len(sorted_latency) + 1) / len(sorted_latency)
+# Raw data frame — ECDF computed declaratively via Vega-Lite window transform
+df = pd.DataFrame({"latency_ms": response_times_ms})
 
-df = pd.DataFrame({"latency_ms": sorted_latency, "cumulative": cumulative_proportion})
+# Reference values at quartiles for focal emphasis and text annotations
+p25_ms = float(np.percentile(response_times_ms, 25))
+p50_ms = float(np.median(response_times_ms))
+p75_ms = float(np.percentile(response_times_ms, 75))
+ref_df = pd.DataFrame(
+    {
+        "latency_ms": [p25_ms, p50_ms, p75_ms],
+        "cumulative": [0.25, 0.50, 0.75],
+        "label": [f"~{p25_ms:.0f}ms", f"~{p50_ms:.0f}ms", f"~{p75_ms:.0f}ms"],
+    }
+)
 
-# Chart
-chart = (
+# Title
+title_str = "ecdf-basic · python · altair · anyplot.ai"
+
+# ECDF step function — cume_dist() window transform computes the ECDF declaratively
+# in Vega-Lite without numpy preprocessing; step-after gives the correct step shape
+ecdf_line = (
     alt.Chart(df)
+    .transform_window(ecdf="cume_dist()", sort=[alt.SortField("latency_ms")])
     .mark_line(interpolate="step-after", strokeWidth=3.5, color=BRAND)
     .encode(
         x=alt.X("latency_ms:Q", title="API Response Time (ms)", scale=alt.Scale(nice=True)),
         y=alt.Y(
-            "cumulative:Q",
+            "ecdf:Q",
             title="Cumulative Proportion",
             scale=alt.Scale(domain=[0, 1]),
             axis=alt.Axis(format=".0%", tickCount=11),
         ),
         tooltip=[
             alt.Tooltip("latency_ms:Q", title="Latency (ms)", format=".1f"),
-            alt.Tooltip("cumulative:Q", title="Proportion", format=".3f"),
+            alt.Tooltip("ecdf:Q", title="Proportion", format=".3f"),
         ],
     )
+)
+
+# Dashed reference lines spanning the full axes at Q1, median, Q3
+h_rules = (
+    alt.Chart(ref_df)
+    .mark_rule(strokeDash=[5, 4], strokeWidth=1.5, color=INK_MUTED, opacity=0.75)
+    .encode(y="cumulative:Q")
+)
+
+v_rules = (
+    alt.Chart(ref_df)
+    .mark_rule(strokeDash=[5, 4], strokeWidth=1.5, color=INK_MUTED, opacity=0.75)
+    .encode(x="latency_ms:Q")
+)
+
+# Focal markers at quartile intersections on the ECDF
+focal_pts = (
+    alt.Chart(ref_df)
+    .mark_point(size=120, filled=True, color=BRAND, opacity=1.0)
+    .encode(
+        x="latency_ms:Q",
+        y="cumulative:Q",
+        tooltip=[
+            alt.Tooltip("latency_ms:Q", title="Latency (ms)", format=".1f"),
+            alt.Tooltip("cumulative:Q", title="Quartile", format=".0%"),
+        ],
+    )
+)
+
+# Text annotations at focal points for at-a-glance percentile reading without hover
+focal_labels = (
+    alt.Chart(ref_df)
+    .mark_text(align="left", dx=8, dy=-5, fontSize=9, color=INK_SOFT, fontWeight="bold")
+    .encode(x="latency_ms:Q", y="cumulative:Q", text="label:N")
+)
+
+# Compose layers and configure theme-adaptive chrome
+chart = (
+    alt.layer(ecdf_line, h_rules, v_rules, focal_pts, focal_labels)
+    .interactive()
     .properties(
-        width=1600,
-        height=900,
+        width=620,
+        height=320,
         background=PAGE_BG,
-        title=alt.Title("ecdf-basic · altair · anyplot.ai", fontSize=28, color=INK),
+        padding={"left": 0, "right": 0, "top": 0, "bottom": 0},
+        title=alt.Title(title_str, fontSize=16, color=INK),
     )
-    .interactive()
-    .configure_view(fill=PAGE_BG, strokeWidth=0)
+    .configure_view(fill=PAGE_BG, stroke=INK_SOFT, strokeWidth=0, continuousWidth=620, continuousHeight=320)
     .configure_axis(
         domainColor=INK_SOFT,
         tickColor=INK_SOFT,
-        gridColor=INK,
-        gridOpacity=0.10,
         labelColor=INK_SOFT,
         titleColor=INK,
-        labelFontSize=18,
-        titleFontSize=22,
+        labelFontSize=10,
+        titleFontSize=12,
     )
+    .configure_axisX(grid=False)
+    .configure_axisY(gridColor=INK, gridOpacity=0.13)
     .configure_title(color=INK)
 )
 
 # Save
-chart.save(f"plot-{THEME}.png", scale_factor=3.0)
+chart.save(f"plot-{THEME}.png", scale_factor=4.0)
 chart.save(f"plot-{THEME}.html")
+
+# Canvas: pad to exactly 3200×1800 with PAGE_BG (vl-convert inner-view padding lands short)
+TW, TH = 3200, 1800
+_img = Image.open(f"plot-{THEME}.png").convert("RGB")
+_w, _h = _img.size
+if _w > TW or _h > TH:
+    raise SystemExit(
+        f"altair vl-convert produced {_w}×{_h}, exceeds target {TW}×{TH}. "
+        f"Shrink chart .properties(width=, height=) values and re-render."
+    )
+if _w < TW or _h < TH:
+    _canvas = Image.new("RGB", (TW, TH), PAGE_BG)
+    _canvas.paste(_img, ((TW - _w) // 2, (TH - _h) // 2))
+    _canvas.save(f"plot-{THEME}.png")

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

@@ -1,7 +1,7 @@
 """ anyplot.ai
 ecdf-basic: Basic ECDF Plot
-Library: matplotlib 3.10.9 | Python 3.14.4
-Quality: 89/100 | Updated: 2026-04-24
+Library: matplotlib 3.11.0 | Python 3.13.14
+Quality: 91/100 | Updated: 2026-06-25
 """
 
 import os
@@ -10,52 +10,65 @@
 import numpy as np
 
 
-# Theme
 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"
-BRAND = "#009E73"
+BRAND = "#009E73"  # Imprint palette position 1
 
-# Data: API response times (ms) — log-normal distribution with a long tail
-np.random.seed(42)
-response_times_ms = np.random.lognormal(mean=4.6, sigma=0.55, size=250)
+# Data: IoT sensor temperature readings (°C) — bimodal mix of offices and server rooms
+np.random.seed(7)
+office = np.random.normal(loc=22.0, scale=1.8, size=160)
+servers = np.random.normal(loc=18.5, scale=0.9, size=90)
+temps = np.concatenate([office, servers])
+t_min = temps.min()
 
-# Plot
-fig, ax = plt.subplots(figsize=(16, 9), facecolor=PAGE_BG)
+# Canvas — 3200 × 1800 px landscape (figsize × dpi, no bbox_inches='tight')
+fig, ax = plt.subplots(figsize=(8, 4.5), dpi=400, facecolor=PAGE_BG)
 ax.set_facecolor(PAGE_BG)
 
-ax.ecdf(response_times_ms, color=BRAND, linewidth=3.5)
+# Subtle fill under the ECDF curve for visual weight
+sorted_temps = np.sort(temps)
+ecdf_y = np.arange(1, len(sorted_temps) + 1) / len(sorted_temps)
+ax.fill_between(sorted_temps, 0, ecdf_y, step="post", alpha=0.10, color=BRAND)
 
-# Percentile reference lines (p50, p95, p99) — common SRE reading
-percentiles = [50, 95, 99]
-percentile_values = np.percentile(response_times_ms, percentiles)
-for p, v in zip(percentiles, percentile_values, strict=True):
-    ax.axhline(y=p / 100, color=INK_SOFT, linestyle=":", linewidth=1.5, alpha=0.6)
-    ax.axvline(x=v, ymax=p / 100, color=INK_SOFT, linestyle=":", linewidth=1.5, alpha=0.6)
+# ECDF step function (drawn on top of fill)
+ax.ecdf(temps, color=BRAND, linewidth=2.5)
+
+# Bimodal mode markers — highlight the two sensor populations
+for mode_temp, label in [(18.5, "Server\nrooms"), (22.0, "Offices")]:
+    ax.axvline(mode_temp, color=INK_MUTED, linestyle="--", linewidth=0.8, alpha=0.45)
+    ax.text(mode_temp + 0.2, 0.05, label, fontsize=8, color=INK_MUTED, va="bottom", ha="left")
+
+# Quartile reference guides (Q1, Q2, Q3)
+quartiles = [25, 50, 75]
+q_values = np.percentile(temps, quartiles)
+for q, v in zip(quartiles, q_values, strict=True):
+    yf = q / 100
+    ax.plot([t_min - 0.3, v], [yf, yf], color=INK_MUTED, linestyle=":", linewidth=0.8, alpha=0.6)
+    ax.plot([v, v], [0, yf], color=INK_MUTED, linestyle=":", linewidth=0.8, alpha=0.6)
     ax.annotate(
-        f"p{p}  {v:.0f} ms",
-        xy=(v, p / 100),
-        xytext=(10, -18 if p == 99 else 8),
-        textcoords="offset points",
-        fontsize=14,
-        color=INK_SOFT,
+        f"Q{q // 25}  {v:.1f}°C", xy=(v, yf), xytext=(5, 5), textcoords="offset points", fontsize=9, color=INK_MUTED
     )
 
-# Style
-ax.set_xlabel("Response Time (ms)", fontsize=20, color=INK)
-ax.set_ylabel("Cumulative Proportion of Requests", fontsize=20, color=INK)
-ax.set_title("API Response Times · ecdf-basic · matplotlib · anyplot.ai", fontsize=24, fontweight="medium", color=INK)
-ax.tick_params(axis="both", labelsize=16, colors=INK_SOFT)
+# Chrome
+title = "Sensor Temperatures · ecdf-basic · python · matplotlib · anyplot.ai"
+title_fs = max(8, round(12 * 67 / len(title))) if len(title) > 67 else 12
+ax.set_title(title, fontsize=title_fs, fontweight="medium", color=INK)
+ax.set_xlabel("Temperature (°C)", fontsize=10, color=INK)
+ax.set_ylabel("Cumulative Proportion", fontsize=10, color=INK)
+ax.tick_params(axis="both", labelsize=8, colors=INK_SOFT, labelcolor=INK_SOFT)
 ax.set_ylim(0, 1.02)
-ax.set_xlim(left=0)
+ax.set_xlim(left=t_min - 0.5)
+
 ax.spines["top"].set_visible(False)
 ax.spines["right"].set_visible(False)
 for s in ("left", "bottom"):
     ax.spines[s].set_color(INK_SOFT)
-ax.grid(True, alpha=0.10, linewidth=0.8, color=INK)
 
-plt.tight_layout()
-plt.savefig(f"plot-{THEME}.png", dpi=300, bbox_inches="tight", facecolor=PAGE_BG)
+ax.yaxis.grid(True, alpha=0.15, linewidth=0.8, color=INK)
+
+fig.subplots_adjust(left=0.09, right=0.97, top=0.92, bottom=0.12)
+plt.savefig(f"plot-{THEME}.png", dpi=400, facecolor=PAGE_BG)