D3 Marks V2 - Visual Comparison Test

This file compares what V2 marks SHOULD render (reference) vs what they ACTUALLY render.

Test 1: Multi-Mark Composition (The "Single Dot" Bug Fix)

Expected Rendering (Described)

• Blue semi-transparent area from baseline to forecast line (all 3 points)
• Red stroke line connecting the 3 actual data points
• Red filled circles (r=6) at each of the 3 actual data points
• X-axis: Temporal scale showing dates (2024-01-01, 2024-01-08, 2024-01-15)
• Y-axis: Quantitative scale from ~850 to ~1320

Actual Rendering (V2 System)

View Source

engine: d3
data:
  source: |
    [
      {"date": "2024-01-01", "forecast": 1200, "actual": 850},
      {"date": "2024-01-08", "forecast": 1260, "actual": 1120},
      {"date": "2024-01-15", "forecast": 1320, "actual": 1050}
    ]
marks:
  - type: area
    x: date
    y: forecast
    fill: "#4e79a7"
    opacity: 0.2
  - type: line
    x: date
    y: actual
    stroke: "#e15759"
    strokeWidth: 3
  - type: dot
    x: date
    y: actual
    fill: "#e15759"
    r: 6
title: "Multi-Mark Test - V2 System"
width: 700
height: 400

Expected: Blue area + red line + red dots, ALL marks visible Bug if: Only shows a single dot at top-left corner

---

Test 2: Simple Scatter (Dots Only)

Expected Rendering

• 5 blue circles (r=5) at positions: (10,20), (15,25), (20,15), (25,30), (30,22)
• X-axis: Quantitative scale 10-30
• Y-axis: Quantitative scale 15-30

Actual Rendering

View Source

engine: d3
data:
  source: |
    x,y
    10,20
    15,25
    20,15
    25,30
    30,22
marks:
  - type: dot
    x: x
    y: y
    fill: "#4e79a7"
    r: 5
title: "Scatter Plot - V2 DotMark"
width: 600
height: 400

Expected: 5 visible blue dots Bug if: Empty chart or single dot

---

Test 3: Line with Curve Interpolation

Expected Rendering

• Green smooth curve (catmull-rom interpolation) connecting 6 points
• X-axis: Band scale showing months (Jan, Feb, Mar, Apr, May, Jun)
• Y-axis: Quantitative scale 42-55

Actual Rendering

View Source

engine: d3
data:
  source: |
    month,sales
    Jan,42
    Feb,45
    Mar,48
    Apr,52
    May,49
    Jun,55
marks:
  - type: line
    x: month
    y: sales
    stroke: "#10b981"
    strokeWidth: 2
    curve: catmull-rom
title: "Line Chart - V2 LineMark with Curve"
width: 700
height: 400

Expected: Smooth green curve through all 6 points Bug if: Empty chart or straight line

---

Test 4: Line + Dots Combination

Expected Rendering

• Blue stroke line connecting 4 points
• Blue filled circles (r=6) at each of the 4 points
• X-axis: Quantitative scale 1-4
• Y-axis: Quantitative scale 10-25

Actual Rendering

View Source

engine: d3
data:
  source: |
    [
      {"x": 1, "y": 10},
      {"x": 2, "y": 20},
      {"x": 3, "y": 15},
      {"x": 4, "y": 25}
    ]
marks:
  - type: line
    x: x
    y: y
    stroke: "#3b82f6"
    strokeWidth: 2
  - type: dot
    x: x
    y: y
    fill: "#3b82f6"
    r: 6
title: "Line + Dots - V2 Multi-Mark"
width: 600
height: 400

Expected: Blue line AND blue dots, both visible Bug if: Only dots or only line, or just single dot

---

Debugging Checklist

When charts don't render correctly:

1. Check console for errors - V2 system logs to console
2. Verify engine: d3 - V2 only works with D3 engine
3. Verify marks array exists - Should have at least one mark
4. Check mark types - Only dot, line, area, bar are implemented
5. Verify data loaded - Check if data is present and valid
6. Check scale inference - Scales should be detected automatically
7. Verify V2 integration - MarkRenderer should be invoked in chart-renderer.ts

Known Limitations

V2 system currently does NOT support:

• Auxiliary marks: rule, text, frame, tick, link, arrow
• Hybrid mode (V1 base chart + V2 overlays)
• These features are planned but not yet implemented

Use these examples ONLY - they test what we actually built.