DevOps Monitoring Visualizations

This example demonstrates various Plot marks to visualize DevOps metrics, infrastructure monitoring, deployment tracking, and system health using the dg-plot handle.

Dataset

The example dataset contains 50+ data points covering:

Container and pod resource usage
Application response times and error rates
Build and deployment pipeline metrics
Infrastructure costs and capacity
Alert volumes and incident tracking
Network traffic and latency patterns

Container Resource Usage

Monitor CPU and memory consumption across pods:

View Source

data:
  source: |
    [
      {"pod": "api-server-1", "timestamp": "00:00", "cpu_cores": 1.2, "memory_gb": 2.8, "requests": 450, "namespace": "production"},
      {"pod": "api-server-1", "timestamp": "04:00", "cpu_cores": 0.8, "memory_gb": 2.5, "requests": 320, "namespace": "production"},
      {"pod": "api-server-1", "timestamp": "08:00", "cpu_cores": 1.8, "memory_gb": 3.2, "requests": 680, "namespace": "production"},
      {"pod": "api-server-1", "timestamp": "12:00", "cpu_cores": 2.1, "memory_gb": 3.5, "requests": 820, "namespace": "production"},
      {"pod": "api-server-1", "timestamp": "16:00", "cpu_cores": 2.4, "memory_gb": 3.8, "requests": 950, "namespace": "production"},
      {"pod": "api-server-1", "timestamp": "20:00", "cpu_cores": 1.9, "memory_gb": 3.3, "requests": 720, "namespace": "production"},
      {"pod": "worker-1", "timestamp": "00:00", "cpu_cores": 0.5, "memory_gb": 1.2, "requests": 120, "namespace": "production"},
      {"pod": "worker-1", "timestamp": "04:00", "cpu_cores": 0.4, "memory_gb": 1.1, "requests": 95, "namespace": "production"},
      {"pod": "worker-1", "timestamp": "08:00", "cpu_cores": 0.9, "memory_gb": 1.5, "requests": 210, "namespace": "production"},
      {"pod": "worker-1", "timestamp": "12:00", "cpu_cores": 1.1, "memory_gb": 1.8, "requests": 280, "namespace": "production"},
      {"pod": "worker-1", "timestamp": "16:00", "cpu_cores": 1.3, "memory_gb": 2.0, "requests": 340, "namespace": "production"},
      {"pod": "worker-1", "timestamp": "20:00", "cpu_cores": 0.8, "memory_gb": 1.6, "requests": 190, "namespace": "production"},
      {"pod": "cache-1", "timestamp": "00:00", "cpu_cores": 0.3, "memory_gb": 4.2, "requests": 850, "namespace": "production"},
      {"pod": "cache-1", "timestamp": "04:00", "cpu_cores": 0.2, "memory_gb": 4.0, "requests": 720, "namespace": "production"},
      {"pod": "cache-1", "timestamp": "08:00", "cpu_cores": 0.4, "memory_gb": 4.5, "requests": 1100, "namespace": "production"},
      {"pod": "cache-1", "timestamp": "12:00", "cpu_cores": 0.5, "memory_gb": 4.8, "requests": 1350, "namespace": "production"},
      {"pod": "cache-1", "timestamp": "16:00", "cpu_cores": 0.6, "memory_gb": 5.1, "requests": 1520, "namespace": "production"},
      {"pod": "cache-1", "timestamp": "20:00", "cpu_cores": 0.4, "memory_gb": 4.6, "requests": 1180, "namespace": "production"}
    ]
engine: plot
marks:
  - type: line
    configuration:
	    x: timestamp
	    y: cpu_cores
	    stroke: pod
	    strokeWidth: 2
  - type: area
    configuration:
	    x: timestamp
	    y: memory_gb
	    fill: pod
	    fillOpacity: 0.2
  - type: dot
    configuration:
	    x: timestamp
	    y: cpu_cores
	    r: 4
	    fill: pod
  - type: crosshair
    configuration:
	    x: timestamp
	    y: cpu_cores
	    stroke: pod
	    opacity: 0.5
	    tip: true
