mattijn
1/25/2018 - 6:59 PM

vega3_probability_radial.json

{
  "$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"
          }
        }
      }
    }
  ]
}