feat(highcharts): implement raincloud-basic (#1939)

## Implementation: `raincloud-basic` - highcharts

Implements the **highcharts** version of `raincloud-basic`.

**File:** `plots/raincloud-basic/implementations/highcharts.py`

---
:robot: *[impl-generate
workflow](https://github.com/MarkusNeusinger/pyplots/actions/runs/20500987365)*

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

plots/raincloud-basic/implementations/highcharts.py

@@ -1,7 +1,7 @@
 """ pyplots.ai
 raincloud-basic: Basic Raincloud Plot
 Library: highcharts unknown | Python 3.13.11
-Quality: 91/100 | Created: 2025-12-24
+Quality: 78/100 | Created: 2025-12-25
 """
 
 import json
@@ -19,6 +19,8 @@
 np.random.seed(42)
 categories = ["Control", "Treatment A", "Treatment B", "Treatment C"]
 colors = ["#306998", "#FFD43B", "#9467BD", "#17BECF"]
+# Fill colors for box plots with good visibility (increased opacity)
+box_fill_colors = ["rgba(48,105,152,0.7)", "rgba(255,212,59,0.7)", "rgba(148,103,189,0.7)", "rgba(23,190,207,0.7)"]
 
 # Generate realistic reaction time data with different distributions
 control = np.random.normal(450, 60, 80)  # Normal distribution
@@ -52,14 +54,15 @@
         }
     )
 
-# Create jittered scatter data (the "rain")
+# Create jittered scatter data (the "rain" - falls LEFT of the cloud for vertical orientation)
 scatter_data = []
 for i, data in enumerate(all_data):
     for val in data:
         jitter = np.random.uniform(-0.08, 0.08)
-        scatter_data.append({"x": i + 0.25 + jitter, "y": float(val), "color": colors[i]})
+        # Rain on LEFT side (negative offset from category center)
+        scatter_data.append({"x": i - 0.25 + jitter, "y": float(val), "color": colors[i]})
 
-# Box plot series data
+# Box plot series data with semi-transparent fill and dark borders
 box_series_data = []
 for i, box in enumerate(box_data):
     box_series_data.append(
@@ -69,12 +72,13 @@
             "median": box["median"],
             "q3": box["q3"],
             "high": box["high"],
-            "color": colors[i],
-            "fillColor": f"rgba({int(colors[i][1:3], 16)}, {int(colors[i][3:5], 16)}, {int(colors[i][5:7], 16)}, 0.6)",
+            "color": "#1a1a1a",  # Dark border for visibility
+            "fillColor": box_fill_colors[i],
         }
     )
 
 # Create polygon data for half-violin (the "cloud") - inline KDE
+# Cloud on RIGHT side for vertical orientation (rain falls from cloud, so cloud is RIGHT/TOP)
 violin_polygons = []
 for i, data in enumerate(all_data):
     # Inline KDE computation (Gaussian kernel)
@@ -90,13 +94,14 @@
     density = density / (n * bandwidth * np.sqrt(2 * np.pi))
     density = density / density.max() * 0.35
 
-    # Create polygon points for filled half-violin (close the polygon)
+    # Create polygon points for filled half-violin on RIGHT side (close the polygon)
     polygon_points = []
+    # Right side: baseline at category, extend RIGHT (positive direction)
     for y, d in zip(y_range, density, strict=True):
-        polygon_points.append([float(i - d - 0.05), float(y)])
+        polygon_points.append([float(i + d + 0.05), float(y)])
     # Close polygon by going back along the baseline
     for y in reversed(y_range):
-        polygon_points.append([float(i - 0.05), float(y)])
+        polygon_points.append([float(i + 0.05), float(y)])
     # Close the polygon
     polygon_points.append(polygon_points[0])
     violin_polygons.append({"points": polygon_points, "color": colors[i]})
@@ -117,6 +122,7 @@
             enableMouseTracking: false,
             showInLegend: {show_legend},
             {linked}
