update(band-basic): highcharts — comprehensive quality review

Comprehensive quality review of highcharts band-basic implementation.

Author: MarkusNeusinger

plots/band-basic/implementations/highcharts.py

@@ -1,7 +1,7 @@
-""" pyplots.ai
+"""pyplots.ai
 band-basic: Basic Band Plot
-Library: highcharts unknown | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-23
+Library: highcharts 1.10.3 | Python 3.14
+Quality: /100 | Updated: 2026-02-23
 """
 
 import json
@@ -16,22 +16,26 @@
 from selenium.webdriver.chrome.options import Options
 
 
-# Data - Time series with 95% confidence interval
+# Data - Daily temperature forecast with 95% prediction interval
 np.random.seed(42)
-x = np.linspace(0, 10, 50)
-# Central trend with sinusoidal pattern
-y_center = 50 + 20 * np.sin(x) + x * 2
-# Uncertainty increases with x (heteroscedastic)
-uncertainty = 3 + 0.5 * x
-# Upper and lower bounds
-y_lower = y_center - 1.96 * uncertainty
-y_upper = y_center + 1.96 * uncertainty
+days = np.arange(1, 31)
+# Central forecast: warming trend with daily variation
+temp_center = 12 + 0.3 * days + 4 * np.sin(days * 0.4)
+# Prediction uncertainty widens over the forecast horizon
+uncertainty = 1.5 + 0.08 * days
+temp_lower = temp_center - 1.96 * uncertainty
+temp_upper = temp_center + 1.96 * uncertainty
 
 # Prepare data for Highcharts
 # arearange series expects [[x, low, high], ...]
-band_data = [[float(xi), float(lo), float(hi)] for xi, lo, hi in zip(x, y_lower, y_upper, strict=True)]
+band_data = [
+    [int(d), round(float(lo), 1), round(float(hi), 1)] for d, lo, hi in zip(days, temp_lower, temp_upper, strict=True)
+]
 # line series expects [[x, y], ...]
-line_data = [[float(xi), float(yi)] for xi, yi in zip(x, y_center, strict=True)]
+line_data = [[int(d), round(float(t), 1)] for d, t in zip(days, temp_center, strict=True)]
+
+# Font stack
+font_family = "'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
 
 # Chart options using arearange for band and line for center
 chart_options = {
@@ -40,70 +44,84 @@
         "height": 2700,
         "backgroundColor": "#ffffff",
         "marginBottom": 180,
-        "marginLeft": 200,
+        "marginLeft": 220,
         "marginRight": 100,
-        "style": {"fontFamily": "Arial, sans-serif"},
+        "spacing": [40, 40, 40, 40],
+        "style": {"fontFamily": font_family},
+    },
+    "title": {
+        "text": "30-Day Temperature Forecast \u00b7 band-basic \u00b7 highcharts \u00b7 pyplots.ai",
+        "style": {"fontSize": "48px", "fontWeight": "bold", "fontFamily": font_family},
+    },
+    "subtitle": {
+        "text": "Daily forecast with 95% prediction interval",
+        "style": {"fontSize": "30px", "color": "#555555", "fontFamily": font_family},
     },
-    "title": {"text": "band-basic · highcharts · pyplots.ai", "style": {"fontSize": "64px", "fontWeight": "bold"}},
-    "subtitle": {"text": "Time series with 95% confidence interval", "style": {"fontSize": "38px", "color": "#666666"}},
     "xAxis": {
-        "title": {"text": "Time", "style": {"fontSize": "48px"}, "margin": 20},
-        "labels": {"style": {"fontSize": "36px"}},
-        "gridLineWidth": 1,
-        "gridLineColor": "rgba(0, 0, 0, 0.1)",
-        "gridLineDashStyle": "Dash",
-        "tickInterval": 1,
+        "title": {"text": "Forecast Day", "style": {"fontSize": "36px", "fontFamily": font_family}, "margin": 20},
+        "labels": {"style": {"fontSize": "28px", "fontFamily": font_family}},
+        "gridLineWidth": 0,
+        "tickInterval": 5,
+        "lineColor": "#cccccc",
+        "tickColor": "#cccccc",
     },
     "yAxis": {
-        "title": {"text": "Value", "style": {"fontSize": "48px"}, "margin": 20},
-        "labels": {"style": {"fontSize": "36px"}},
+        "title": {
+            "text": "Temperature (\u00b0C)",
+            "style": {"fontSize": "36px", "fontFamily": font_family},
+            "margin": 20,
+        },
+        "labels": {"format": "{value}\u00b0", "style": {"fontSize": "28px", "fontFamily": font_family}},
         "gridLineWidth": 1,
-        "gridLineColor": "rgba(0, 0, 0, 0.1)",
-        "gridLineDashStyle": "Dash",
+        "gridLineColor": "rgba(0, 0, 0, 0.08)",
+        "gridLineDashStyle": "Dot",
+        "lineColor": "#cccccc",
+        "lineWidth": 1,
     },
     "legend": {
         "enabled": True,
         "align": "right",
         "verticalAlign": "top",
         "layout": "vertical",
-        "x": -50,
-        "y": 100,
-        "itemStyle": {"fontSize": "36px"},
+        "x": -40,
+        "y": 80,
+        "itemStyle": {"fontSize": "28px", "fontFamily": font_family},
     },
     "plotOptions": {
-        "arearange": {"fillOpacity": 0.3, "lineWidth": 0, "marker": {"enabled": False}},
-        "line": {"lineWidth": 6, "marker": {"enabled": False}},
+        "arearange": {"fillOpacity": 0.25, "lineWidth": 0, "marker": {"enabled": False}},
+        "line": {"lineWidth": 5, "marker": {"enabled": False}},
     },
     "series": [
         {
-            "name": "95% Confidence Interval",
+            "name": "95% Prediction Interval",
             "type": "arearange",
             "data": band_data,
             "color": "#306998",
-            "fillOpacity": 0.3,
+            "fillOpacity": 0.25,
             "zIndex": 0,
         },
-        {"name": "Mean Value", "type": "line", "data": line_data, "color": "#FFD43B", "lineWidth": 6, "zIndex": 1},
+        {"name": "Forecast", "type": "line", "data": line_data, "color": "#FFD43B", "lineWidth": 5, "zIndex": 1},
     ],
+    "credits": {"enabled": False},
 }
 
-# Download Highcharts JS and highcharts-more (needed for arearange)
-highcharts_url = "https://code.highcharts.com/highcharts.js"
-highcharts_more_url = "https://code.highcharts.com/highcharts-more.js"
-
-with urllib.request.urlopen(highcharts_url, timeout=30) as response:
-    highcharts_js = response.read().decode("utf-8")
-with urllib.request.urlopen(highcharts_more_url, timeout=30) as response:
-    highcharts_more_js = response.read().decode("utf-8")
+# Download Highcharts JS files (jsDelivr CDN with version pin)
+cdn_base = "https://cdn.jsdelivr.net/npm/highcharts@11.4"
+js_urls = {"highcharts": f"{cdn_base}/highcharts.js", "highcharts_more": f"{cdn_base}/highcharts-more.js"}
+js_modules = {}
+for name, url in js_urls.items():
+    req = urllib.request.Request(url, headers={"User-Agent": "Mozilla/5.0"})
+    with urllib.request.urlopen(req, timeout=30) as response:
+        js_modules[name] = response.read().decode("utf-8")
 
 # Generate HTML with inline scripts
 chart_options_json = json.dumps(chart_options)
 html_content = f"""<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
