Help enhancing bubble chart

[Gustavo_Llermaly]

Hello. I was able to create a Bubble Chart using Vega, but I need to do the following enhancements;

• Add click bubble to filter
• Add hover legend text to highlight bubble
• Add "kilo" format to X axis (100.000 => 100K) worked with tooltip but not with X axis

I understand that to add click to filter I need to change from vega-lite to vega but couldnt make it work.

This is what I have so far :

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": "Unique name values, ICT(average), Record Count by Tags",
  "data": {
    "url": {
      "%context%": true,
      "index": "interactions",
      "body": {
        "aggs": {
          "personal_tag": {
            "terms": {"field": "personal_tags", "size": 20},
            "aggs": {
              "associated_unique": {"cardinality": {"field": "associate_name"}},
              "ict": {"avg": {"field": "cycle_time"}}
            }
          }
        },
        "size": 0
      }
    },
    "format": {"property": "aggregations.personal_tag.buckets"}
  },
  "mark": {"type": "circle", "cursor": "pointer", "name": "point"},
  "encoding": {
    "tooltip": [
      {"field": "key", "type": "nominal", "title": "Personal Tags"},
      {
        "field": "ict.value",
        "type": "quantitative",
        "title": "ICT (average)",
        "format": ".2f"
      },
      {
        "field": "associated_unique.value",
        "type": "quantitative",
        "title": "Associate Uniq."
      },
      {"field": "doc_count", "type": "quantitative", "title": "Records"}
    ],
    "x": {
      "field": "ict.value",
      "type": "quantitative",
      "axis": {"title": "ICT(avg)"},
      "scale": {"zero": false}
    },
    "y": {
      "field": "associated_unique.value",
      "type": "quantitative",
      "axis": {"title": "Associate Name (unique values)"}
    },
    "size": {"field": "doc_count", "type": "quantitative", "legend": false},
    "color": {"field": "key", "type": "nominal", "title": "Personal Tags"}
  }
}

Thanks

[Andrew_Tate (Drew Tate)]

Hi @Gustavo_Llermaly ,

You're right—you need to use Vega instead of Vega-Lite which unfortunately means more work for you.

Here is an example close to yours based off the Kibana sample flights data. The aggregation structure is the same and the response structure will be also, though I named the sub aggregation "avg" instead of "ict".

Clicking a point on the graph will add a filter to only see that flight carrier. Not terribly useful in and of itself, but you should be able to adapt it to your needs.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "title": "ICT (average) Record Count by Group",
  "data": {
    name: "datasource",
    "url": {
      "%context%": true,
      "index": "kibana_sample_data_flights",
      "body": {
        "aggs": {
          "groups": {
            "terms": {"field": "Carrier", "size": 15},
            "aggs": {
              "avg": {"avg": {"field": "AvgTicketPrice"}}
            }
          }
        },
        "size": 0
      }
    },
    "format": {"property": "aggregations.groups.buckets"}
  },
 
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "domain": { data: "datasource", "field": "doc_count"},
      "range": "width",
      "zero": false
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": {"data": "datasource", "field": "avg.value"},
      "nice": true,
      "range": "height",
      "zero": false
    }
  ],

  "axes": [
    { "orient": "bottom", "scale": "xscale", "title": "Records" },
    { "orient": "left", "scale": "yscale", "title": "Ticket Price (avg)" }
  ],

  "marks": [
    {
      "type": "symbol",
      "name": "point",
      "from": {"data":"datasource"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "doc_count"},
          "y": {"scale": "yscale", "field": "avg.value"},
          "size": {"value": 300},
          "opacity": { "value": 0.7},
          "tooltip":  {"signal": "{'Group': datum.key, 'Ticket Price(avg)': '$' + format(datum.avg.value, '0.2f'), 'Records': datum.doc_count}"},
          cursor: { value: "pointer" }
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {
          "fill": {"value": "red"}
        }
      }
    }
  ],

  signals: [
    {
      name: point_click
      on: [{
        events: {
          source: scope
          type: click
          markname: point
        }
        update: '''kibanaAddFilter({'match_phrase': {'Carrier': datum.key}})'''
      }]
    }
  ]
}