theta and theta2 chanel encoding by field - vega-lite

Question

I want to create arcs using vega-lite, here you will find a working example: enter link description here
but this does not work: enter link description here
The difference is only that I use this in the working example
"encoding": {
"theta": {"value": {"expr": "datum.thta"}},
"theta2": {"value": {"expr": "datum.thta2"}} }
And this is the code that does not work:
"encoding": {
"theta": {"field": "thta"},
"theta2": {"field": "thta2"}} }
Can someone explain why using the "fields" creates a half circle (not wanted) and "value" creates the quarter circle (wanted)?
Many thanks in advance

Answer 1

When you specify values via encodings, the scale is automatically adjusted based on the content of the data. You can fix this by specifying that the scale should be from 0 to 2pi (open in editor):
{
"width": 80,
"height": 80,
"params": [{"name": "radius", "value": 0}, {"name": "radius2", "value": 50}],
"data": {
"values": [{"name": "arc1", "quadrant": "TopRight", "ring": "Hold"}]
},
"transform": [
{
"calculate": "if(datum.quadrant === 'TopRight' , PI*0.5 , null)",
"as": "thta2"
},
{"calculate": "if(datum.quadrant === 'TopRight' , 0 , null)", "as": "thta"}
],
"mark": {
"type": "arc",
"radius": {"expr": "radius"},
"radius2": {"expr": "radius2"}
},
"encoding": {
"theta": {"field": "thta", "scale": {"domain": [0, "2*PI"]}},
"theta2": {"field": "thta2"}
}
}