DevOps Monitoring - D3 Charts

D3 engine versions of DevOps monitoring visualizations. These examples demonstrate the D3 chart types and marks-only mode for infrastructure, deployment, and system health metrics.

Container Resource Usage

Monitor CPU consumption across pods using marks-only mode with line and dot marks.

View Source

type: marks-only
engine: d3
title: Container CPU Usage
width: 700
height: 350
xLabel: timestamp
yLabel: cpu_cores
marks:
  - type: line
    x: timestamp
    y: cpu_cores
    color: pod
    strokeWidth: 2
  - type: dot
    x: timestamp
    y: cpu_cores
    color: pod
    r: 5
data:
  source: |
    [
      {"pod": "api-server-1", "timestamp": "00:00", "cpu_cores": 1.2},
      {"pod": "api-server-1", "timestamp": "04:00", "cpu_cores": 0.8},
      {"pod": "api-server-1", "timestamp": "08:00", "cpu_cores": 1.8},
      {"pod": "api-server-1", "timestamp": "12:00", "cpu_cores": 2.1},
      {"pod": "api-server-1", "timestamp": "16:00", "cpu_cores": 2.4},
      {"pod": "api-server-1", "timestamp": "20:00", "cpu_cores": 1.9},
      {"pod": "worker-1", "timestamp": "00:00", "cpu_cores": 0.5},
      {"pod": "worker-1", "timestamp": "04:00", "cpu_cores": 0.4},
      {"pod": "worker-1", "timestamp": "08:00", "cpu_cores": 0.9},
      {"pod": "worker-1", "timestamp": "12:00", "cpu_cores": 1.1},
      {"pod": "worker-1", "timestamp": "16:00", "cpu_cores": 1.3},
      {"pod": "worker-1", "timestamp": "20:00", "cpu_cores": 0.8},
      {"pod": "cache-1", "timestamp": "00:00", "cpu_cores": 0.3},
      {"pod": "cache-1", "timestamp": "04:00", "cpu_cores": 0.2},
      {"pod": "cache-1", "timestamp": "08:00", "cpu_cores": 0.4},
      {"pod": "cache-1", "timestamp": "12:00", "cpu_cores": 0.5},
      {"pod": "cache-1", "timestamp": "16:00", "cpu_cores": 0.6},
      {"pod": "cache-1", "timestamp": "20:00", "cpu_cores": 0.4}
    ]

Application Response Time

Track response time percentiles with area bands and line overlays.

View Source

type: marks-only
engine: d3
title: Response Time Percentiles (ms)
width: 700
height: 350
xLabel: hour
yLabel: latency (ms)
marks:
  - type: area
    x: hour
    y: p95
    fill: steelblue
    fillOpacity: 0.2
  - type: line
    x: hour
    y: p50
    stroke: steelblue
    strokeWidth: 2
  - type: line
    x: hour
    y: p95
    stroke: coral
    strokeWidth: 2
  - type: dot
    x: hour
    y: p99
    fill: red
    r: 4
data:
  source: |
    [
      {"hour": 0, "p50": 12, "p75": 18, "p90": 28, "p95": 45, "p99": 120},
      {"hour": 2, "p50": 10, "p75": 16, "p90": 24, "p95": 38, "p99": 105},
      {"hour": 4, "p50": 11, "p75": 16, "p90": 25, "p95": 40, "p99": 108},
      {"hour": 6, "p50": 15, "p75": 22, "p90": 35, "p95": 55, "p99": 142},
      {"hour": 8, "p50": 22, "p75": 32, "p90": 52, "p95": 82, "p99": 195},
      {"hour": 10, "p50": 28, "p75": 40, "p90": 65, "p95": 102, "p99": 238},
      {"hour": 12, "p50": 30, "p75": 43, "p90": 70, "p95": 110, "p99": 255}
    ]

Deployment Success Rate

Compare deployments across environments using a grouped bar chart.

View Source

