Search code examples
vega-litevega

How to display the aggregated sum value inside a pie chart with different color?


I could get the value of each brand inside the pie chart by adjusting the radius, but I could not change the color without causing the whole pie chart to be black. I believe that I might need to transform for the sum of each brand, but getting the correct value in the correct position seems to be my main issue.

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with labels.",
  "height": 500,
  "width": 500,
  "data": {
    "values": [
      {"date": "4/15/2020", "brand": "Body Care", "mentions": 8599},
      {"date": "4/7/2020", "brand": "Makeup", "mentions": 9090},
      {"date": "6/29/2020", "brand": "Body Care", "mentions": 4563},
      {"date": "11/7/2020", "brand": "Skincare", "mentions": 3369},
      {"date": "10/10/2020", "brand": "Fragrance", "mentions": 7025},
      {"date": "10/25/2020", "brand": "Skincare", "mentions": 3523},
      {"date": "2/21/2020", "brand": "Fragrance", "mentions": 7976},
      {"date": "3/2/2020", "brand": "Hair", "mentions": 1463},
      {"date": "8/19/2020", "brand": "Fragrance", "mentions": 1912},
      {"date": "10/14/2020", "brand": "Fragrance", "mentions": 6804},
      {"date": "5/7/2020", "brand": "Makeup", "mentions": 4264},
      {"date": "8/4/2020", "brand": "Fragrance", "mentions": 9007},
      {"date": "9/17/2020", "brand": "Fragrance", "mentions": 5876},
      {"date": "1/12/2020", "brand": "Fragrance", "mentions": 5675},
      {"date": "7/17/2020", "brand": "Skincare", "mentions": 2555},
      {"date": "1/29/2020", "brand": "Body Care", "mentions": 6824},
      {"date": "9/19/2020", "brand": "Hair", "mentions": 3109},
      {"date": "2/4/2020", "brand": "Body Care", "mentions": 5807},
      {"date": "4/15/2020", "brand": "Fragrance", "mentions": 4999}
    ]
  },
  "encoding": {
    "theta": {
      "field": "mentions",
      "type": "quantitative",
      "stack": true,
      "aggregate": "sum"
    },
    "color": {
      "field": "brand",
      "type": "nominal",
      "legend": null,
      "scale": {"range": "category"}
    }
  },
  "layer": [
    {"mark": {"type": "arc", "outerRadius": 200}},
    {
      "mark": {"type": "text", "radius": 250, "fontSize": 16},
      "encoding": {"text": {"field": "brand", "type": "nominal"}, "color": {}}
    },
    {
      "mark": {"type": "text", "radius": 300, "color": "blue"},
      "encoding": {
        "text": {
          "field": "mentions",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"field": "brand", "type": "nominal"}
      }
    }
  ],
  "view": {"stroke": null}
}

Solution

  • You can move the "color" encoding into the layer where you want it to apply, and then use a "detail" encoding to group the text without adding a color scale (view in editor):

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
      "description": "A simple pie chart with labels.",
      "height": 500,
      "width": 500,
      "data": {
        "values": [
          {"date": "4/15/2020", "brand": "Body Care", "mentions": 8599},
          {"date": "4/7/2020", "brand": "Makeup", "mentions": 9090},
          {"date": "6/29/2020", "brand": "Body Care", "mentions": 4563},
          {"date": "11/7/2020", "brand": "Skincare", "mentions": 3369},
          {"date": "10/10/2020", "brand": "Fragrance", "mentions": 7025},
          {"date": "10/25/2020", "brand": "Skincare", "mentions": 3523},
          {"date": "2/21/2020", "brand": "Fragrance", "mentions": 7976},
          {"date": "3/2/2020", "brand": "Hair", "mentions": 1463},
          {"date": "8/19/2020", "brand": "Fragrance", "mentions": 1912},
          {"date": "10/14/2020", "brand": "Fragrance", "mentions": 6804},
          {"date": "5/7/2020", "brand": "Makeup", "mentions": 4264},
          {"date": "8/4/2020", "brand": "Fragrance", "mentions": 9007},
          {"date": "9/17/2020", "brand": "Fragrance", "mentions": 5876},
          {"date": "1/12/2020", "brand": "Fragrance", "mentions": 5675},
          {"date": "7/17/2020", "brand": "Skincare", "mentions": 2555},
          {"date": "1/29/2020", "brand": "Body Care", "mentions": 6824},
          {"date": "9/19/2020", "brand": "Hair", "mentions": 3109},
          {"date": "2/4/2020", "brand": "Body Care", "mentions": 5807},
          {"date": "4/15/2020", "brand": "Fragrance", "mentions": 4999}
        ]
      },
      "encoding": {
        "theta": {
          "field": "mentions",
          "type": "quantitative",
          "stack": true,
          "aggregate": "sum"
        }
      },
      "layer": [
        {
          "mark": {"type": "arc", "outerRadius": 200},
          "encoding": {
            "color": {
              "field": "brand",
              "type": "nominal",
              "legend": null,
              "scale": {"range": "category"}
            }
          }
        },
        {
          "mark": {"type": "text", "radius": 250, "fontSize": 16},
          "encoding": {"text": {"field": "brand", "type": "nominal"}}
        },
        {
          "mark": {"type": "text", "radius": 300, "color": "blue"},
          "encoding": {
            "text": {
              "field": "mentions",
              "type": "quantitative",
              "aggregate": "sum"
            },
            "detail": {"field": "brand", "type": "nominal"}
          }
        }
      ],
      "view": {"stroke": null}
    }
    

    enter image description here