jsonvisualizationvega-litevegavega-lite-api

First bar highlight by a specific color in VegaLite Bar chart

I want to create a bar chart in vegalite for top 10 performance students but highest score student at the starting must be with specific color rest all remain same . I want this independent of data mean if data change it does not. Is there any way to as i am getting sorting data i can play with indexing of data. If this possible with any expr or condition in Vegalite . Is this thing can be controlled by param any how.Editor link

Solution

  • enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"student": "A", "marks": 98},
      {"student": "B", "marks": 95},
      {"student": "C", "marks": 90},
      {"student": "D", "marks": 85},
      {"student": "E", "marks": 81},
      {"student": "F", "marks": 78},
      {"student": "G", "marks": 75},
      {"student": "H", "marks": 74},
      {"student": "I", "marks": 71}
    ]
  },
  "transform": [
    {
      "sort": [
        {"field": "marks", "order": "descending"}
      ],
      "window": [{"op": "rank", "as": "rank"}]
    }
  ],
  "mark": {
    "type": "bar",
    "color": {"expr": "datum.rank==1 ? 'gold' : 'silver'"}
  },
  "encoding": {
    "x": {"field": "student", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "marks", "type": "quantitative"}
  }
}