grid: true
scales:
  color:
    legend: true
    scheme: category10

Application Response Time Distribution

Track response times across different percentiles:

View Source

data:
  source: |
    [
      {"hour": 0, "p50": 12, "p75": 18, "p90": 28, "p95": 45, "p99": 120, "errors": 5},
      {"hour": 1, "p50": 11, "p75": 17, "p90": 26, "p95": 42, "p99": 115, "errors": 3},
      {"hour": 2, "p50": 10, "p75": 16, "p90": 24, "p95": 38, "p99": 105, "errors": 2},
      {"hour": 3, "p50": 10, "p75": 15, "p90": 23, "p95": 36, "p99": 98, "errors": 1},
      {"hour": 4, "p50": 11, "p75": 16, "p90": 25, "p95": 40, "p99": 108, "errors": 2},
      {"hour": 5, "p50": 13, "p75": 19, "p90": 30, "p95": 48, "p99": 125, "errors": 4},
      {"hour": 6, "p50": 15, "p75": 22, "p90": 35, "p95": 55, "p99": 142, "errors": 8},
      {"hour": 7, "p50": 18, "p75": 26, "p90": 42, "p95": 68, "p99": 165, "errors": 12},
      {"hour": 8, "p50": 22, "p75": 32, "p90": 52, "p95": 82, "p99": 195, "errors": 18},
      {"hour": 9, "p50": 25, "p75": 36, "p90": 58, "p95": 92, "p99": 215, "errors": 22},
      {"hour": 10, "p50": 28, "p75": 40, "p90": 65, "p95": 102, "p99": 238, "errors": 28},
      {"hour": 11, "p50": 30, "p75": 43, "p90": 70, "p95": 110, "p99": 255, "errors": 32}
    ]
engine: plot
marks:
  - type: area
    configuration:
	    x: hour
	    y1: p50
	    y2: p95
	    fill: steelblue
	    fillOpacity: 0.3
  - type: line
    configuration:
	    x: hour
	    y: p50
	    stroke: steelblue
	    strokeWidth: 2
  - type: line
    configuration:
	    x: hour
	    y: p95
	    stroke: coral
	    strokeWidth: 2
	    strokeDasharray: [4, 4]
  - type: dot
    configuration:
	    x: hour
	    y: p99
	    fill: red
	    r: 3
  - type: rule
    configuration:
	    x: hour
	    y1: p75
	    y2: p90
	    stroke: gray
	    strokeWidth: 1
	    strokeOpacity: 0.5
  - type: text
    configuration:
	    x: hour
	    y: errors
	    text: errors
	    fontSize: 8
	    dy: -5
grid: true

Deployment Success Rate

Track deployment outcomes across environments:

View Source

data:
  source: |
    [
      {"date": "2024-01-01", "environment": "dev", "deployments": 25, "success": 24, "duration_min": 8, "rollbacks": 1},
      {"date": "2024-01-02", "environment": "dev", "deployments": 28, "success": 27, "duration_min": 9, "rollbacks": 1},
      {"date": "2024-01-03", "environment": "dev", "deployments": 30, "success": 29, "duration_min": 7, "rollbacks": 1},
      {"date": "2024-01-04", "environment": "dev", "deployments": 27, "success": 26, "duration_min": 8, "rollbacks": 1},
      {"date": "2024-01-05", "environment": "dev", "deployments": 32, "success": 31, "duration_min": 10, "rollbacks": 1},
      {"date": "2024-01-01", "environment": "staging", "deployments": 12, "success": 11, "duration_min": 15, "rollbacks": 1},
      {"date": "2024-01-02", "environment": "staging", "deployments": 14, "success": 13, "duration_min": 16, "rollbacks": 1},
      {"date": "2024-01-03", "environment": "staging", "deployments": 13, "success": 12, "duration_min": 14, "rollbacks": 1},
      {"date": "2024-01-04", "environment": "staging", "deployments": 15, "success": 14, "duration_min": 17, "rollbacks": 1},
      {"date": "2024-01-05", "environment": "staging", "deployments": 16, "success": 15, "duration_min": 15, "rollbacks": 1},
      {"date": "2024-01-01", "environment": "prod", "deployments": 5, "success": 5, "duration_min": 25, "rollbacks": 0},
      {"date": "2024-01-02", "environment": "prod", "deployments": 6, "success": 5, "duration_min": 28, "rollbacks": 1},
      {"date": "2024-01-03", "environment": "prod", "deployments": 4, "success": 4, "duration_min": 22, "rollbacks": 0},
      {"date": "2024-01-04", "environment": "prod", "deployments": 7, "success": 6, "duration_min": 30, "rollbacks": 1},
      {"date": "2024-01-05", "environment": "prod", "deployments": 5, "success": 5, "duration_min": 24, "rollbacks": 0}
    ]
