Complete D3 Multi-Mark Examples

This file demonstrates the full power of D3 multi-mark rendering, combining different mark types to create sophisticated visualizations.

Line + Area (Range with Trend)

View Source

data:
  source: |
    [
      {"date": "2024-01-01", "actual": 100, "low": 80, "high": 120},
      {"date": "2024-01-02", "actual": 150, "low": 130, "high": 170},
      {"date": "2024-01-03", "actual": 120, "low": 100, "high": 140},
      {"date": "2024-01-04", "actual": 180, "low": 160, "high": 200}
    ]
engine: d3
marks:
  - type: area
    x: date
    y: high
    y1: 0
    fill: lightblue
    fillOpacity: 0.3
  - type: line
    x: date
    y: actual
    stroke: steelblue
    strokeWidth: 2
  - type: dot
    x: date
    y: actual
    fill: steelblue
    radius: 4
title: "Temperature Range with Actual Values"
xLabel: "Date"
yLabel: "Temperature (°F)"

Bar + Line (Actuals vs Target)

View Source

data:
  source: |
    [
      {"month": "Jan", "actual": 120, "target": 100},
      {"month": "Feb", "actual": 150, "target": 120},
      {"month": "Mar", "actual": 90, "target": 110},
      {"month": "Apr", "actual": 180, "target": 150}
    ]
engine: d3
marks:
  - type: bar
    x: month
    y: actual
    fill: steelblue
  - type: line
    x: month
    y: target
    stroke: red
    strokeWidth: 2
    strokeDasharray: "5,5"
  - type: dot
    x: month
    y: target
    fill: red
    radius: 5
title: "Sales Performance vs Target"
xLabel: "Month"
yLabel: "Sales ($K)"

Dot + Line + Area (Complete Time Series)

View Source

data:
  source: |
    [
      {"x": 1, "y": 10},
      {"x": 2, "y": 20},
      {"x": 3, "y": 15},
      {"x": 4, "y": 25},
      {"x": 5, "y": 18}
    ]
engine: d3
marks:
  - type: area
    x: x
    y: y
    y1: 0
    fill: lightgreen
    fillOpacity: 0.2
  - type: line
    x: x
    y: y
    stroke: green
    strokeWidth: 2
    curve: catmull-rom
  - type: dot
    x: x
    y: y
    fill: darkgreen
    radius: 6
    outline: true
    stroke: white
    strokeWidth: 2
title: "Smooth Trend with Highlighted Points"

Multi-Series Lines (Observable Plot Style)

View Source

data:
  source: |
    [
      {"date": "2024-01-01", "series": "A", "value": 100},
      {"date": "2024-01-02", "series": "A", "value": 150},
      {"date": "2024-01-03", "series": "A", "value": 120},
      {"date": "2024-01-01", "series": "B", "value": 80},
      {"date": "2024-01-02", "series": "B", "value": 130},
      {"date": "2024-01-03", "series": "B", "value": 160}
    ]
engine: d3
marks:
  - type: line
    x: date
    y: value
    series: series
    strokeWidth: 2
  - type: dot
    x: date
    y: value
    series: series
    radius: 4
title: "Multi-Series Comparison"
xLabel: "Date"
yLabel: "Value"

Layered Areas (Stacked Visual Effect)

View Source

data:
  source: |
    [
      {"x": 1, "baseline": 10, "mid": 20, "top": 30},
      {"x": 2, "baseline": 15, "mid": 25, "top": 35},
      {"x": 3, "baseline": 12, "mid": 22, "top": 32},
      {"x": 4, "baseline": 18, "mid": 28, "top": 38}
    ]
engine: d3
marks:
  - type: area
    x: x
    y: top
    y1: 0
    fill: "#e6f2ff"
    fillOpacity: 0.6
  - type: area
    x: x
    y: mid
    y1: 0
    fill: "#99ccff"
    fillOpacity: 0.6
  - type: area
    x: x
    y: baseline
    y1: 0
    fill: "#3399ff"
    fillOpacity: 0.6
title: "Layered Ranges"

Reference Lines with Data

View Source

data:
  source: |
    [
      {"x": 1, "y": 10},
      {"x": 2, "y": 20},
      {"x": 3, "y": 15},
      {"x": 4, "y": 25}
    ]
engine: d3
marks:
  - type: rule
    y: 18
    stroke: red
    strokeWidth: 2
    strokeDasharray: "5,5"
  - type: bar
    x: x
    y: y
    fill: steelblue
  - type: text
    x: 1
    y: 19
    text: "Target: 18"
    fill: red
    fontSize: 12
title: "Bar Chart with Target Line"

Smooth Curve Comparison

View Source

data:
  source: |
    [
      {"x": 0, "linear": 0, "smooth": 0},
      {"x": 1, "linear": 5, "smooth": 2},
      {"x": 2, "linear": 3, "smooth": 8},
      {"x": 3, "linear": 8, "smooth": 7},
      {"x": 4, "linear": 6, "smooth": 10},
      {"x": 5, "linear": 10, "smooth": 9}
    ]
engine: d3
marks:
  - type: line
    x: x
    y: linear
    stroke: blue
    strokeWidth: 2
    curve: linear
  - type: line
    x: x
    y: smooth
    stroke: green
    strokeWidth: 2
    curve: catmull-rom
  - type: dot
    x: x
    y: linear
    fill: blue
    radius: 4
  - type: dot
    x: x
    y: smooth
    fill: green
    radius: 4
title: "Linear vs Smooth Interpolation"

Confidence Interval

View Source

data:
  source: |
    [
      {"x": 1, "mean": 100, "lower": 90, "upper": 110},
      {"x": 2, "mean": 150, "lower": 135, "upper": 165},
      {"x": 3, "mean": 120, "lower": 105, "upper": 135},
      {"x": 4, "mean": 180, "lower": 165, "upper": 195}
    ]
engine: d3
marks:
  - type: area
    x: x
    y2: upper
    y1: 90
    fill: lightgray
    fillOpacity: 0.3
  - type: line
    x: x
    y: mean
    stroke: black
    strokeWidth: 3
  - type: dot
    x: x
    y: mean
    fill: black
    radius: 5
    outline: true
    stroke: white
    strokeWidth: 2
title: "Mean with Confidence Interval"

Complex Dashboard Panel

View Source

data:
  source: |
    [
      {"date": "2024-01-01", "actual": 100, "forecast": 105, "min": 85, "max": 115},
      {"date": "2024-01-02", "actual": 150, "forecast": 145, "min": 130, "max": 160},
      {"date": "2024-01-03", "actual": 120, "forecast": 125, "min": 110, "max": 140},
      {"date": "2024-01-04", "actual": 180, "forecast": 175, "min": 165, "max": 195}
    ]
engine: d3
marks:
  - type: area
    x: date
    y: max
    y1: 0
    fill: "#e3f2fd"
    fillOpacity: 0.3
  - type: line
    x: date
    y: forecast
    stroke: orange
    strokeWidth: 2
    strokeDasharray: "3,3"
  - type: line
    x: date
    y: actual
    stroke: "#1976d2"
    strokeWidth: 3
  - type: dot
    x: date
    y: actual
    fill: "#1976d2"
    radius: 6
    outline: true
    stroke: white
    strokeWidth: 2
  - type: rule
    y: 150
    stroke: green
    strokeWidth: 1
    strokeDasharray: "5,5"
title: "Forecast vs Actual with Target"
xLabel: "Date"
yLabel: "Value"