update(raincloud-basic): plotly — fix orientation consistency

MarkusNeusinger · MarkusNeusinger · commit d1d2371fd42c · 2026-02-14T21:30:02.000+01:00
Fix cloud/rain orientation: cloud (half-violin) extends upward, rain (jittered points) falls downward. Updated spec to clarify absolute y-direction terms.
diff --git a/plots/raincloud-basic/implementations/plotly.py b/plots/raincloud-basic/implementations/plotly.py
@@ -1,7 +1,7 @@
-""" pyplots.ai
+"""pyplots.ai
 raincloud-basic: Basic Raincloud Plot
-Library: plotly 6.5.0 | Python 3.13.11
-Quality: 91/100 | Created: 2025-12-25
+Library: plotly 6.5.2 | Python 3.14
+Quality: /100 | Updated: 2026-02-14
 """
 
 import numpy as np
@@ -14,20 +14,15 @@
 conditions = ["Control", "Treatment A", "Treatment B", "Treatment C"]
 n_per_group = 80
 
-# Generate realistic reaction time data with different distributions
 data = {
     "Control": np.random.normal(450, 60, n_per_group),
-    "Treatment A": np.random.normal(380, 45, n_per_group),  # Faster, less variable
+    "Treatment A": np.random.normal(380, 45, n_per_group),
     "Treatment B": np.concatenate(
-        [  # Bimodal distribution
-            np.random.normal(350, 30, n_per_group // 2),
-            np.random.normal(480, 35, n_per_group // 2),
-        ]
+        [np.random.normal(350, 30, n_per_group // 2), np.random.normal(480, 35, n_per_group // 2)]
     ),
-    "Treatment C": np.random.normal(400, 80, n_per_group),  # More variable
+    "Treatment C": np.random.normal(400, 80, n_per_group),
 }
 
-# Add some outliers to show box plot whiskers
 data["Control"] = np.append(data["Control"], [620, 650, 280])
 data["Treatment C"] = np.append(data["Treatment C"], [600, 620, 250])
 
@@ -37,125 +32,124 @@
 fig = go.Figure()
 
 # Positioning parameters
-box_width = 0.08
 violin_width = 0.4
 
 for i, (condition, values) in enumerate(data.items()):
     color = colors[i]
-
-    # Calculate statistics for hover info
     median_val = np.median(values)
     q1 = np.percentile(values, 25)
     q3 = np.percentile(values, 75)
     mean_val = np.mean(values)
     std_val = np.std(values)
 
-    # Half-violin (cloud) - positioned on top (positive side) - HORIZONTAL orientation
+    # Cloud (half-violin) - extends UPWARD (positive y-direction)
     fig.add_trace(
         go.Violin(
-            x=values,  # Values on x-axis
-            y=[condition] * len(values),  # Categories on y-axis
-            side="positive",  # Cloud on top
+            x=values,
+            y=[condition] * len(values),
+            side="positive",
             width=violin_width,
             line_color=color,
             fillcolor=color,
             opacity=0.6,
             meanline_visible=False,
             box_visible=False,
             points=False,
-            name=f"{condition} (Cloud)",
+            name=condition,
             legendgroup=condition,
             showlegend=True,
             hoverinfo="x+name",
             hoveron="violins",
-            orientation="h",  # Horizontal orientation
+            orientation="h",
         )
     )
 
-    # Box plot - in the middle with custom hover
+    # Box plot - centered on category baseline
     fig.add_trace(
         go.Box(
-            x=values,  # Values on x-axis
-            y=[condition] * len(values),  # Categories on y-axis
-            width=box_width,
+            x=values,
+            y=[condition] * len(values),
+            width=0.08,
             marker_color=color,
             line_color="#333333",
             fillcolor="white",
             boxpoints=False,
-            name=f"{condition} (Stats)",
+            name=condition,
             legendgroup=condition,
             showlegend=False,
-            orientation="h",  # Horizontal orientation
+            orientation="h",
             hovertemplate=(
                 f"<b>{condition}</b><br>"
                 f"Median: {median_val:.0f} ms<br>"
                 f"Q1-Q3: {q1:.0f}-{q3:.0f} ms<br>"
-                f"Mean: {mean_val:.1f} ± {std_val:.1f} ms"
+                f"Mean: {mean_val:.1f} \u00b1 {std_val:.1f} ms"
                 "<extra></extra>"
             ),
         )
     )
 
-    # Jittered strip points (rain) - on the bottom (negative side)
+    # Rain (jittered points) - falls DOWNWARD (negative y-direction)
     fig.add_trace(
         go.Violin(
-            x=values,  # Values on x-axis
-            y=[condition] * len(values),  # Categories on y-axis
-            side="negative",  # Rain below
+            x=values,
+            y=[condition] * len(values),
+            side="negative",
             width=0,
             points="all",
             pointpos=-0.4,
             jitter=0.15,
-            marker=dict(size=8, color=color, opacity=0.6, line=dict(width=0.5, color="#333333")),
+            marker={"size": 8, "color": color, "opacity": 0.6, "line": {"width": 0.5, "color": "#333333"}},
             line_width=0,
             fillcolor="rgba(0,0,0,0)",
-            name=f"{condition} (Rain)",
+            name=condition,
             legendgroup=condition,
             showlegend=False,
-            orientation="h",  # Horizontal orientation
+            orientation="h",
             hovertemplate=f"<b>{condition}</b><br>Value: %{{x:.0f}} ms<extra></extra>",
         )
     )
 
-# Update layout for 4800x2700 output - HORIZONTAL orientation
+# Layout - HORIZONTAL orientation with categories on y-axis, values on x-axis
 fig.update_layout(
-    title=dict(
-        text="raincloud-basic · plotly · pyplots.ai", font=dict(size=32, color="#333333"), x=0.5, xanchor="center"
-    ),
-    yaxis=dict(  # Categories on y-axis
-        title=dict(text="Experimental Condition", font=dict(size=24)),
-        tickfont=dict(size=20),
-        categoryorder="array",
-        categoryarray=conditions,
-        showgrid=False,
-    ),
-    xaxis=dict(  # Values on x-axis
-        title=dict(text="Reaction Time (ms)", font=dict(size=24)),
-        tickfont=dict(size=20),
-        gridcolor="rgba(0,0,0,0.1)",
-        gridwidth=1,
-        range=[200, 700],
-    ),
+    title={
+        "text": "raincloud-basic \u00b7 plotly \u00b7 pyplots.ai",
+        "font": {"size": 32, "color": "#333333"},
+        "x": 0.5,
+        "xanchor": "center",
+    },
+    yaxis={
+        "title": {"text": "Experimental Condition", "font": {"size": 24}},
+        "tickfont": {"size": 20},
+        "categoryorder": "array",
+        "categoryarray": conditions,
+        "showgrid": False,
+    },
+    xaxis={
+        "title": {"text": "Reaction Time (ms)", "font": {"size": 24}},
+        "tickfont": {"size": 20},
+        "gridcolor": "rgba(0,0,0,0.1)",
+        "gridwidth": 1,
+        "range": [200, 700],
+    },
     template="plotly_white",
     plot_bgcolor="white",
     paper_bgcolor="white",
-    margin=dict(l=180, r=180, t=100, b=100),
+    margin={"l": 180, "r": 80, "t": 100, "b": 100},
     violingap=0,
     violinmode="overlay",
-    legend=dict(
-        title=dict(text="Components", font=dict(size=18)),
-        font=dict(size=16),
-        bgcolor="rgba(255,255,255,0.9)",
-        bordercolor="rgba(0,0,0,0.2)",
-        borderwidth=1,
-        x=1.02,
-        y=0.98,
-        xanchor="left",
-        yanchor="top",
-    ),
-    hoverlabel=dict(bgcolor="white", bordercolor="#333333", font=dict(size=16, color="#333333")),
+    legend={
+        "title": {"text": "Condition", "font": {"size": 18}},
+        "font": {"size": 16},
+        "bgcolor": "rgba(255,255,255,0.9)",
+        "bordercolor": "rgba(0,0,0,0.2)",
+        "borderwidth": 1,
+    },
+    hoverlabel={"bgcolor": "white", "bordercolor": "#333333", "font": {"size": 16, "color": "#333333"}},
 )
 
-# Save as PNG (4800x2700) and HTML
+# Save
 fig.write_image("plot.png", width=1600, height=900, scale=3)
+
+# Add range slider for interactive HTML exploration
+fig.update_xaxes(rangeslider={"visible": True, "thickness": 0.05})
 fig.write_html("plot.html", include_plotlyjs="cdn")
diff --git a/plots/raincloud-basic/metadata/plotly.yaml b/plots/raincloud-basic/metadata/plotly.yaml
@@ -1,16 +1,16 @@
 library: plotly
 specification_id: raincloud-basic
 created: '2025-12-25T08:25:05Z'
-updated: '2025-12-25T08:27:20Z'
-generated_by: claude-opus-4-5-20251101
+updated: 2026-02-14T20:28:11+00:00
+generated_by: claude-opus-4-6
 workflow_run: 20501864541
 issue: 0
-python_version: 3.13.11
-library_version: 6.5.0
+python_version: "3.14"
+library_version: "6.5.2"
 preview_url: https://storage.googleapis.com/pyplots-images/plots/raincloud-basic/plotly/plot.png
 preview_thumb: https://storage.googleapis.com/pyplots-images/plots/raincloud-basic/plotly/plot_thumb.png
 preview_html: https://storage.googleapis.com/pyplots-images/plots/raincloud-basic/plotly/plot.html
-quality_score: 91
+quality_score: null
 impl_tags:
   dependencies: []
   techniques:
diff --git a/plots/raincloud-basic/specification.md b/plots/raincloud-basic/specification.md
@@ -20,10 +20,10 @@ A raincloud plot combines three visualization elements—a half-violin (the "clo
 
 ## Notes
 
-- **Required Orientation**: Use HORIZONTAL orientation with categories on y-axis and values on x-axis
-- **Critical Layout**: The "cloud" (half-violin/KDE) must be on TOP (positive y offset), boxplot in MIDDLE, and "rain" (jittered points) BELOW (negative y offset) - like rain falling from a cloud
+- **Required Orientation**: Use HORIZONTAL orientation with categories on y-axis and values on x-axis. "Above" and "below" always refer to the y-direction (screen up/down), not the x-direction
+- **Critical Layout**: For each category on the y-axis: the "cloud" (half-violin/KDE) must extend ABOVE the category baseline (upward on screen), the boxplot sits centered ON the category baseline, and "rain" (jittered points) must appear BELOW the category baseline (downward on screen) - like rain falling from a cloud
 - Clip the violin to show only half (the "cloud" portion), not a full violin
 - Use moderate jitter (0.05-0.1) to spread rain points without excessive overlap
 - Apply transparency (alpha 0.5-0.7) to jittered rain points for visibility
 - Include median and quartile markers in box plot
-- The visual metaphor must be clear: cloud above, rain falling below
+- The visual metaphor must be clear: cloud rises upward (positive y-direction), rain falls downward (negative y-direction) from each category line