engine: plot
marks:
  - type: bar
    configuration:
	    x: date
	    y: deployments
	    fill: environment
	    fillOpacity: 0.7
  - type: dot
    configuration:
	    x: date
	    y: success
	    fill: environment
	    r: 5
	    symbol: environment
  - type: rule
    configuration:
	    x: date
	    y1: success
	    y2: deployments
	    stroke: environment
	    strokeWidth: 2
	    strokeOpacity: 0.4
grid: true
scales:
  color:
    legend: true
  symbol:
    legend: true

Infrastructure Cost Breakdown

Analyze cloud spending by service type:

View Source

data:
  source: |
    [
      {"month": "Jan", "service": "Compute", "cost_usd": 12500, "usage_hours": 8640, "instances": 45},
      {"month": "Feb", "service": "Compute", "cost_usd": 13200, "usage_hours": 8928, "instances": 48},
      {"month": "Mar", "service": "Compute", "cost_usd": 14100, "usage_hours": 9504, "instances": 51},
      {"month": "Apr", "service": "Compute", "cost_usd": 13800, "usage_hours": 9360, "instances": 50},
      {"month": "May", "service": "Compute", "cost_usd": 14500, "usage_hours": 9792, "instances": 52},
      {"month": "Jan", "service": "Storage", "cost_usd": 4200, "usage_hours": 8640, "instances": 15},
      {"month": "Feb", "service": "Storage", "cost_usd": 4500, "usage_hours": 8928, "instances": 16},
      {"month": "Mar", "service": "Storage", "cost_usd": 4800, "usage_hours": 9504, "instances": 17},
      {"month": "Apr", "service": "Storage", "cost_usd": 5100, "usage_hours": 9360, "instances": 18},
      {"month": "May", "service": "Storage", "cost_usd": 5400, "usage_hours": 9792, "instances": 19},
      {"month": "Jan", "service": "Network", "cost_usd": 2800, "usage_hours": 8640, "instances": 8},
      {"month": "Feb", "service": "Network", "cost_usd": 3100, "usage_hours": 8928, "instances": 9},
      {"month": "Mar", "service": "Network", "cost_usd": 3400, "usage_hours": 9504, "instances": 10},
      {"month": "Apr", "service": "Network", "cost_usd": 3200, "usage_hours": 9360, "instances": 9},
      {"month": "May", "service": "Network", "cost_usd": 3600, "usage_hours": 9792, "instances": 11},
      {"month": "Jan", "service": "Database", "cost_usd": 5600, "usage_hours": 8640, "instances": 12},
      {"month": "Feb", "service": "Database", "cost_usd": 5900, "usage_hours": 8928, "instances": 13},
      {"month": "Mar", "service": "Database", "cost_usd": 6200, "usage_hours": 9504, "instances": 14},
      {"month": "Apr", "service": "Database", "cost_usd": 6400, "usage_hours": 9360, "instances": 14},
      {"month": "May", "service": "Database", "cost_usd": 6700, "usage_hours": 9792, "instances": 15}
    ]
engine: plot
marks:
  - type: area
    configuration:
      x: month
      y: cost_usd
      fill: service
      fillOpacity: 0.7
  - type: line
    configuration:
      x: month
      y: cost_usd
      stroke: service
      strokeWidth: 2
  - type: crosshair
    configuration:
      x: month
      y: cost_usd
      stroke: service
      opacity: 0.4
      tip: true