type: bar
engine: d3
title: Daily Deployments by Environment
width: 650
height: 350
x: date
y: deployments
color: environment
colorScheme: schemeTableau10
data:
  source: |
    [
      {"date": "Jan 1", "environment": "dev", "deployments": 25},
      {"date": "Jan 2", "environment": "dev", "deployments": 28},
      {"date": "Jan 3", "environment": "dev", "deployments": 30},
      {"date": "Jan 4", "environment": "dev", "deployments": 27},
      {"date": "Jan 5", "environment": "dev", "deployments": 32},
      {"date": "Jan 1", "environment": "staging", "deployments": 12},
      {"date": "Jan 2", "environment": "staging", "deployments": 14},
      {"date": "Jan 3", "environment": "staging", "deployments": 13},
      {"date": "Jan 4", "environment": "staging", "deployments": 15},
      {"date": "Jan 5", "environment": "staging", "deployments": 16},
      {"date": "Jan 1", "environment": "prod", "deployments": 5},
      {"date": "Jan 2", "environment": "prod", "deployments": 6},
      {"date": "Jan 3", "environment": "prod", "deployments": 4},
      {"date": "Jan 4", "environment": "prod", "deployments": 7},
      {"date": "Jan 5", "environment": "prod", "deployments": 5}
    ]

Infrastructure Cost Breakdown

Stacked area chart showing cloud spending by service category.

View Source

type: marks-only
engine: d3
title: Monthly Cloud Costs by Service
width: 700
height: 400
xLabel: month
yLabel: cost (USD)
marks:
  - type: area
    x: month
    y: cost_usd
    color: service
    fillOpacity: 0.6
  - type: line
    x: month
    y: cost_usd
    color: service
    strokeWidth: 2
data:
  source: |
    [
      {"month": "Jan", "service": "Compute", "cost_usd": 12500},
      {"month": "Feb", "service": "Compute", "cost_usd": 13200},
      {"month": "Mar", "service": "Compute", "cost_usd": 14100},
      {"month": "Apr", "service": "Compute", "cost_usd": 13800},
      {"month": "May", "service": "Compute", "cost_usd": 14500},
      {"month": "Jan", "service": "Storage", "cost_usd": 4200},
      {"month": "Feb", "service": "Storage", "cost_usd": 4500},
      {"month": "Mar", "service": "Storage", "cost_usd": 4800},
      {"month": "Apr", "service": "Storage", "cost_usd": 5100},
      {"month": "May", "service": "Storage", "cost_usd": 5400},
      {"month": "Jan", "service": "Network", "cost_usd": 2800},
      {"month": "Feb", "service": "Network", "cost_usd": 3100},
      {"month": "Mar", "service": "Network", "cost_usd": 3400},
      {"month": "Apr", "service": "Network", "cost_usd": 3200},
      {"month": "May", "service": "Network", "cost_usd": 3600},
      {"month": "Jan", "service": "Database", "cost_usd": 5600},
      {"month": "Feb", "service": "Database", "cost_usd": 5900},
      {"month": "Mar", "service": "Database", "cost_usd": 6200},
      {"month": "Apr", "service": "Database", "cost_usd": 6400},
      {"month": "May", "service": "Database", "cost_usd": 6700}
    ]

Alert Volume Heatmap

Visualize alert patterns using D3 heatmap chart type.

View Source

type: heatmap
engine: d3
title: Weekly Alert Volume by Severity
width: 600
height: 300
xLabel: Day
yLabel: Severity
colorScheme: RdYlBu
reverseColors: true
data:
  source: |
    [
      {"x": "Monday", "y": "critical", "value": 8},
      {"x": "Monday", "y": "warning", "value": 32},
      {"x": "Monday", "y": "info", "value": 85},
      {"x": "Tuesday", "y": "critical", "value": 5},
      {"x": "Tuesday", "y": "warning", "value": 28},
      {"x": "Tuesday", "y": "info", "value": 78},
      {"x": "Wednesday", "y": "critical", "value": 12},
      {"x": "Wednesday", "y": "warning", "value": 45},
      {"x": "Wednesday", "y": "info", "value": 92},
      {"x": "Thursday", "y": "critical", "value": 6},
      {"x": "Thursday", "y": "warning", "value": 35},
      {"x": "Thursday", "y": "info", "value": 88},
      {"x": "Friday", "y": "critical", "value": 15},
      {"x": "Friday", "y": "warning", "value": 52},
      {"x": "Friday", "y": "info", "value": 105}
    ]

Network Traffic by Zone

Multi-series line chart comparing ingress traffic across availability zones.

View Source

