Skip to content
Vega-Lite templates

Connected Scatter (state path)

Trajectory of two metrics over time with arrows connecting points.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema":"https://vega.github.io/schema/vega-lite/v5.json",
  "data":{"values":[
    {"t":2018,"r":12,"u":0.5},{"t":2019,"r":15,"u":0.7},{"t":2020,"r":10,"u":1.2},
    {"t":2021,"r":18,"u":0.9},{"t":2022,"r":24,"u":0.6},{"t":2023,"r":28,"u":0.5},
    {"t":2024,"r":31,"u":0.4},{"t":2025,"r":35,"u":0.35}
  ]},
  "layer":[
    {"mark":{"type":"line","color":"#94a3b8","interpolate":"catmull-rom"}},
    {"mark":{"type":"point","filled":true,"size":140,"color":"#3666ff"}},
    {"mark":{"type":"text","dy":-12,"fontWeight":600,"fontSize":11},
     "encoding":{"text":{"field":"t"}}}
  ],
  "encoding":{
    "x":{"field":"r","type":"quantitative","title":"Revenue ($M)"},
    "y":{"field":"u","type":"quantitative","title":"Unemployment (%)"}
  },
  "width":500,"height":340
}