vega-litekibana-7

Dynamic text mark as title in vega-lite


I have a concat view in vega-lite (kibana) where the first bar plot serves as a selection for the other plots. So if I click in one bar of the bar plot, all other visualizations change accordingly.I also have a dropdown with the same goal.

I would like to have a dynamic title (or text mark) that shows the y label of the bar that I just clicked (or the name in the dropdown). So far I managed to do so, however if there are no selections for the bar, all labels will appear in the same title, which is not great.

I thought that maybe initializing the parameter with a certain value would solve the issue, but if I click in between bars, all values appear and I have the same issue with the title. Furthermore, I would like all bars to be always visible, and just change the opacity of the bar that is clicked.

Below you can find a simplified version of what I mean,

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
  "data": {"url": "data/weather.csv"},
  "hconcat": [
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "location", "type": "nominal"},
        "x": {"aggregate": "mean", "field": "precipitation"},
        "opacity":{"condition":{"param":"click","value":0.2},"value":0.7}
      },
      "params":[{
        "name":"click",
        "select":{"type":"point","encodings":["y"], "on":"click"},
        "bind":{"input":"select","options":["New York", "Seattle"]},
        "value":{"y":"Seattle"}
      },
      {
        "name":"highlight",
        "select":{"type":"point"}
      }
      ],
      "transform":[{"filter":{"param":"click"}}]
    },
    {"layer":[{
      "transform":[{"filter":{"param":"click"}}],
      "mark":"bar",
      "mark":{"type":"text","dy":-50, "dx":30, "fontSize":20},
      "encoding":{"text":{"field":"location","type":"nominal"}}
      
    }]},
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "temp_min", "bin": true},
        "y": {"field": "temp_max", "bin": true},
        "size": {"aggregate": "count"}
      },
      "transform":[{"filter":{"param":"click"}}]
    }
  ]
}

vega editor

As usual, any help will be more than welcome!


Solution

  • Following are the changes required:

    1. To show both the bars, remove the filter transform from bar chart.
    2. Added some changes in click params like if someone clicks on empty space, then nearest bar will be selected and changed values for opacity.

    Refer the editor or the below code:

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
      "data": {"url": "data/weather.csv"},
      "hconcat": [
        {
          "mark": "bar",
          "encoding": {
            "y": {"field": "location", "type": "nominal"},
            "x": {"aggregate": "mean", "field": "precipitation"},
            "opacity": {
              "condition": {"param": "click", "value": 0.7, "empty": false},
              "value": 0.2
            }
          },
          "params": [
            {
              "name": "click",
              "select": {
                "type": "point",
                "encodings": ["y"],
                "on": "click",
                "clear": false,
                "nearest": true
              },
              "bind": {"input": "select", "options": ["New York", "Seattle"]},
              "value": "Seattle"
            },
            {"name": "highlight", "select": {"type": "point"}}
          ]
        },
        {
          "mark": "point",
          "title": {"text": {"expr": "click_location"}},
          "encoding": {
            "x": {"field": "temp_min", "bin": true},
            "y": {"field": "temp_max", "bin": true},
            "size": {"aggregate": "count"}
          },
          "transform": [{"filter": {"param": "click"}}]
        }
      ]
    }