CODEWITHSUNDEEP
vega-lite
steve257
steve257

Reputation: 77

How do I highlight specific bar/s using vega-lite

New to vega-lite. How do I highlight specific bar/s using vega-lite.

For example, how do I highlight the bars for Documentary and Drama in red (eg ...#dd2525) leaving the remaining bars (grey #4682b4). Thanks.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 200,
  "height": {"step": 16},
  "data": {"url": "data/movies.json"},
  "encoding": {
    "y": {
      "field": "Major Genre",
      "type": "nominal",
      "axis": null
    }
  },
  "layer": [{
    "mark": {"type": "bar", "color": "#ddd"},
    "encoding": {
      "x": {
        "aggregate": "mean",
        "field": "IMDB Rating",
        "scale": {"domain": [0, 10]},
        "title": "Mean IMDB Ratings"
      }
    }
  }, {
    "mark": {"type": "text", "align": "left", "x": 5},
    "encoding": {
      "text": {"field": "Major Genre"},
      "detail": {"aggregate": "count"}
    }
  }]
}

Upvotes: 0

Views: 618

Answers (1)

wahab memon
wahab memon

Reputation: 2416

Add params as select and use the param name as condition in encoding. Check documentation for more.

Below is the code snippet or refer editor.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 200,
  "height": {"step": 19},
  "data": {"url": "data/movies.json"},
  "encoding": {"y": {"field": "Major Genre", "type": "nominal", "axis": null}},
  "layer": [
    {
      "params": [
        {"select": {"encodings": ["y"], "type": "point"}, "name": "barSelect"}
      ],
      "mark": {"type": "bar", "color": "#ddd"},
      "encoding": {
        "x": {
          "aggregate": "mean",
          "field": "IMDB Rating",
          "scale": {"domain": [0, 10]},
          "title": "Mean IMDB Ratings"
        },
        "color": {
          "condition": {"param": "barSelect", "value": "red", "empty": false},
          "value": "#ddd"
        }
      }
    },
    {
      "mark": {"type": "text", "align": "left", "x": 5},
      "encoding": {
        "text": {"field": "Major Genre"},
        "detail": {"aggregate": "count"}
      }
    }
  ]
}

Edit

For a static view without changing the color on click, you can simply provide the field and value in condition for which you want to apply colors. Refer the below snippet or editor

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 200,
  "height": {"step": 19},
  "data": {"url": "data/movies.json"},
  "encoding": {"y": {"field": "Major Genre", "type": "nominal", "axis": null}},
  "layer": [
    {
      "mark": {"type": "bar", "color": "#ddd"},
      "encoding": {
        "x": {
          "aggregate": "mean",
          "field": "IMDB Rating",
          "scale": {"domain": [0, 10]},
          "title": "Mean IMDB Ratings"
        },
        "color": {
          "condition": [
            {
              "value": "red",
              "test": {"field": "Major Genre", "oneOf": ["Drama", "Documentary"]}
            }
          ],
          "value": "#ddd"
        }
      }
    },
    {
      "mark": {"type": "text", "align": "left", "x": 5},
      "encoding": {
        "text": {"field": "Major Genre"},
        "detail": {"aggregate": "count"}
      }
    }
  ]
}

Upvotes: 1

Related Questions