I am trying to design a radar plot to allow the end-user to compare different products. However, I am facing a bit of an issue with the interpolation of lines. Vega offers some standard interpolation techniques, but I am wondering if there is a way to to the data points connect points either in a clockwise or counter-clockwise manner. See the problem below.
What I would like.
For a sour taste, the orange line should follow the red line and not jump over to waffle pancake aroma.
Here is the code that generates this: category = products, key =aroma.
{
"width": 600,
"height": 400,
"padding": {
"left": 100,
"top": 100,
"bottom": 50
},
"autosize": {"type": "none", "contains": "padding"},
"signals": [
{"name": "radius", "update": "(width / 3.1)-18"}
],
"data": [
{
"name": "dataset"},
{
"name": "keys",
"source": "dataset",
"transform": [
{
"type": "aggregate",
"groupby": ["key"]
},
{
"type": "window",
"sort": {"field": "key"},
"frame": [null, null]
}
]
}
],
"scales": [
{
"name": "angular",
"type": "point",
"range": {"signal": "[-PI, PI]"},
"padding": 0.5,
"domain": {
"data": "dataset",
"field": "key"
}
},
{
"name": "radial",
"type": "linear",
"range": {"signal": "[0, radius]"},
"zero": true,
"nice": false,
"domain": {
"data": "dataset",
"field": "value"
},
"domainMin": 0
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "dataset", "field": "category"},
"range": {"scheme": "category10"}
}
],
"axes": [
{
"orient": "top",
"scale": "radial",
"domainWidth": 0.2,
"tickCount": 4,
"tickWidth": 0.2,
"labelFlush": false,
"labelFontSize": 9,
"labelColor": "gray"
}
],
"encode": {
"enter": {
"x": {"signal": "radius"},
"y": {"signal": "radius"}
}
},
"marks": [
{
"type": "group",
"name": "categories",
"zindex": 1,
"from": {
"facet": {"data": "dataset", "name": "facet", "groupby": ["category"]}
},
"marks": [
{
"type": "line",
"name": "category-line",
"from": {"data": "facet"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "scale('radial', datum.value__highlight) * cos(scale('angular', datum.key))"},
"y": {"signal": "scale('radial', datum.value__highlight) * sin(scale('angular', datum.key))"},
"stroke": {"scale": "color", "field": "category"},
"strokeWidth": {"value": 1},
"fill": {"scale": "color", "field": "category"},
"fillOpacity": {"value": 0.2}
}
}
},
{
"type": "line",
"name": "category-line-highlighted",
"from": {"data": "facet"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"signal": "scale('radial', datum.value__highlight) * cos(scale('angular', datum.key))"},
"y": {"signal": "scale('radial', datum.value__highlight) * sin(scale('angular', datum.key))"},
"stroke": {"scale": "color", "field": "category"},
"strokeWidth": {"value": 1},
"fill": [
{
"test": "datum.__selected__ == 'on'",
"scale": "color",
"field": "category",
"value": 0
}
]
}
}
},
{
"type": "symbol",
"name": "symbol-category",
"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))"},
"fill": {"scale": "color", "field": "category"},
"fillOpacity": {"value": 0.5},
"size": {"value": 30}
}
}
},
{
"type": "text",
"name": "value-text",
"from": {"data": "category-line"},
"encode": {
"enter": {
"x": {"signal": "datum.x"},
"y": {"signal": "datum.y"},
"text": {"signal": "datum.datum.value"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fill": {"value": "black"},
"fillOpacity": { "value": 0}
}
}
}
]
},
{
"type": "rule",
"name": "radial-grid",
"from": {"data": "keys"},
"zindex": 0,
"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": "lightgray"},
"strokeWidth": {"value": 0.5}
}
}
},
{
"type": "text",
"name": "key-label",
"from": {"data": "keys"},
"zindex": 1,
"encode": {
"enter": {
"x": {"signal": "(radius + 5) * cos(scale('angular', datum.key))"},
"y": {"signal": "(radius + 5) * sin(scale('angular', datum.key))"},
"text": {"field": "key"},
"align": [
{
"test": "abs(scale('angular', datum.key)) > PI / 2",
"value": "right"
},
{
"value": "left"
}
],
"baseline": [
{
"test": "scale('angular', datum.key) > 0", "value": "top"
},
{
"test": "scale('angular', datum.key) == 0", "value": "middle"
},
{
"value": "bottom"
}
],
"fill": {"value": "black"},
"fontWeight": {"value": "bold"}
}
}
},
{
"type": "line",
"name": "outer-line",
"from": {"data": "radial-grid"},
"encode": {
"enter": {
"interpolate": {"value": "linear-closed"},
"x": {"field": "x2"},
"y": {"field": "y2"},
"stroke": {"value": "lightgray"},
"strokeWidth": {"value": 1}
}
}
}
],
"legends": [
{
"orient": "none",
"legendX": 290,
"legendY": -170,
"fill": "color"}
]
}
pbix: https://drive.google.com/file/d/1mi04vdyQTkhxzqd3zKtPidtvUR3OV__W/view?usp=sharing