Labels on a donut chart

[Alexandre Bulté]

Hi,

I'm trying to place labels on portions of a donut chart. Of course, I used an "arc" mark for that.

But I can't find how to place the labels correctly (i.e. at the center of the portions, see example below). As far as I can see, I only have access to "startAngle" and "endAngle" from the "pie" transform and it does not seem sufficient for achieving my goal.

The method used in d3 seems promising (http://bl.ocks.org/mbostock/3887193) but I can not find any "centroid" property in Vega.

Any idea on how to implement those labels?

Thanks.

[Amir Moghadam]

Hi Alexandre,

Did you have any luck with the lables?

I'm trying to achive some donut / arc type of charts.

Thanks

Amir

[Kev K]

Hi,

I've got 80% towards labels for pie/donut charts with a bit of trigonometry. Pasting the following into Vega Live Editor should give you labels (I can also post a version that uses JSON data). The work is mainly done in the 'transform' collection on the data table.

The bit I'm missing is how to find the width and height of the visualisation in a formula transform. I've hard coded the x and y values that point to the center of the viz (fields x_mid and y_mid), but it would obviously be better if they were automatically determined. Does anyone know how to pick up group.height and group.width in a formula transform (or any other way to combine the center location with the x and y offsets)?

{
  "name": "arc",
  "width": 400,
  "height": 400,
  "data": [
    {
      "name": "table",
      "values": [12, 23, 47, 6, 52, 19],
      "transform": [
        {"type": "pie", "value": "data"},
        {"type": "formula", "field": "hyp", "expr": "60"},
    {"type": "formula", "field": "theta", "expr": "d.startAngle + 0.5 *(d.endAngle - d.startAngle) - 1.57079633"},
    {"type": "formula", "field": "x_mid", "expr": "200"},
    {"type": "formula", "field": "y_mid", "expr": "200"},
    {"type": "formula", "field": "x", "expr": "d.x_mid + (d.hyp * Math.cos(d.theta))"},
    {"type": "formula", "field": "y", "expr": "d.y_mid + (d.hyp * Math.sin(d.theta))"}
      ]
    }
  ],
  "scales": [
    {
      "name": "r",
      "type": "sqrt",
      "domain": {"data": "table", "field": "data"},
      "range": [20, 100]
    }
  ],
  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"group": "width", "mult": 0.5},
          "y": {"group": "height", "mult": 0.5},
          "startAngle": {"field": "startAngle"},
          "endAngle": {"field": "endAngle"},
          "innerRadius": {"value": 20},
          "outerRadius": {"scale": "r"},
          "stroke": {"value": "#fff"}
        },
        "update": {
          "fill": {"value": "#ccc"}
        },
        "hover": {
          "fill": {"value": "pink"}
        }
      }
    },
    {
    "type": "text",
    "from": {"data": "table"},
    "properties": {
        "enter": {
        "y": {"field": "y"},
        "x": {"field": "x"},
        "fill": {"value": "black"},
        "align": {"value": "center"},
        "baseline": {"value": "middle"},
        "text": {"field": "data"}
        }
    }
    }
  ]
}

Cheers,

Kev

----------------------------
www.dataunity.org