Radar / Spider
Multi-axis radar chart for profile comparison.
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"}}}}
]
}