+            legendSymbol: 'areaMarker',
             marker: {{ enabled: false }}
         }}""")
 
@@ -128,7 +134,7 @@
         backgroundColor: '#ffffff',
         marginBottom: 280,
         marginLeft: 220,
-        marginRight: 350,
+        marginRight: 200,
         spacingBottom: 80
     }},
     title: {{
@@ -158,33 +164,42 @@
         labels: {{
             style: {{ fontSize: '36px' }}
         }},
-        gridLineWidth: 1,
-        gridLineDashStyle: 'Dash',
-        min: 200,
-        max: 660
+        gridLineWidth: 2,
+        gridLineColor: 'rgba(0, 0, 0, 0.35)',
+        gridLineDashStyle: 'Solid',
+        tickInterval: 50,
+        min: 250,
+        max: 650
     }},
     legend: {{
         enabled: true,
-        itemStyle: {{ fontSize: '32px' }},
+        itemStyle: {{ fontSize: '36px' }},
         align: 'right',
         verticalAlign: 'top',
         layout: 'vertical',
         x: -50,
-        y: 100
+        y: 100,
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        borderWidth: 1,
+        borderColor: '#cccccc',
+        padding: 20
     }},
     plotOptions: {{
         boxplot: {{
-            medianColor: '#1a1a1a',
-            medianWidth: 6,
+            medianColor: '#000000',
+            medianWidth: 8,
+            medianDashStyle: 'Solid',
+            stemColor: '#1a1a1a',
             stemWidth: 4,
-            whiskerWidth: 4,
-            whiskerLength: '40%',
-            lineWidth: 3,
-            pointWidth: 60
+            whiskerColor: '#1a1a1a',
+            whiskerWidth: 5,
+            whiskerLength: '50%',
+            lineWidth: 4,
+            pointWidth: 70
         }},
         scatter: {{
             marker: {{
-                radius: 10,
+                radius: 18,
                 symbol: 'circle'
             }}
         }},
@@ -196,10 +211,13 @@
     series: [
         {",".join(polygon_series_js)},
         {{
-            name: 'Box Plot',
+            name: 'Box Plot (Q1-Q3)',
             type: 'boxplot',
             data: {json.dumps(box_series_data)},
             colorByPoint: true,
+            showInLegend: true,
+            legendSymbol: 'rectangle',
+            color: '#1a1a1a',
             tooltip: {{
                 headerFormat: '<b>{{point.key}}</b><br/>',
                 pointFormat: 'Max: {{point.high:.0f}} ms<br/>Q3: {{point.q3:.0f}} ms<br/>Median: {{point.median:.0f}} ms<br/>Q1: {{point.q1:.0f}} ms<br/>Min: {{point.low:.0f}} ms'
@@ -210,11 +228,11 @@
             type: 'scatter',
             data: {json.dumps(scatter_data)},
             marker: {{
-                radius: 8,
-                lineWidth: 1,
-                lineColor: 'rgba(0,0,0,0.3)'
+                radius: 16,
+                lineWidth: 2,
+                lineColor: 'rgba(0,0,0,0.4)'
             }},
-            opacity: 0.6,
+            opacity: 0.65,
             tooltip: {{
                 pointFormat: 'Value: {{point.y:.0f}} ms'
             }}

plots/raincloud-basic/metadata/highcharts.yaml

@@ -1,29 +1,26 @@
 library: highcharts
 specification_id: raincloud-basic
-created: '2025-12-24T22:25:07Z'
-updated: '2025-12-24T22:41:38Z'
+created: '2025-12-25T07:14:56Z'
+updated: '2025-12-25T07:35:23Z'
 generated_by: claude-opus-4-5-20251101
-workflow_run: 20494684277
+workflow_run: 20500987365
 issue: 0
 python_version: 3.13.11
 library_version: unknown
 preview_url: https://storage.googleapis.com/pyplots-images/plots/raincloud-basic/highcharts/plot.png
 preview_thumb: https://storage.googleapis.com/pyplots-images/plots/raincloud-basic/highcharts/plot_thumb.png
 preview_html: https://storage.googleapis.com/pyplots-images/plots/raincloud-basic/highcharts/plot.html
-quality_score: 91
+quality_score: 78
 review:
   strengths:
-  - Excellent implementation of all three raincloud components (cloud, rain, box plot)
-    positioned correctly relative to each other
-  - Creative use of Highcharts polygon series to create smooth half-violin density
-    curves with inline KDE calculation
-  - Bimodal distribution in Treatment B effectively demonstrates the visualization
-    power to reveal hidden distribution characteristics
-  - Colorblind-safe color palette with good visual distinction between groups
-  - Proper whisker calculation using IQR method for box plots
+  - Excellent implementation of the raincloud metaphor with cloud (half-violin) on
+    right, boxplot centered, and rain (jittered points) on left
+  - Good use of bimodal distribution for Treatment B demonstrating feature coverage
+  - Colorblind-safe palette with good color contrast between categories
+  - Clean KISS code structure with inline KDE computation
+  - Proper use of Highcharts polygon series for density clouds
   weaknesses:
-  - Legend placement in top-right creates slight layout imbalance; could be positioned
-    closer to the plot area
-  - Box plot fill colors use rgba calculation that could be simplified
-  - Individual points marker size could be slightly larger for better visibility at
-    this canvas scale
+  - Box plot fill colors are too light/transparent making Q1-Q3 boxes difficult to
+    distinguish from background
+  - Legend shows wrong symbol for Box Plot - displays circle instead of rectangle
+  - Grid lines are slightly too prominent (alpha 0.35) should be more subtle