{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 400,
"padding": 20,
"signals": [
{
"name": "probability_log",
"value": 5,
"bind": {
"input": "select",
"options": [
0.01,
0.02,
0.05,
0.07,
0.1,
0.25,
0.5,
0.75,
1,
2.5,
5,
7.5,
10,
25,
50,
75,
100
]
}
},
{
"name": "width_signal",
"value": 400,
"bind": {
"input": "range",
"min": 10,
"max": 400,
"step": 1
}
},
{
"name": "height",
"update": "width"
},
{
"name": "width",
"update": "width_signal"
},
{
"name": "probability_pi",
"update": "(PI / 2) * (log(probability_log)/LN10) + PI"
},
{
"name": "innerRadius",
"update": "width / 3"
}
],
"data": [
{
"name": "table",
"values": [
{
"field": 0.1
}
],
"transform": [
{
"type": "pie",
"field": "field",
"endAngle": {
"signal": "probability_pi"
}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"domain": [
0,
1,
10,
100
],
"range": [
"green",
"orange",
"purple",
"red"
]
}
],
"marks": [
{
"type": "arc",
"from": {
"data": "table"
},
"encode": {
"update": {
"fill": {
"value": "#F2F2F2"
},
"x": {
"signal": "width / 2"
},
"y": {
"signal": "height / 2"
},
"startAngle": {
"value": 0
},
"endAngle": {
"value": 7
},
"innerRadius": {
"signal": "innerRadius"
},
"outerRadius": {
"signal": "width / 2"
},
"cornerRadius": {
"value": 2
}
}
}
},
{
"type": "arc",
"from": {
"data": "table"
},
"encode": {
"update": {
"fill": {
"scale": "color",
"signal": "probability_log"
},
"x": {
"signal": "width / 2"
},
"y": {
"signal": "height / 2"
},
"startAngle": {
"value": 0
},
"endAngle": {
"signal": "probability_pi"
},
"innerRadius": {
"signal": "innerRadius"
},
"outerRadius": {
"signal": "width / 2"
},
"cornerRadius": {
"value": 2
}
}
}
},
{
"type": "arc",
"from": {
"data": "table"
},
"encode": {
"update": {
"fill": {
"value": "darkgray"
},
"x": {
"signal": "width / 2"
},
"y": {
"signal": "height / 2"
},
"startAngle": {
"value": 0
},
"endAngle": {
"value": 7
},
"innerRadius": {
"signal": "width/2+5"
},
"outerRadius": {
"signal": "width/2+10"
},
"cornerRadius": {
"value": 2
}
}
}
},
{
"type": "text",
"from": {
"data": "table"
},
"encode": {
"update": {
"x": {
"signal": "width / 2"
},
"y": {
"signal": "height / 2"
},
"text": {
"signal": "probability_log+'%'"
},
"fillOpacity": {
"value": 0.8
},
"fontSize": {
"value": 36
},
"fill": {
"value": "#666666"
},
"align": {
"value": "center"
},
"baseline": {
"value": "middle"
}
}
}
},
{
"type": "text",
"encode": {
"update": {
"x": {
"signal": "width + 30"
},
"y": {
"signal": "height /2"
},
"text": {
"value": "Pf = 0.1%"
},
"angle": {
"value": 90
},
"fontSize": {
"value": 16
},
"fill": {
"value": "#666666"
},
"align": {
"value": "center"
},
"baseline": {
"value": "middle"
}
}
}
},
{
"type": "text",
"encode": {
"update": {
"x": {
"signal": "width + 15 "
},
"y": {
"signal": "height /2"
},
"text": {
"value": "▲"
},
"angle": {
"value": 270
},
"fontSize": {
"value": 16
},
"fill": {
"value": "green"
},
"align": {
"value": "center"
},
"baseline": {
"value": "middle"
}
}
}
},
{
"type": "text",
"encode": {
"update": {
"x": {
"signal": "width / 2"
},
"y": {
"signal": "height + 30"
},
"text": {
"value": "Pf = 1%"
},
"angle": {
"value": 0
},
"fontSize": {
"value": 16
},
"fill": {
"value": "#666666"
},
"align": {
"value": "center"
},
"baseline": {
"value": "middle"
}
}
}
},
{
"type": "text",
"encode": {
"update": {
"x": {
"signal": "width / 2 "
},
"y": {
"signal": "height + 15"
},
"text": {
"value": "▲"
},
"angle": {
"value": 0
},
"fontSize": {
"value": 16
},
"fill": {
"value": "orange"
},
"align": {
"value": "center"
},
"baseline": {
"value": "middle"
}
}
}
},
{
"type": "text",
"encode": {
"update": {
"x": {
"signal": "- 30"
},
"y": {
"signal": "height /2"
},
"text": {
"value": "Pf = 10%"
},
"angle": {
"value": -90
},
"fontSize": {
"value": 16
},
"fill": {
"value": "#666666"
},
"align": {
"value": "center"
},
"baseline": {
"value": "middle"
}
}
}
},
{
"type": "text",
"encode": {
"update": {
"x": {
"signal": "-15 "
},
"y": {
"signal": "height / 2"
},
"text": {
"value": "▲"
},
"angle": {
"value": 90
},
"fontSize": {
"value": 16
},
"fill": {
"value": "purple"
},
"align": {
"value": "center"
},
"baseline": {
"value": "middle"
}
}
}
},
{
"type": "text",
"encode": {
"update": {
"x": {
"signal": "width / 2"
},
"y": {
"signal": "- 30"
},
"text": {
"value": "Pf = 100%"
},
"angle": {
"value": 0
},
"fontSize": {
"value": 16
},
"fill": {
"value": "#666666"
},
"align": {
"value": "center"
},
"baseline": {
"value": "middle"
}
}
}
},
{
"type": "text",
"encode": {
"update": {
"x": {
"signal": "width / 2 "
},
"y": {
"signal": "-15"
},
"text": {
"value": "▲"
},
"fillOpacity": {
"value": 0.8
},
"angle": {
"value": 180
},
"fontSize": {
"value": 16
},
"fill": {
"value": "red"
},
"align": {
"value": "center"
},
"baseline": {
"value": "middle"
}
}
}
},
{
"type": "text",
"encode": {
"update": {
"x": {
"signal": "width / 2 "
},
"y": {
"signal": "-innerRadius + height/2 + 5"
},
"text": {
"value": "▲"
},
"fillOpacity": {
"value": 0.8
},
"angle": {
"value": 0
},
"fontSize": {
"value": 16
},
"fill": {
"value": "green"
},
"align": {
"value": "center"
},
"baseline": {
"value": "middle"
}
}
}
}
]
}