bar_labels_CF_avgline

bar_labels_CF_avgline.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "name": "vl_bar_minmax_avgline_labels_v1",
  "description": "A simple bar chart with conditional coloring for the highest and lowest values and data labels.",
  "width": 350,
  "data": {
    "values": [
      {"a": "A", "b": 2800000},
      {"a": "B", "b": 5500000},
      {"a": "C", "b": 4300000},
      {"a": "G", "b": 1900000},
      {"a": "H", "b": 8700000},
      {"a": "I", "b": 5200000},
      {"a": "D", "b": 9100000},
      {"a": "E", "b": 8100000},
      {"a": "F", "b": 5300000}
    ]
  },
  "transform": [
    {
      "window": [
        {"op": "max", "field": "b", "as": "max_b"},
        {"op": "min", "field": "b", "as": "min_b"},
        {"op": "average", "field": "b", "as": "avg_b"}
      ],
      "frame": [null, null]
    }
  ],
  "encoding": {
    "x": {
      "field": "a",
      "type": "nominal",
      "axis": {
        "title": "Category",
        "labelAlign": "center",
        "labelAngle": 0
      }
    },
    "y": {
      "field": "b",
      "type": "quantitative",
      "axis": {
        "title": "Value",
        "labelPadding": 5,
        "format": "~s" // D3 format
      }
    },
    "color": {
      "condition": [
        {"test": "datum.b === datum.max_b", "value": "limegreen"},
        {"test": "datum.b === datum.min_b", "value": "red"}
      ],
      "value": "#404040"
    }
  },
  "layer": [
    {"mark": {"type": "bar"}, 
    "encoding": {"stroke": {
      "condition": [
        {"test": "datum.b === datum.max_b", "value": "darkgreen"},
        {"test": "datum.b === datum.min_b", "value": "firebrick"}
      ],
      "value": "transparent"
    }}
    },
    {
      "mark": {"type": "text", "dy": -10, "fontWeight": "bold"},
      "encoding": {

        "text": {
          "field": "b",
          "type": "quantitative",
          "format": "~s" // D3 format
        },
        "color": {"value": "black"}
      }
    },
    {"mark": {"type": "line", "stroke": "orange", "opacity": 0.7}, 
    "encoding": {
      "y": {
        // "aggregate": "mean", 
        "field": "avg_b"
      }
    }
   }
  ]
}