-    <script>{highcharts_js}</script>
-    <script>{highcharts_more_js}</script>
+    <script>{js_modules["highcharts"]}</script>
+    <script>{js_modules["highcharts_more"]}</script>
 </head>
 <body style="margin:0;">
     <div id="container" style="width: 4800px; height: 2700px;"></div>
@@ -120,33 +138,28 @@
     f.write(html_content)
     temp_path = f.name
 
-# Also save the HTML for interactive viewing
+# Save HTML for interactive viewing
 with open("plot.html", "w", encoding="utf-8") as f:
     f.write(html_content)
 
 # Take screenshot with headless Chrome
 chrome_options = Options()
-chrome_options.add_argument("--headless=new")
+chrome_options.add_argument("--headless")
 chrome_options.add_argument("--no-sandbox")
 chrome_options.add_argument("--disable-dev-shm-usage")
 chrome_options.add_argument("--disable-gpu")
-chrome_options.add_argument("--force-device-scale-factor=1")
+chrome_options.add_argument("--window-size=4800,2900")
 
 driver = webdriver.Chrome(options=chrome_options)
-driver.set_window_size(4900, 2900)
 driver.get(f"file://{temp_path}")
 time.sleep(5)
-
-# Take screenshot
 driver.save_screenshot("plot_raw.png")
 driver.quit()
 