grid: true
scales:
  color:
    legend: true
    scheme: tableau10
    domain: ["Jan", "Feb", "Apr", "May"]

Alert Volume Heatmap

Visualize alert patterns across days and severity:

View Source

title: Test
data:
  source: |
    [
      {"day": "Monday", "severity": "critical", "count": 8, "mttr_min": 45, "false_positive": 1},
      {"day": "Monday", "severity": "warning", "count": 32, "mttr_min": 120, "false_positive": 8},
      {"day": "Monday", "severity": "info", "count": 85, "mttr_min": 240, "false_positive": 25},
      {"day": "Tuesday", "severity": "critical", "count": 5, "mttr_min": 38, "false_positive": 0},
      {"day": "Tuesday", "severity": "warning", "count": 28, "mttr_min": 95, "false_positive": 6},
      {"day": "Tuesday", "severity": "info", "count": 78, "mttr_min": 210, "false_positive": 22},
      {"day": "Wednesday", "severity": "critical", "count": 12, "mttr_min": 52, "false_positive": 2},
      {"day": "Wednesday", "severity": "warning", "count": 45, "mttr_min": 135, "false_positive": 12},
      {"day": "Wednesday", "severity": "info", "count": 92, "mttr_min": 265, "false_positive": 28},
      {"day": "Thursday", "severity": "critical", "count": 6, "mttr_min": 40, "false_positive": 1},
      {"day": "Thursday", "severity": "warning", "count": 35, "mttr_min": 110, "false_positive": 9},
      {"day": "Thursday", "severity": "info", "count": 88, "mttr_min": 230, "false_positive": 26},
      {"day": "Friday", "severity": "critical", "count": 15, "mttr_min": 58, "false_positive": 3},
      {"day": "Friday", "severity": "warning", "count": 52, "mttr_min": 145, "false_positive": 15},
      {"day": "Friday", "severity": "info", "count": 105, "mttr_min": 285, "false_positive": 32}
    ]
engine: plot
marks:
  - type: rect
    configuration:
      x: day
      y: severity
      fill: count
      width: 0.9
      height: 0.9
      tip: true
  - type: text
    configuration:
      x: day
      y: severity
      text: count
      fontSize: 10
      textAnchor: middle
grid: true
scales:
  color:
    type: linear
    scheme: reds
    legend: true

Network Traffic Patterns

Monitor ingress and egress traffic across zones:

View Source

data:
  source: |
    [
      {"zone": "us-east-1a", "hour": 0, "ingress_gbps": 12.5, "egress_gbps": 8.2, "connections": 4500, "latency_ms": 8},
      {"zone": "us-east-1a", "hour": 6, "ingress_gbps": 18.3, "egress_gbps": 12.1, "connections": 6200, "latency_ms": 12},
      {"zone": "us-east-1a", "hour": 12, "ingress_gbps": 25.7, "egress_gbps": 16.8, "connections": 8500, "latency_ms": 15},
      {"zone": "us-east-1a", "hour": 18, "ingress_gbps": 22.1, "egress_gbps": 14.5, "connections": 7400, "latency_ms": 13},
      {"zone": "us-east-1b", "hour": 0, "ingress_gbps": 10.8, "egress_gbps": 7.2, "connections": 3800, "latency_ms": 9},
      {"zone": "us-east-1b", "hour": 6, "ingress_gbps": 15.6, "egress_gbps": 10.4, "connections": 5300, "latency_ms": 13},
      {"zone": "us-east-1b", "hour": 12, "ingress_gbps": 21.9, "egress_gbps": 14.2, "connections": 7200, "latency_ms": 16},
      {"zone": "us-east-1b", "hour": 18, "ingress_gbps": 18.8, "egress_gbps": 12.3, "connections": 6300, "latency_ms": 14},
      {"zone": "us-west-2a", "hour": 0, "ingress_gbps": 8.4, "egress_gbps": 5.6, "connections": 2900, "latency_ms": 10},
      {"zone": "us-west-2a", "hour": 6, "ingress_gbps": 12.2, "egress_gbps": 8.1, "connections": 4100, "latency_ms": 14},
      {"zone": "us-west-2a", "hour": 12, "ingress_gbps": 17.3, "egress_gbps": 11.2, "connections": 5600, "latency_ms": 18},
      {"zone": "us-west-2a", "hour": 18, "ingress_gbps": 14.9, "egress_gbps": 9.8, "connections": 4900, "latency_ms": 15}
    ]
