Creating interactive pie chart in vegalite

Mahesha999 0
Viewed 26

I wanted to create interactive pie chart in vega-lite. This is what I have tried:

vegaEmbed("#pie-chart", {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie 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}
    ]
  },
  "params": [
    {
      "name": "highlight",
      "select": {"type": "point", "on": "mouseover"}
    }
  ],
  "mark": { "type": "arc", "stroke": "white", "cursor":"pointer" },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "tooltip": [{"field": "value", "title": "Participation %" }],
    "color": {"field": "category", "type": "nominal"},
    "fillOpacity": {
      "condition": [{"param": "highlight", "value": 1}],
      "value": 0.3
    },
    "strokeWidth": {
      "condition": [
        {
          "param": "highlight",
          "empty": false,
          "value": 5
        }
      ],
      "value": 0
    }
  }
}
);
<!DOCTYPE html>
<html>

<head>
  <title>Data visualizer</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>

<body>
  <span id="pie-chart"></span>
</body>
</html>

If you hover on above chart, it somewhat highlights the slice hovered and increases white space between hovered slice and its neighbours. But this is not clean as the white space is achieved by increasing stroke width which spills inside other slices.

I want the slice to come out (more white space between slices and increases outer radius) on hover, something like this:

enter image description here

I tried following for radius:

vegaEmbed("#pie-chart", {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie 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}
    ]
  },
  "params": [
    {
      "name": "highlight",
      "select": {"type": "point", "on": "mouseover"}
    }
  ],
  "mark": { "type": "arc", "stroke": "white", "cursor":"pointer" },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "tooltip": [{"field": "value", "title": "Participation %" }],
    "color": {"field": "category", "type": "nominal"},
    "fillOpacity": {
      "condition": [{"param": "highlight", "value": 1}],
      "value": 0.3
    },
    "strokeWidth": {
      "condition": [
        {
          "param": "highlight",
          "empty": false,
          "value": 5
        }
      ],
      "value": 0
    }, 
    "radius": {
      "condition": [ //Property condition is not allowed.
        {
          "param": "highlight",
          "empty": false,
          "value": 5
        }
      ],
      "value": 0
    }
  }
}
);
<!DOCTYPE html>
<html>

<head>
  <title>Data visualizer</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>

<body>
  <span id="pie-chart"></span>
</body>
</html>

Is it possible to achieve the same with vega-lite?

vega-embed vega-lite javascript
0 Answers
Related