I’ve tried throwing the condition in many different places, but it always crashes the display. Nothing feels wrong about the set up, and I’ve tried putting the condition in the “textgradient” section to no avail. After reading up on other people’s attempts and online documentation, it should be able to output “textgradient1” or “textgradient2” based on the condition.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 450,
"height": 450,
"padding": 50,
"signals": [
{
"name": "textGradient1",
"update": "{gradient: 'linear', stops: [{offset: 0, color: 'red'}]}"
},
{
"name": "textGradient2",
"update": "{gradient: 'linear', stops: [{offset: 0, color: 'black'}]}"
},
{
"name": "percent",
"update": "0",
"on": [
{
"events": {
"type": "timer",
"throttle": 0
},
"update": "round(data('dataset')[0]['_percent_under_5'])"
}
]
}
],
"data": [
{"name": "dataset"},
{
"name": "back",
"values": [],
"transform": [
{
"type": "sequence",
"start": 0,
"stop": 100,
"step": 1,
"as": "val"
},
{
"type": "formula",
"expr": "1",
"as": "t"
},
{
"type": "pie",
"field": "t",
"startAngle": {"signal": "0"},
"endAngle": {"signal": "2*PI"}
}
]
},
{
"name": "front",
"values": [],
"transform": [
{
"type": "sequence",
"start": 0,
"stop": {"signal": "percent"},
"step": 1,
"as": "val"
},
{
"type": "formula",
"expr": "1",
"as": "t"
},
{
"type": "pie",
"field": "t",
"startAngle": {"signal": "0"},
"endAngle": {
"signal": "((2*PI)/100)*percent"
}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"domain": {
"data": "back",
"field": "val"
},
"range": [
"green",
"green"
]
}
],
"marks": [
{
"type": "arc",
"from": {"data": "back"},
"encode": {
"enter": {
"fill": {"value": "#3f424e"},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {
"field": "startAngle"
},
"endAngle": {
"field": "endAngle"
},
"padAngle": {
"signal": "0.015"
},
"innerRadius": {
"signal": "(width / 2)-15"
},
"outerRadius": {
"signal": "width / 2"
}
}
}
},
{
"type": "arc",
"from": {"data": "front"},
"encode": {
"enter": {
"fill": {
"scale": "color",
"field": "val"
},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {
"field": "startAngle"
},
"endAngle": {
"field": "endAngle"
},
"padAngle": {
"signal": "0.015"
},
"innerRadius": {
"signal": "(width / 2)-15"
},
"outerRadius": {
"signal": "width / 2"
}
}
}
},
{
"type": "arc",
"data": [{"a": 1}],
"encode": {
"enter": {
"fill": {"value": "#3f424e"},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {"signal": "0"},
"endAngle": {
"signal": "2*PI"
},
"innerRadius": {
"signal": "(width / 2)-25"
},
"outerRadius": {
"signal": "(width / 2)-20"
}
}
}
},
{
"type": "text",
"data": [{}],
"encode": {
"update": {
"text": {
"signal": "percent + '%'"
},
"align": {"value": "center"},
"fontWeight": {
"value": "bold"
},
"fill": {
"signal": {
"condition":{
"test": "data('dataset')[0]['_percent_under_5'] > 90", "value":"textGradient1"},
"value":"textGradient2"
}
}
},
"x": {"signal": "width /2"},
"y": {"signal": "width /2"},
"dy": {"value": 10},
"fontSize": {"value": 70}
}
}
},
{
"type": "text",
"data": [{}],
"encode": {
"update": {
"text": {
"value": "Completed Within 5 Days"
},
"align": {"value": "center"},
"fontWeight": {
"value": "bold"
},
"fill": {"value": "#170D67"},
"x": {"signal": "width /2"},
"y": {"signal": "width /2"},
"dy": {"value": 40},
"fontSize": {"value": 30}
}
}
}
]
}
mike glass is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.