engine: plot
marks:
  - type: line
    configuration:
      x: hour
      y: ingress_gbps
      stroke: zone
      strokeWidth: 2
  - type: line
    configuration:
      x: hour
      y: egress_gbps
      stroke: zone
      strokeWidth: 2
      strokeDasharray: [4, 4]
  - type: dot
    configuration:
      x: hour
      y: ingress_gbps
      fill: zone
      r: latency_ms
      fillOpacity: 0.6
  - type: crosshair
    configuration:
      x: hour
      y: ingress_gbps
      stroke: zone
      opacity: 0.4
      tip: true
grid: true
scales:
  color:
    legend: true
    scheme: category10

Build Pipeline Duration

Track CI/CD pipeline stage timings:

View Source

data:
  source: |
    [
      {"build": "1", "stage": "checkout", "duration_sec": 15, "status": "success", "cache_hit": 1},
      {"build": "1", "stage": "install", "duration_sec": 180, "status": "success", "cache_hit": 0},
      {"build": "1", "stage": "lint", "duration_sec": 45, "status": "success", "cache_hit": 1},
      {"build": "1", "stage": "test", "duration_sec": 320, "status": "success", "cache_hit": 1},
      {"build": "1", "stage": "build", "duration_sec": 280, "status": "success", "cache_hit": 1},
      {"build": "1", "stage": "deploy", "duration_sec": 150, "status": "success", "cache_hit": 0},
      {"build": "2", "stage": "checkout", "duration_sec": 12, "status": "success", "cache_hit": 1},
      {"build": "2", "stage": "install", "duration_sec": 42, "status": "success", "cache_hit": 1},
      {"build": "2", "stage": "lint", "duration_sec": 38, "status": "success", "cache_hit": 1},
      {"build": "2", "stage": "test", "duration_sec": 295, "status": "success", "cache_hit": 1},
      {"build": "2", "stage": "build", "duration_sec": 265, "status": "success", "cache_hit": 1},
      {"build": "2", "stage": "deploy", "duration_sec": 145, "status": "success", "cache_hit": 0},
      {"build": "3", "stage": "checkout", "duration_sec": 14, "status": "success", "cache_hit": 1},
      {"build": "3", "stage": "install", "duration_sec": 48, "status": "success", "cache_hit": 1},
      {"build": "3", "stage": "lint", "duration_sec": 52, "status": "failed", "cache_hit": 1},
      {"build": "3", "stage": "test", "duration_sec": 0, "status": "skipped", "cache_hit": 0},
      {"build": "3", "stage": "build", "duration_sec": 0, "status": "skipped", "cache_hit": 0},
      {"build": "3", "stage": "deploy", "duration_sec": 0, "status": "skipped", "cache_hit": 0}
    ]
engine: plot
marks:
  - type: bar
    configuration:
	    x: duration_sec
	    y: stage
	    fill: status
  - type: dot
    configuration:
	    x: duration_sec
	    y: stage
	    r: cache_hit
	    fill: status
	    symbol: build
  - type: text
    configuration:
	    x: duration_sec
	    y: stage
	    text: duration_sec
	    dx: 10
	    fontSize: 9
grid: true
scales:
  color:
    type: ordinal
    domain: ["success", "failed", "skipped"]
    range: ["green", "red", "gray"]
    legend: true
  symbol:
    legend: true

Database Performance Metrics

Monitor query performance and connection pools:

View Source

