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>
<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>