Extension:Graph/Demo/TemplateSample

<graph>

{
  "version": 2,
  "width": 100,
  "height": 100,
  "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"},
      "range": [20,100]
    }
  ],
  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"field": {"group": "width"},"mult": 0.5},
          "y": {"field": {"group": "height"},"mult": 0.5},
          "startAngle": {"field": "layout_start"},
          "endAngle": {"field": "layout_end"},
          "innerRadius": {"value": 20},
          "outerRadius": {"scale": "r","field": "data"},
          "stroke": {"value": "#fff"}
        },
        "update": {"fill": {"value": "#ccc"} },
        "hover": {"fill": {"value": "pink"} }
      }
    },
    {
      "type": "text",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"field": {"group": "width"},"mult": 0.5},
          "y": {"field": {"group": "height"},"mult": 0.5},
          "radius": {"scale": "r","field": "data","offset": 8},
          "theta": {"field": "layout_mid"},
          "fill": {"value": "#000"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "text": {"field": "data"}
        }
      }
    }
  ]
}

</graph>