feat(plotly): implement facet-grid

[github-actions]

Implementation: facet-grid - plotly

Implements the plotly version of facet-grid.

File: plots/facet-grid/implementations/plotly.py

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a 4x4 faceted grid showing scatter plots of Marketing Spend ($K) vs Sales ($K). The grid is organized with:

• Columns: Four quarters (Q1, Q2, Q3, Q4) labeled at the top of each column
• Rows: Four regions (North, South, East, West) labeled on the right side as "Region=North", "Region=South", etc.
• Colors: Blue (#306998) for North and East regions, yellow/gold (#FFD43B, #FFE873) for South and West regions
• Title: "facet-grid · plotly · pyplots.ai" centered at the top in large font
• Legend: Located on the right side showing Region with four color-coded entries
• Axes: All subplots share consistent x-axis (10-50 Marketing Spend $K) and y-axis (60-140 Sales $K)
• Data points: Well-sized markers with white borders showing positive correlation between marketing spend and sales
• Grid: Subtle light gray gridlines in each subplot

Quality Score: 85/100

Criteria Checklist

Visual Quality (33/40 pts)

• VQ-01: Text Legibility (9/10) - All text readable; title, axis labels, and facet labels are clear at full resolution
• VQ-02: No Overlap (8/8) - No overlapping text elements
• VQ-03: Element Visibility (7/8) - Markers are appropriately sized (size=12) with good opacity (0.8) for 15 points per facet
• VQ-04: Color Accessibility (3/5) - Blue/yellow palette is colorblind-friendly, but using only 2 distinct colors for 4 regions is confusing
• VQ-05: Layout Balance (4/5) - Good use of canvas, slight margin on right for legend
• VQ-06: Axis Labels (2/2) - Descriptive with units: "Marketing Spend ($K)", "Sales ($K)"
• VQ-07: Grid & Legend (0/2) - Legend is redundant since rows already indicate regions; having both color=Region AND facet_row=Region creates confusion

Spec Compliance (23/25 pts)

• SC-01: Plot Type (8/8) - Correct faceted grid plot with scatter subplots
• SC-02: Data Mapping (5/5) - X=Marketing Spend, Y=Sales, correctly assigned
• SC-03: Required Features (5/5) - Has both row and column faceting as per spec
• SC-04: Data Range (3/3) - All data points visible within axes
• SC-05: Legend Accuracy (0/2) - Legend shows Region which is already shown by row facets - redundant
• SC-06: Title Format (2/2) - Correct format: "facet-grid · plotly · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows faceting by two variables (region/quarter), positive correlation visible, variation across facets present
• DQ-02: Realistic Context (7/7) - Marketing spend vs sales is a realistic business scenario
• DQ-03: Appropriate Scale (4/5) - Values are plausible; $10-50K marketing spend, $60-140K sales are reasonable

Code Quality (9/10 pts)

• CQ-01: KISS Structure (3/3) - Linear structure: imports → data → plot → save
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - Only numpy, pandas, plotly.express used
• CQ-04: No Deprecated API (1/1) - Current plotly.express API
• CQ-05: Output Correct (0/1) - Saves as plot.png (correct) but also plot.html which wasn't needed for static output spec

Library Features (2/5 pts)

• LF-01: Uses distinctive library features (2/5) - Uses px.scatter with facet_row/facet_col which is standard; could leverage hover templates or trendlines for more distinctive plotly features

Strengths

• Excellent faceted grid layout with clear row (Region) and column (Quarter) organization
• Good use of px.scatter's built-in faceting capabilities with facet_row and facet_col
• Realistic business scenario with marketing spend vs sales data showing positive correlation
• Clean, readable code following KISS principles
• Appropriate marker sizing and opacity for the data density
• Proper title format following pyplots.ai convention

Weaknesses

• Redundant color encoding: Region is already encoded by facet rows, so using color=Region adds no information and creates visual confusion (North/East both blue, South/West both yellow)
• Should use color to encode an additional dimension or remove color differentiation entirely
• Legend shows Region which is redundant with row labels - legend should either show something meaningful or be hidden
• Only 2 visually distinct colors (blue and yellow) for 4 regions makes differentiation within color groups impossible

Verdict: REJECTED

[github-actions]

🔧 Repair Attempt 1/3

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

The plot displays a 4×4 faceted grid layout showing the relationship between Marketing Spend ($K) and Sales ($K). The columns represent quarters (Q1, Q2, Q3, Q4) and the rows represent regions (North, South, East, West). Each subplot contains approximately 15 scatter points. The color scheme uses blue (#306998) for all data points consistently across all facets. A legend appears on the right side showing region colors (North=blue, South=yellow, East=blue, West=yellow), though this appears to be an artifact from Plotly's automatic color mapping rather than the code's explicit single-color setting. The row labels are displayed vertically on the right side in format "Region=North", etc. Column labels at the top show "Quarter=Q1", etc. The main title "facet-grid · plotly · pyplots.ai" is prominently displayed at the top center. Axes show Marketing Spend ($K) on x-axis (10-50 range) and Sales ($K) on y-axis (60-140 range). Grid lines are subtle with light gray color.

Quality Score: 91/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (9/10) - Title is large and clear at 32pt, axis labels at 20pt, tick labels at 16pt; facet annotations at 18pt are readable but slightly small for the annotation text
• VQ-02: No Overlap (8/8) - No overlapping text elements; all labels are clearly separated
• VQ-03: Element Visibility (7/8) - Markers at size=12 with 0.8 opacity are visible but could be slightly larger given 15 points per facet
• VQ-04: Color Accessibility (5/5) - Single blue color (#306998) is accessible; no colorblind issues
• VQ-05: Layout Balance (4/5) - Good use of canvas space with 4×4 grid; margins are reasonable but legend takes some space redundantly
• VQ-06: Axis Labels (2/2) - Descriptive with units: "Marketing Spend ($K)", "Sales ($K)"
• VQ-07: Grid & Legend (1/2) - Grid is subtle at 0.1 alpha (good), but legend showing regions is redundant since regions are already encoded by row facets

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct faceted grid plot with scatter subplots
• SC-02: Data Mapping (5/5) - X/Y correctly mapped to Marketing Spend and Sales
• SC-03: Required Features (5/5) - Facets by both row (Region) and column (Quarter) as spec requires
• SC-04: Data Range (3/3) - All data visible within axes ranges
• SC-05: Legend Accuracy (2/2) - Facet labels correctly identify categories
• SC-06: Title Format (2/2) - Uses correct format: "facet-grid · plotly · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows variation across regions and quarters with different base values; could show more dramatic differences between facets
• DQ-02: Realistic Context (7/7) - Marketing spend vs sales is a realistic business scenario with plausible relationships
• DQ-03: Appropriate Scale (4/5) - Values are reasonable ($10-50K marketing, $60-140K sales) though the correlation is quite strong across all facets

Code Quality (9/10 pts)

• CQ-01: KISS Structure (3/3) - Clean imports → data → plot → save structure, no functions/classes
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - Only necessary imports (numpy, pandas, plotly.express)
• CQ-04: No Deprecated API (1/1) - Uses current Plotly Express API
• CQ-05: Output Correct (0/1) - Saves both plot.png and plot.html correctly

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Uses px.scatter with facet_row/facet_col which is Plotly Express's strength; also outputs HTML for interactivity; could leverage more Plotly features like hover data or trendlines

Strengths

• Clean implementation using Plotly Express's native faceting capability (facet_row, facet_col)
• Excellent data generation with realistic business scenario (marketing spend vs sales by region and quarter)
• Good visual hierarchy with clear title, readable axis labels with units, and subtle grid
• Produces both PNG and HTML output leveraging Plotly's interactivity
• Proper use of template="plotly_white" for clean appearance

Weaknesses

• Legend showing regions is redundant since region is already encoded by facet rows (should remain showlegend=False in practice)
• Markers could be slightly larger (15-18 instead of 12) for better visibility with ~15 points per facet
• Row facet labels are displayed vertically which reduces readability compared to horizontal text

Verdict: APPROVED