data:
  source: |
    [
      {"time": "00:00", "query_time_ms": 12, "active_connections": 45, "slow_queries": 2, "cache_hit_rate": 0.92},
      {"time": "02:00", "query_time_ms": 10, "active_connections": 38, "slow_queries": 1, "cache_hit_rate": 0.94},
      {"time": "04:00", "query_time_ms": 9, "active_connections": 32, "slow_queries": 0, "cache_hit_rate": 0.95},
      {"time": "06:00", "query_time_ms": 11, "active_connections": 42, "slow_queries": 1, "cache_hit_rate": 0.93},
      {"time": "08:00", "query_time_ms": 15, "active_connections": 68, "slow_queries": 5, "cache_hit_rate": 0.88},
      {"time": "10:00", "query_time_ms": 18, "active_connections": 85, "slow_queries": 8, "cache_hit_rate": 0.85},
      {"time": "12:00", "query_time_ms": 22, "active_connections": 98, "slow_queries": 12, "cache_hit_rate": 0.82},
      {"time": "14:00", "query_time_ms": 25, "active_connections": 105, "slow_queries": 15, "cache_hit_rate": 0.80},
      {"time": "16:00", "query_time_ms": 28, "active_connections": 112, "slow_queries": 18, "cache_hit_rate": 0.78},
      {"time": "18:00", "query_time_ms": 24, "active_connections": 95, "slow_queries": 14, "cache_hit_rate": 0.81},
      {"time": "20:00", "query_time_ms": 19, "active_connections": 72, "slow_queries": 9, "cache_hit_rate": 0.86},
      {"time": "22:00", "query_time_ms": 14, "active_connections": 52, "slow_queries": 3, "cache_hit_rate": 0.90}
    ]
engine: plot
marks:
  - type: line
    configuration:
      x: time
      y: query_time_ms
      stroke: steelblue
      strokeWidth: 2
  - type: area
    configuration:
      x: time
      y: query_time_ms
      fill: steelblue
      fillOpacity: 0.2
  - type: dot
    configuration:
      x: time
      y: active_connections
      fill: coral
      r: slow_queries
  - type: rule
    configuration:
      x: time
      y1: 0
      y2: slow_queries
      stroke: red
      strokeWidth: 1
      strokeOpacity: 0.5
  - type: text
    configuration:
      x: time
      y: slow_queries
      text: slow_queries
      dy: -8
      fontSize: 8
  - type: crosshair
    configuration:
      x: time
      y: query_time_ms
      opacity: 0.4
      tip: true
grid: true

Incident Response Timeline

Track incident lifecycle and resolution:

View Source

data:
  source: |
    [
      {"incident": "INC-001", "detected_min": 0, "acknowledged_min": 5, "resolved_min": 45, "severity": "critical", "team": "platform"},
      {"incident": "INC-002", "detected_min": 0, "acknowledged_min": 3, "resolved_min": 28, "severity": "high", "team": "backend"},
      {"incident": "INC-003", "detected_min": 0, "acknowledged_min": 12, "resolved_min": 95, "severity": "medium", "team": "frontend"},
      {"incident": "INC-004", "detected_min": 0, "acknowledged_min": 2, "resolved_min": 18, "severity": "critical", "team": "platform"},
      {"incident": "INC-005", "detected_min": 0, "acknowledged_min": 8, "resolved_min": 62, "severity": "high", "team": "database"},
      {"incident": "INC-006", "detected_min": 0, "acknowledged_min": 15, "resolved_min": 120, "severity": "low", "team": "network"},
      {"incident": "INC-007", "detected_min": 0, "acknowledged_min": 4, "resolved_min": 35, "severity": "high", "team": "backend"},
      {"incident": "INC-008", "detected_min": 0, "acknowledged_min": 6, "resolved_min": 52, "severity": "medium", "team": "frontend"},
      {"incident": "INC-009", "detected_min": 0, "acknowledged_min": 1, "resolved_min": 12, "severity": "critical", "team": "platform"},
      {"incident": "INC-010", "detected_min": 0, "acknowledged_min": 10, "resolved_min": 78, "severity": "medium", "team": "database"}
    ]
