Skip to content
Vega templates

Radar / Spider

Multi-axis radar chart for profile comparison.

Template previewVega
Rendering…

Make it your own.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 360, "height": 360, "padding": 30, "autosize": "none",
  "signals": [{"name":"radius","update":"width/2"}],
  "data": [
    {"name":"table","values":[
      {"key":"speed","value":80,"category":"A"},{"key":"agility","value":65,"category":"A"},{"key":"power","value":90,"category":"A"},{"key":"stamina","value":70,"category":"A"},{"key":"focus","value":85,"category":"A"},
      {"key":"speed","value":60,"category":"B"},{"key":"agility","value":80,"category":"B"},{"key":"power","value":55,"category":"B"},{"key":"stamina","value":85,"category":"B"},{"key":"focus","value":70,"category":"B"}
    ]},
    {"name":"keys","source":"table","transform":[{"type":"aggregate","groupby":["key"]}]}
  ],
  "scales": [
    {"name":"angular","type":"point","range":{"signal":"[-PI, PI]"},"padding":0.5,"domain":{"data":"table","field":"key"}},
    {"name":"radial","type":"linear","range":{"signal":"[0, radius]"},"zero":true,"nice":false,"domain":{"data":"table","field":"value"}},
    {"name":"color","type":"ordinal","range":{"scheme":"category10"},"domain":{"data":"table","field":"category"}}
  ],
  "marks":[
    {"type":"group","name":"categories","zindex":1,
      "from":{"facet":{"data":"table","name":"facet","groupby":["category"]}},
      "marks":[
        {"type":"line","from":{"data":"facet"},
          "encode":{"enter":{"interpolate":{"value":"linear-closed"},"x":{"signal":"scale('radial', datum.value) * cos(scale('angular', datum.key))"},"y":{"signal":"scale('radial', datum.value) * sin(scale('angular', datum.key))"},"stroke":{"scale":"color","field":"category"},"strokeWidth":{"value":2},"fill":{"scale":"color","field":"category"},"fillOpacity":{"value":0.18}}}}
      ]},
    {"type":"rule","from":{"data":"keys"},"encode":{"enter":{"x":{"value":0},"y":{"value":0},"x2":{"signal":"radius * cos(scale('angular', datum.key))"},"y2":{"signal":"radius * sin(scale('angular', datum.key))"},"stroke":{"value":"#94a3b8"},"strokeWidth":{"value":1}}}},
    {"type":"text","from":{"data":"keys"},"encode":{"enter":{"x":{"signal":"(radius+10) * cos(scale('angular', datum.key))"},"y":{"signal":"(radius+10) * sin(scale('angular', datum.key))"},"text":{"field":"key"},"align":{"signal":"cos(scale('angular', datum.key)) > 0 ? 'left' : 'right'"},"baseline":{"value":"middle"},"fontSize":{"value":11},"fill":{"value":"#475569"}}}}
  ]
}