test

test file

test2.json

{
  "schema": {
    "language": "vega",
    "version": "3.0"
  },
  "width": 400,
  "height": 400,
  "data": [
    {
      "name": "table",
      "values": [
        12,
        23,
        47,
        6,
        52,
        19
      ],
      "transform": [
        {
          "type": "pie",
          "field": "data"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "r",
      "type": "sqrt",
      "domain": {
        "data": "table",
        "field": "data"
      },
      "zero": true,
      "range": [
        20,
        100
      ]
    }
  ],
  "marks": [
    {
      "type": "arc",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "x": {
            "field": {
              "group": "width"
            },
            "mult": 0.5
          },
          "y": {
            "field": {
              "group": "height"
            },
            "mult": 0.5
          },
          "startAngle": {
            "field": "startAngle"
          },
          "endAngle": {
            "field": "endAngle"
          },
          "innerRadius": {
            "value": 20
          },
          "outerRadius": {
            "scale": "r",
            "field": "data"
          },
          "stroke": {
            "value": "#fff"
          }
        },
        "update": {
          "fill": {
            "value": "#ccc"
          }
        },
        "hover": {
          "fill": {
            "value": "pink"
          }
        }
      }
    },
    {
      "type": "text",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "x": {
            "field": {
              "group": "width"
            },
            "mult": 0.5
          },
          "y": {
            "field": {
              "group": "height"
            },
            "mult": 0.5
          },
          "radius": {
            "scale": "r",
            "field": "data",
            "offset": 8
          },
          "theta": {
            "signal": "(datum.startAngle + datum.endAngle)/2"
          },
          "fill": {
            "value": "#000"
          },
          "align": {
            "value": "center"
          },
          "baseline": {
            "value": "middle"
          },
          "text": {
            "field": "data"
          }
        }
      }
    }
  ]
}