-# Crop/resize to exact 4800x2700 using PIL
+# Crop to exact 4800x2700 dimensions
 img = Image.open("plot_raw.png")
-final_img = Image.new("RGB", (4800, 2700), (255, 255, 255))
-final_img.paste(img.crop((0, 0, min(img.width, 4800), min(img.height, 2700))), (0, 0))
-final_img.save("plot.png")
-
-# Clean up
+img_cropped = img.crop((0, 0, 4800, 2700))
+img_cropped.save("plot.png")
 Path("plot_raw.png").unlink()
+
 Path(temp_path).unlink()

plots/band-basic/metadata/highcharts.yaml

@@ -1,16 +1,16 @@
 library: highcharts
 specification_id: band-basic
 created: '2025-12-23T09:09:27Z'
-updated: '2025-12-23T09:11:45Z'
-generated_by: claude-opus-4-5-20251101
+updated: '2026-02-23T13:41:00Z'
+generated_by: claude-opus-4-6
 workflow_run: 20456388074
 issue: 0
-python_version: 3.13.11
-library_version: unknown
+python_version: '3.14'
+library_version: 1.10.3
 preview_url: https://storage.googleapis.com/pyplots-images/plots/band-basic/highcharts/plot.png
 preview_thumb: https://storage.googleapis.com/pyplots-images/plots/band-basic/highcharts/plot_thumb.png
 preview_html: https://storage.googleapis.com/pyplots-images/plots/band-basic/highcharts/plot.html
-quality_score: 92
+quality_score: null
 impl_tags:
   dependencies:
   - pillow

plots/band-basic/specification.md

@@ -16,7 +16,7 @@ A band plot displays a filled region between two boundary lines, commonly used t
 - `x` (numeric) - Independent variable, often representing time or sequence
 - `y_lower` (numeric) - Lower boundary values defining the bottom of the band
 - `y_upper` (numeric) - Upper boundary values defining the top of the band
-- `y_center` (numeric, optional) - Central trend line values (mean/median)
+- `y_center` (numeric) - Central trend line values (mean/median), shown as a contrasting line
 - Size: 20-200 data points
 - Example: Time series with 95% confidence interval bounds
 

plots/band-basic/specification.yaml

@@ -6,7 +6,7 @@ title: Basic Band Plot
 
 # Specification tracking
 created: 2025-12-15T20:42:54Z
-updated: 2025-12-15T20:42:54Z
+updated: 2026-02-23T12:00:00Z
 issue: 979
 suggested: MarkusNeusinger
 
@@ -18,10 +18,14 @@ tags:
   data_type:
     - numeric
     - continuous
+    - timeseries
   domain:
     - statistics
     - science
+    - general
+    - engineering
   features:
     - basic
     - confidence-interval
     - uncertainty
+    - 2d