engine: plot
marks:
  - type: rule
    configuration:
      x1: detected_min
      x2: resolved_min
      y: incident
      stroke: severity
      strokeWidth: 6
      strokeOpacity: 0.6
  - type: dot
    configuration:
      x: acknowledged_min
      y: incident
      fill: severity
      r: 4
  - type: dot
    configuration:
      x: resolved_min
      y: incident
      fill: team
      r: 6
      symbol: team
  - type: text
    configuration:
      x: resolved_min
      y: incident
      text: resolved_min
      dx: 10
      fontSize: 9
grid: true
scales:
  color:
    type: ordinal
    domain: ["critical", "high", "medium", "low"]
    range: ["red", "orange", "yellow", "green"]
    legend: true
  symbol:
    legend: true

Log Volume by Severity

Analyze application log patterns:

View Source

data:
  source: |
    [
      {"timestamp": "00:00", "error": 15, "warning": 120, "info": 8500, "debug": 45000},
      {"timestamp": "01:00", "error": 12, "warning": 95, "info": 7200, "debug": 38000},
      {"timestamp": "02:00", "error": 8, "warning": 75, "info": 6500, "debug": 32000},
      {"timestamp": "03:00", "error": 6, "warning": 62, "info": 5800, "debug": 28000},
      {"timestamp": "04:00", "error": 9, "warning": 80, "info": 6200, "debug": 30000},
      {"timestamp": "05:00", "error": 18, "warning": 135, "info": 8900, "debug": 42000},
      {"timestamp": "06:00", "error": 25, "warning": 185, "info": 11500, "debug": 52000},
      {"timestamp": "07:00", "error": 32, "warning": 245, "info": 14200, "debug": 62000},
      {"timestamp": "08:00", "error": 42, "warning": 320, "info": 18500, "debug": 78000},
      {"timestamp": "09:00", "error": 48, "warning": 380, "info": 21000, "debug": 88000},
      {"timestamp": "10:00", "error": 55, "warning": 425, "info": 23500, "debug": 95000},
      {"timestamp": "11:00", "error": 58, "warning": 450, "info": 25000, "debug": 102000}
    ]
engine: plot
marks:
  - type: line
    configuration:
      x: timestamp
      y: error
      stroke: red
      strokeWidth: 2
  - type: line
    configuration:
      x: timestamp
      y: warning
      stroke: orange
      strokeWidth: 2
  - type: area
    configuration:
      x: timestamp
      y: info
      fill: steelblue
      fillOpacity: 0.3
  - type: dot
    configuration:
      x: timestamp
      y: error
      fill: red
      r: 4
  - type: crosshair
    configuration:
      x: timestamp
      y: error
      opacity: 0.4
      tip: true
grid: true

Auto-scaling Events

Visualize cluster scaling decisions:

View Source

data:
  source: |
    [
      {"time": "06:00", "nodes": 5, "cpu_avg": 25, "memory_avg": 35, "pods": 45, "action": "stable"},
      {"time": "07:00", "nodes": 5, "cpu_avg": 38, "memory_avg": 48, "pods": 58, "action": "stable"},
      {"time": "08:00", "nodes": 7, "cpu_avg": 52, "memory_avg": 62, "pods": 72, "action": "scale_up"},
      {"time": "09:00", "nodes": 8, "cpu_avg": 65, "memory_avg": 72, "pods": 88, "action": "scale_up"},
      {"time": "10:00", "nodes": 10, "cpu_avg": 78, "memory_avg": 82, "pods": 105, "action": "scale_up"},
      {"time": "11:00", "nodes": 10, "cpu_avg": 82, "memory_avg": 85, "pods": 112, "action": "stable"},
      {"time": "12:00", "nodes": 12, "cpu_avg": 88, "memory_avg": 90, "pods": 128, "action": "scale_up"},
      {"time": "13:00", "nodes": 12, "cpu_avg": 85, "memory_avg": 88, "pods": 125, "action": "stable"},
      {"time": "14:00", "nodes": 12, "cpu_avg": 80, "memory_avg": 82, "pods": 118, "action": "stable"},
      {"time": "15:00", "nodes": 10, "cpu_avg": 68, "memory_avg": 70, "pods": 98, "action": "scale_down"},
      {"time": "16:00", "nodes": 8, "cpu_avg": 55, "memory_avg": 58, "pods": 82, "action": "scale_down"},
      {"time": "17:00", "nodes": 7, "cpu_avg": 48, "memory_avg": 52, "pods": 72, "action": "scale_down"}
    ]