type: line
engine: d3
title: Network Ingress by Zone (Gbps)
width: 650
height: 350
x: hour
y: ingress_gbps
color: zone
colorScheme: schemeCategory10
data:
  source: |
    [
      {"zone": "us-east-1a", "hour": 0, "ingress_gbps": 12.5},
      {"zone": "us-east-1a", "hour": 6, "ingress_gbps": 18.3},
      {"zone": "us-east-1a", "hour": 12, "ingress_gbps": 25.7},
      {"zone": "us-east-1a", "hour": 18, "ingress_gbps": 22.1},
      {"zone": "us-east-1b", "hour": 0, "ingress_gbps": 10.8},
      {"zone": "us-east-1b", "hour": 6, "ingress_gbps": 15.6},
      {"zone": "us-east-1b", "hour": 12, "ingress_gbps": 21.9},
      {"zone": "us-east-1b", "hour": 18, "ingress_gbps": 18.8},
      {"zone": "us-west-2a", "hour": 0, "ingress_gbps": 8.4},
      {"zone": "us-west-2a", "hour": 6, "ingress_gbps": 12.2},
      {"zone": "us-west-2a", "hour": 12, "ingress_gbps": 17.3},
      {"zone": "us-west-2a", "hour": 18, "ingress_gbps": 14.9}
    ]

Build Pipeline Duration

Horizontal bar chart showing CI/CD stage timings with status colors.

View Source

type: bar
engine: d3
title: Build Pipeline Stage Duration
width: 650
height: 350
x: duration_sec
y: stage
color: status
colorScheme: schemeSet2
data:
  source: |
    [
      {"build": "1", "stage": "checkout", "duration_sec": 15, "status": "success"},
      {"build": "1", "stage": "install", "duration_sec": 180, "status": "success"},
      {"build": "1", "stage": "lint", "duration_sec": 45, "status": "success"},
      {"build": "1", "stage": "test", "duration_sec": 320, "status": "success"},
      {"build": "1", "stage": "build", "duration_sec": 280, "status": "success"},
      {"build": "1", "stage": "deploy", "duration_sec": 150, "status": "success"}
    ]

Database Performance

Combined line and scatter visualization for query metrics.

View Source

type: marks-only
engine: d3
title: Database Query Performance
width: 700
height: 350
xLabel: time
yLabel: query time (ms)
marks:
  - type: area
    x: time
    y: query_time_ms
    fill: steelblue
    fillOpacity: 0.2
  - type: line
    x: time
    y: query_time_ms
    stroke: steelblue
    strokeWidth: 2
  - type: dot
    x: time
    y: query_time_ms
    fill: steelblue
    r: 4
data:
  source: |
    [
      {"time": "00:00", "query_time_ms": 12, "active_connections": 45, "slow_queries": 2},
      {"time": "04:00", "query_time_ms": 9, "active_connections": 32, "slow_queries": 0},
      {"time": "08:00", "query_time_ms": 15, "active_connections": 68, "slow_queries": 5},
      {"time": "12:00", "query_time_ms": 22, "active_connections": 98, "slow_queries": 12},
      {"time": "16:00", "query_time_ms": 28, "active_connections": 112, "slow_queries": 18},
      {"time": "20:00", "query_time_ms": 19, "active_connections": 72, "slow_queries": 9}
    ]

Incident Response Timeline

Gantt chart showing incident detection to resolution timelines.

View Source

type: gantt
engine: d3
title: Incident Response Timeline
width: 750
height: 400
task: task
start: detected_min
end: resolved_min
color: severity
colorScheme: schemeSet1
data:
  source: |
    [
      {"task": "INC-001", "detected_min": 0, "resolved_min": 45, "severity": "critical"},
      {"task": "INC-002", "detected_min": 0, "resolved_min": 28, "severity": "high"},
      {"task": "INC-003", "detected_min": 0, "resolved_min": 95, "severity": "medium"},
      {"task": "INC-004", "detected_min": 0, "resolved_min": 18, "severity": "critical"},
      {"task": "INC-005", "detected_min": 0, "resolved_min": 62, "severity": "high"},
      {"task": "INC-006", "detected_min": 0, "resolved_min": 120, "severity": "low"},
      {"task": "INC-007", "detected_min": 0, "resolved_min": 35, "severity": "high"},
      {"task": "INC-008", "detected_min": 0, "resolved_min": 52, "severity": "medium"}
    ]

