feat(highcharts): implement mosaic-categorical

[github-actions]

Implementation: mosaic-categorical - highcharts

Implements the highcharts version of mosaic-categorical.

File: plots/mosaic-categorical/implementations/highcharts.py

Parent Issue: #3650

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a treemap-style mosaic visualization of Titanic survival data by passenger class. The chart uses a stripes layout algorithm creating horizontal divisions for each class (Crew, Third, First, Second from top to bottom). Each class section is subdivided into "Survived" (Python Blue #306998) and "Died" (Python Yellow #FFD43B) rectangles. The Crew and Third class sections are the largest, showing the highest passenger counts. Within each class, the proportions clearly show survival rates - First class has more survivors than deaths, while Crew and Third class have significantly more deaths than survivors. The title reads "Titanic Survival by Class · mosaic-categorical · highcharts · pyplots.ai" with a subtitle explaining the area proportionality and color legend. Labels are displayed on each rectangle showing the class name and survival status. White borders separate the rectangles for clarity.

Quality Score: 88/100

Criteria Checklist

Visual Quality (35/40)

• VQ-01: Text Legibility (8/10) - Title and labels are readable but could be larger relative to the high-resolution canvas
• VQ-02: No Overlap (8/8) - No overlapping text elements, all labels clearly visible
• VQ-03: Element Visibility (8/8) - Rectangles are well-sized and clearly visible with good proportions
• VQ-04: Color Accessibility (5/5) - Uses Python Blue and Yellow, which is colorblind-safe (no red-green conflict)
• VQ-05: Layout Balance (4/5) - Good use of canvas but there's unused white space at the bottom
• VQ-06: Axis Labels (0/2) - N/A for mosaic/treemap plots - no axes present
• VQ-07: Grid & Legend (2/2) - Inline legend in subtitle is well-integrated

Spec Compliance (22/25)

• SC-01: Plot Type (7/8) - Uses treemap as mosaic approximation; not a true statsmodels mosaic but effectively shows contingency table relationships
• SC-02: Data Mapping (5/5) - Categories correctly mapped (Class as rows, Survival as columns within)
• SC-03: Required Features (4/5) - Shows proportional areas, color coding, gap spacing; missing explicit residual/deviation coloring mentioned in spec
• SC-04: Data Range (3/3) - All data categories visible
• SC-05: Legend Accuracy (2/2) - Legend correctly identifies Survived/Died colors
• SC-06: Title Format (1/2) - Has spec-id, library, pyplots.ai but includes extra descriptive text

Data Quality (18/20)

• DQ-01: Feature Coverage (7/8) - Shows variation across classes with different survival rates; demonstrates association between variables well
• DQ-02: Realistic Context (7/7) - Titanic survival data is a classic, well-known contingency table example
• DQ-03: Appropriate Scale (4/5) - Counts are realistic based on historical Titanic data patterns

Code Quality (9/10)

• CQ-01: KISS Structure (3/3) - Linear flow: imports → data → plot → save
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - All imports are used
• CQ-04: No Deprecated API (1/1) - Uses current Highcharts API
• CQ-05: Output Correct (0/1) - Saves plot.png correctly but also creates plot_raw.png intermediary

Library Features (4/5)

• LF-01: Uses distinctive library features (4/5) - Uses Highcharts treemap with stripes algorithm, level-based styling, HTML subtitle with inline legend; good but could leverage more interactive features

Strengths

• Excellent use of Highcharts treemap with stripes layout algorithm to approximate mosaic plot behavior
• Classic Titanic dataset provides immediately recognizable and meaningful context
• Colorblind-safe color palette (blue/yellow)
• Clear hierarchical structure with class labels at top level and survival status within
• Inline legend in subtitle is elegant and space-efficient
• White borders provide clear visual separation between categories

Weaknesses

• Not a true mosaic plot (spec suggests statsmodels.graphics.mosaicplot); treemap is a reasonable approximation but widths represent total counts rather than marginal proportions
• Some white space at bottom of canvas could be better utilized
• Title font size could be larger for the 4800x2700 canvas
• Title format includes descriptive text before the required format

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 mosaic/treemap visualization of Titanic survival data by passenger class. The chart uses a "stripes" layout algorithm creating horizontal rectangular sections. Four passenger classes are shown: Crew (largest, top), Third (second largest), First, and Second (smallest, bottom). Each class section is subdivided into "Survived" (Python Blue #306998) and "Died" (Python Yellow #FFD43B) rectangles. The title "mosaic-categorical · highcharts · pyplots.ai" appears at the top in bold. A subtitle provides context: "Titanic Survival by Passenger Class · Rectangle area proportional to count" with a color legend showing blue square for Survived and yellow square for Died. All text labels are clearly readable with white text outlines for contrast. The plot fills the canvas well with balanced margins.

Quality Score: 91/100

Criteria Checklist

Visual Quality (37/40 pts)

• VQ-01: Text Legibility (10/10) - Title at 72px, subtitle at 42px, data labels at 32-48px, all perfectly readable with text outlines for contrast
• VQ-02: No Overlap (8/8) - No overlapping text elements, all labels clearly positioned within their rectangles
• VQ-03: Element Visibility (7/8) - Rectangles well-sized, but some smaller sections (Second class) have proportionally less visual weight
• VQ-04: Color Accessibility (5/5) - Blue (#306998) and Yellow (#FFD43B) are colorblind-safe, good contrast
• VQ-05: Layout Balance (5/5) - Plot fills approximately 90% of canvas, excellent use of space with proper margins
• VQ-06: Axis Labels (0/2) - N/A for treemap visualization (no axes), but subtitle provides context
• VQ-07: Grid & Legend (2/2) - Inline legend in subtitle is clean and effective, white borders between sections work well

Spec Compliance (23/25 pts)

• SC-01: Plot Type (7/8) - Uses treemap as mosaic approximation; rectangles show proportional areas correctly, though traditional mosaic plots have a more specific layout
• SC-02: Data Mapping (5/5) - Class as primary category (rows), Survival as secondary (colors within), counts as area
• SC-03: Required Features (5/5) - Shows categorical association, rectangle areas proportional to frequency, color coding for survival status
• SC-04: Data Range (3/3) - All four classes and both survival outcomes visible
• SC-05: Legend Accuracy (2/2) - Subtitle legend accurately describes Survived (blue) and Died (yellow)
• SC-06: Title Format (1/2) - Correct format but extra descriptive text in subtitle (acceptable but not pure spec format)

Data Quality (19/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows variation across classes (First had high survival, Third/Crew had low survival), demonstrates association patterns
• DQ-02: Realistic Context (7/7) - Classic Titanic dataset, well-known neutral historical example
• DQ-03: Appropriate Scale (5/5) - Counts are realistic (203, 122, 118, 167, 178, 528, 212, 673) matching historical patterns

Code Quality (8/10 pts)

• CQ-01: KISS Structure (2/3) - Generally follows linear structure but has more complexity for treemap/selenium workflow
• CQ-02: Reproducibility (3/3) - np.random.seed(42) set (though data is hardcoded, seed is present)
• CQ-03: Clean Imports (2/2) - All imports are used
• CQ-04: No Deprecated API (1/1) - Uses current Highcharts API
• CQ-05: Output Correct (0/1) - Saves as plot.png correctly after cropping

Library Features (4/5 pts)

• LF-01: Distinctive Features (4/5) - Uses Highcharts treemap with stripes layout, hierarchical data structure, level-specific styling, interactive HTML export

Strengths

• Excellent use of treemap as mosaic approximation with "stripes" layout algorithm
• Outstanding text legibility with appropriate font sizes and text outlines
• Perfect colorblind-safe color scheme (blue/yellow)
• Effective inline legend in subtitle avoids chart clutter
• Realistic Titanic dataset demonstrates categorical association patterns clearly
• Good canvas utilization (~90% filled)
• Hierarchical data structure properly represents class → survival breakdown

Weaknesses

• Traditional mosaic plots have a specific layout where widths represent marginal proportions and heights represent conditional proportions; treemap is an approximation
• The subtitle has extra descriptive text beyond the pure spec format requirement

Verdict: APPROVED