Donut chart

A simple donut chart with embedded data.

Spec & Code

Spec

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "description": "A simple donut chart with embedded data.",
  "data": {
    "values": [
      {
        "category": 1,
        "value": 4
      },
      {
        "category": 2,
        "value": 6
      },
      {
        "category": 3,
        "value": 10
      },
      {
        "category": 4,
        "value": 3
      },
      {
        "category": 5,
        "value": 7
      },
      {
        "category": 6,
        "value": 8
      }
    ]
  },
  "mark": {
    "type": "arc",
    "innerRadius": 50
  },
  "encoding": {
    "theta": {
      "field": "value",
      "type": "quantitative"
    },
    "color": {
      "field": "category",
      "type": "nominal"
    }
  }
}

Usage

import { olliVis } from 'olli';
import { VegaLiteAdapter } from 'olli/adapters';

// vlSpec is your Vega-Lite specification (shown above)
const olliSpec = await VegaLiteAdapter(vlSpec);
olliVis(olliSpec, document.getElementById('olli-tree'));