How Do You Create Stunning Pie and Donut Charts with Vega-Lite Arc Marks?

Have you ever wanted to visualize your data in a more engaging and circular way? In this guide, we’ll show you how to create eye-catching pie and donut charts using Vega-Lite's arc marks. Whether you’re a data enthusiast or a seasoned analyst, we’ve got you covered with step-by-step examples and explanations that make this process a breeze.

What is an Arc Mark?

Arc marks are essentially circular arcs defined by a center point with angular and radial extents. They're super useful for creating radial plots like pie and donut charts. Imagine slicing up a pizza; each slice represents a part of your data. Cool, right?

Properties of Arc Marks

Here’s the basic structure to define an arc mark in Vega-Lite:

{
  "data": ... ,
  "mark": "arc",
  "encoding": ... ,
  ...
}

An arc mark has several properties, and here are some key ones you might use:

• radius: The outer radius of the arc.
• innerRadius: The inner radius of the arc (useful for donut charts).
• theta: The angle extent of the arc.
• cornerRadius: Round the corners of the arc.
• padAngle: Padding between arcs.

Example: Pie Chart

Want to create a classic pie chart? Simply encode theta for the angle and color to differentiate the slices.

{
  "data": ...,
  "mark": "arc",
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  }
}

Here's what it would look like:

Example: Donut Chart

Transform that pie chart into a donut chart by setting the innerRadius property.

{
  "data": ...,
  "mark": {
    "type": "arc",
    "innerRadius": 50
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  }
}

Check out this sweet donut chart:

Adding Labels

Want to add text labels to your pie or donut chart? Easy! Just add a text layer.

{
  "layer": [
    {
      "mark": "arc",
      "encoding": {
        "theta": {"field": "value", "type": "quantitative"},
        "color": {"field": "category", "type": "nominal"}
      }
    },
    {
      "mark": "text",
      "encoding": {
        "text": {"field": "category", "type": "nominal"},
        "theta": {"field": "value", "type": "quantitative", "stack": "true"}
      }
    }
  ]
}

Adding Tooltips

Enhance your pie chart with interactive tooltips for better data insights by simply setting tooltip: true.

{
  "mark": {
    "type": "arc",
    "tooltip": true
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  }
}

This will show the actual value of each slice when you hover over it.

Arc Configuration

You can set default properties for arc marks in the top-level config:

{
  "config": {
    "arc": {
      "cornerRadius": 10,
      "padAngle": 0.1
    }
  }
}

These defaults will apply unless overridden by specific mark properties.

Faceted Pie Charts

Create faceted pie charts by making each facet independent. This allows for a side-by-side comparison of different categories.

{
  "facet": {"field": "category", "type": "nominal"},
  "spec": {
    "mark": "arc",
    "encoding": {
      "theta": {"field": "value", "type": "quantitative"},
      "color": {"field": "subcategory", "type": "nominal"}
    }
  }
}

This creates a pie chart for each category, making it easy to compare them.

FAQ

Q: How do I make a pie chart into a donut chart? A: Just set the innerRadius property to a non-zero value in your arc mark definition.

Q: Can I add labels to my pie chart? A: Absolutely! Add a text layer to your chart to include labels.

Q: How do I show tooltips on my pie chart? A: You can enable tooltips by setting tooltip: true in your mark definition and you’ll see the actual values upon hovering over the slices.

With these examples and explanations, you’re well on your way to crafting beautiful and informative pie and donut charts with Vega-Lite's arc marks. Happy visualizing!