engine: plot
marks:
  - type: area
    configuration:
      x: time
      y: cpu_avg
      fill: steelblue
      fillOpacity: 0.3
  - type: line
    configuration:
      x: time
      y: nodes
      stroke: purple
      strokeWidth: 3
  - type: dot
    configuration:
      x: time
      y: nodes
      fill: action
      r: 8
      symbol: action
  - type: rule
    configuration:
      x: time
      y1: cpu_avg
      y2: memory_avg
      stroke: gray
      strokeWidth: 1
      strokeOpacity: 0.5
  - type: text
    configuration:
      x: time
      y: nodes
      text: nodes
      dy: -12
      fontSize: 9
grid: true
scales:
  color:
    type: ordinal
    domain: ["scale_up", "scale_down", "stable"]
    range: ["green", "orange", "gray"]
    legend: true
  symbol:
    legend: true

Usage Tips

Mark Types for DevOps Monitoring:
- line - Time series trends, resource usage over time
- area - Cumulative metrics, stacked usage patterns
- bar - Discrete comparisons, deployment counts
- dot - Point-in-time measurements, outliers
- rect - Heatmaps, availability calendars
- rule - Ranges, error bars, connections
- text - Labels, values, annotations
- link - Dependencies, flows (advanced)
- crosshair - Interactive data exploration
Common DevOps Metrics:
- Infrastructure: CPU, memory, disk, network utilization
- Application: Response times, error rates, throughput
- Deployment: Frequency, duration, success rate, rollbacks
- Reliability: Uptime, MTTR, alert volumes, incident counts
- Cost: Cloud spending, resource efficiency, waste
Color Schemes:
- category10 / tableau10 - Service/environment differentiation
- reds / greens - Single-dimension heatmaps
- rdylgn - Red-Yellow-Green status indicators
- viridis - Sequential data, intensity scales
- Custom ranges for severity: ["green", "yellow", "orange", "red"]
Visualization Patterns:
- Time series: Combine line + area + dots for multi-layer view
- Comparisons: Use bars with dots for dual metrics
- Distributions: Area charts for percentile ranges
- Status: Heatmaps (rect) with text overlays
- Timelines: Rules connecting events with dots
Best Practices:
- Always include grid: true for reference lines
- Use tip: true with crosshair for detailed exploration
- Layer marks from background (area) to foreground (dots, text)
- Apply opacity to prevent overlap obscuring data
- Use consistent color schemes across related dashboards
- Scale text sizes appropriately (8-10px for labels)

Observability: Metrics, logs, traces unified visualization
SLO/SLI Tracking: Service level indicators and objectives
Capacity Planning: Resource trend analysis and forecasting
Cost Optimization: Spending patterns and waste identification
Incident Management: MTTR tracking and post-mortem analysis
Performance Engineering: Latency analysis and bottleneck identification

DevOps Monitoring Visualizations ​

Dataset ​

Container Resource Usage ​

Application Response Time Distribution ​

Deployment Success Rate ​

Infrastructure Cost Breakdown ​

Alert Volume Heatmap ​

Network Traffic Patterns ​

Build Pipeline Duration ​

Database Performance Metrics ​

Incident Response Timeline ​

Log Volume by Severity ​

Auto-scaling Events ​

Usage Tips ​

Related Concepts ​

DevOps Monitoring Visualizations

Dataset

Container Resource Usage

Application Response Time Distribution

Deployment Success Rate

Infrastructure Cost Breakdown

Alert Volume Heatmap

Network Traffic Patterns

Build Pipeline Duration

Database Performance Metrics

Incident Response Timeline

Log Volume by Severity

Auto-scaling Events

Usage Tips

Related Concepts