Removing boxes around Arcs in Sunbursts

[Rachel Thoms]

Hello,

Does anyone know of a way to remove bounding boxes from appearing when hovering over the arcs marks in a sunburst diagram? I've attached a screenshot of before and after hovering over the chart area.

{

  "$schema": "https://vega.github.io/schema/vega/v5.json",

  "description": "An example of a space-fulling radial layout for hierarchical data.",

  "width": 500,

  "height": 300,

  "padding": 5,

  "autosize": "none",

  "signals": [

    {

      "name": "year",

      "value": 2018,

      "bind": {"input": "range", "min": 1961, "max": 2018, "step": 1}

    }

  ],

  "data": [

    {

      "name": "table",

      "url": "https://wri-rw.carto.com/api/v2/sql?q= SELECT alias.iso as gid_0, data.area, year, item as id, parent, size, value as protein, analysis_category, product FROM (SELECT * FROM foo_061_rw1_blue_food_supply_edit) data INNER JOIN ow_aliasing_countries AS alias ON alias.alias = data.area WHERE iso='NAM' ORDER BY analysis_category ASC, id ASC",

      "format": {"type": "json", "property": "rows"},

      "transform": [

        {"type": "filter", "expr": "datum.year==year"},

        {"type": "stratify", "key": "id", "parentKey": "parent"},

        {

          "type": "partition",

          "field": "size",

          "sort": {"field": ["analysis_category"]},

          "size": [{"signal": "2 * PI"}, {"signal": "width/4"}],

          "as": ["a0", "r0", "a1", "r1", "depth", "children"],

          "padding": 0

        }

      ]

    }

  ],

  "scales": [

    {

      "name": "legend",

      "type": "ordinal",

      "domain": [

        "Total food supply",

        "Pressure-generating, land-sourced foods",

        "Ocean-sourced foods",

        "Other land-sourced foods"

      ],

      "range": ["#f3b229", "#f5c93a", "#2670a5", "#e8d59a"]

    },

    {

      "name": "blues",

      "type": "linear",

      "domain": {"data": "table", "field": "depth"},

      "range": ["#2670a5", "#3d7fae", "#538fb7", "#699fc0"],

      "domainMin": 1,

      "reverse": false

    },

    {

      "name": "greys",

      "type": "ordinal",

      "domain": {"data": "table", "field": "depth"},

      "range": ["#f2e2b2", "#f7e9be", "#fcf0ca", "#e8d59a"]

    },

    {

      "name": "oranges",

      "type": "linear",

      "domain": {"data": "table", "field": "depth"},

      "range": ["#f3b229", "#f4c141", "#f5c93a", "#f6d544", "#f6e04e"],

      "domainMin": 1,

      "reverse": false

    },

    {

      "name": "opacity",

      "type": "linear",

      "domain": {"data": "table", "field": "depth"},

      "domainMin": 1,

      "reverse": true,

      "range": [0.85, 1]

    }

  ],

  "marks": [

    {

      "type": "arc",

      "from": {"data": "table"},

      "encode": {

        "enter": {

          "x": {"signal": "width/3"},

          "y": {"signal": "height/2"},

          "zindex": {"value": 1},

          "opacity": [

            {"test": "test(/Secondary/, datum.product)", "value": 0.5},

            {"value": 1}

          ],

          "fill": [

            {

              "scale": {

                "signal": "(datum.analysis_category === 'Other Land-Sourced Foods' ? 'greys': datum.analysis_category === 'Ocean-Sourced Foods' ? 'blues' : 'oranges')"

              },

              "field": "depth"

            }

          ],

          "tooltip": {

            "signal": "split(datum.id,'_')[0] + (datum.protein ? ': ' + format((datum.protein), '.1f') + ' g/capita/day' : '')"

          }

        },

        "update": {

          "startAngle": {"field": "a0"},

          "endAngle": {"field": "a1"},

          "innerRadius": {"field": "r0"},

          "outerRadius": {"field": "r1"},

          "stroke": {"value": "white"},

          "strokeWidth": {"value": 0.5},

          "zindex": {"value": 1}

        },

        "hover": {

          "stroke": {"value": "red"},

          "strokeWidth": {"value": 2},

          "zindex": {"value": 0}

        }

      }

    }

  ],

  "legends": [

    {

      "title": ["Sources of Protein"],

      "orient": "none",

      "legendX": {"signal": "width*.65"},

      "legendY": {"signal": "height*.4"},

      "type": "symbol",

      "fill": "legend",

      "titleFontSize": {"signal": "width/40"},

      "titleFont": "Arial",

      "labelFontSize": {"signal": "width/50"},

      "labelFont": "Arial",

      "clipHeight": 16,

      "encode": {

        "labels": {

          "interactive": true,

          "enter": {"tooltip": {"signal": "datum.label"}},

          "update": {"fill": {"value": "grey"}},

          "hover": {"fill": {"value": "firebrick"}}

        }

      }

    }

  ]

}

Link to vega editor.

Thanks in advance!