Log Volume Trends

Multi-line chart tracking log volume by severity level.

View Source

type: marks-only
engine: d3
title: Log Volume by Severity
width: 700
height: 350
xLabel: hour
yLabel: count
marks:
  - type: line
    x: timestamp
    y: error
    stroke: "#e41a1c"
    strokeWidth: 2
  - type: line
    x: timestamp
    y: warning
    stroke: "#ff7f00"
    strokeWidth: 2
  - type: area
    x: timestamp
    y: info
    fill: "#377eb8"
    fillOpacity: 0.3
  - type: dot
    x: timestamp
    y: error
    fill: "#e41a1c"
    r: 4
data:
  source: |
    [
      {"timestamp": "00:00", "error": 15, "warning": 120, "info": 8500},
      {"timestamp": "02:00", "error": 8, "warning": 75, "info": 6500},
      {"timestamp": "04:00", "error": 9, "warning": 80, "info": 6200},
      {"timestamp": "06:00", "error": 25, "warning": 185, "info": 11500},
      {"timestamp": "08:00", "error": 42, "warning": 320, "info": 18500},
      {"timestamp": "10:00", "error": 55, "warning": 425, "info": 23500},
      {"timestamp": "12:00", "error": 58, "warning": 450, "info": 25000}
    ]

Auto-scaling Events

Track cluster scaling with node count and CPU utilization.

View Source

type: marks-only
engine: d3
title: Cluster Auto-scaling
width: 700
height: 380
xLabel: time
yLabel: nodes / CPU %
marks:
  - type: area
    x: time
    y: cpu_avg
    fill: steelblue
    fillOpacity: 0.3
  - type: line
    x: time
    y: nodes
    stroke: purple
    strokeWidth: 3
  - type: dot
    x: time
    y: nodes
    fill: action
    r: 8
data:
  source: |
    [
      {"time": "06:00", "nodes": 5, "cpu_avg": 25, "action": "stable"},
      {"time": "07:00", "nodes": 5, "cpu_avg": 38, "action": "stable"},
      {"time": "08:00", "nodes": 7, "cpu_avg": 52, "action": "scale_up"},
      {"time": "09:00", "nodes": 8, "cpu_avg": 65, "action": "scale_up"},
      {"time": "10:00", "nodes": 10, "cpu_avg": 78, "action": "scale_up"},
      {"time": "11:00", "nodes": 10, "cpu_avg": 82, "action": "stable"},
      {"time": "12:00", "nodes": 12, "cpu_avg": 88, "action": "scale_up"},
      {"time": "14:00", "nodes": 12, "cpu_avg": 80, "action": "stable"},
      {"time": "15:00", "nodes": 10, "cpu_avg": 68, "action": "scale_down"},
      {"time": "16:00", "nodes": 8, "cpu_avg": 55, "action": "scale_down"},
      {"time": "17:00", "nodes": 7, "cpu_avg": 48, "action": "scale_down"}
    ]

D3 vs Plot Comparison

Feature	D3 Engine	Plot Engine
Chart types	34 specialized types	Mark-based composition
Marks-only mode	Supported	Native
Grid lines	Automatic with arrows	Manual configuration
Interactivity	Built-in tooltips	Crosshair + tip
Color schemes	D3 schemes	D3 schemes
Best for	Specialized charts (Sankey, Treemap, etc.)	Statistical marks

Plot DevOps Monitoring - Original Plot version
D3 Framework Examples - All D3 chart types
Sankey Flows - Flow visualizations

DevOps Monitoring - D3 Charts ​

Container Resource Usage ​

Application Response Time ​

Deployment Success Rate ​

Infrastructure Cost Breakdown ​

Alert Volume Heatmap ​

Network Traffic by Zone ​

Build Pipeline Duration ​

Database Performance ​

Incident Response Timeline ​

Log Volume Trends ​

Auto-scaling Events ​

D3 vs Plot Comparison ​

Related Examples ​

DevOps Monitoring - D3 Charts

Container Resource Usage

Application Response Time

Deployment Success Rate

Infrastructure Cost Breakdown

Alert Volume Heatmap

Network Traffic by Zone

Build Pipeline Duration

Database Performance

Incident Response Timeline

Log Volume Trends

Auto-scaling Events

D3 vs Plot Comparison

Related Examples