Search code examples
jsonchartsvisualizationvega-litevega

vega add custom bar plot below a chart

Suppose I have the following plot:

enter image description here

I want to add bar plot below the main plot in vega. For example, I want regimen1 to be a bar plot from -10 to 5 with blue color and then 5 to 20 with red color. Something like the following picture:

enter image description here

I was able to add a bar plot below, but I wasn't able to do several things:

  1. stack bar horizontally with the same x field
  2. add a new bar for different x field
  3. Have it proportional to the x axis of the upper plot.

Vega code:

    {
  "config": {"view": {"stroke": null}},
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Two vertically concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
  
  "vconcat": [
    {
      "data": {
      "url": "data/weather.csv"},
      "transform": [{
        "filter": "datum.location === 'Seattle'"
        }],
      "mark": "point",
      "encoding": {
        "x": {
          "field": "temp_min",
          "type": "quantitative",
          "bin": true
        },
        "y": {
          "field": "temp_max",
          "type": "quantitative",
          "bin": true
        },
        "size": {
          "aggregate": "count",
          "type": "quantitative"
        }
      }
    },
    {
      "data": {
        "name": "table2",
        "values": [
          {"x": "regimen1", "y": 15},
          {"x": "regimen2", "y": 30}]},
      "mark": "bar",
      "encoding": {
        "x": {
          "field": "x",
          "type": "nominal",
          "title": null,
          "axis": {"domain": false, "grid": false, "ticks": false, "labels": false}
        },
        "y": {
          "field": "x",
          "type": "ordinal",
          "title": null,
          "axis": {"domain": false, "grid": false, "ticks": false}
        }
      }
    }
    
  ]
}
Solution

  • Like this?

    enter image description here

    {
  "config": {"view": {"stroke": null}},
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Two vertically concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
  "vconcat": [
    {
      "data": {"url": "data/weather.csv"},
      "transform": [{"filter": "datum.location === 'Seattle'"}],
      "mark": "point",
      "encoding": {
        "x": {"field": "temp_min", "type": "quantitative", "bin": true},
        "y": {"field": "temp_max", "type": "quantitative", "bin": true},
        "size": {"aggregate": "count", "type": "quantitative"}
      }
    },
    {
      "data": {
        "name": "table2",
        "values": [
          {"y": "regimen1", "x": -10, "x2": 5, "type": 1},
          {"y": "regimen1", "x": 5, "x2": 20, "type": 2},
          {"y": "regimen2", "x": -10, "x2": 15, "type": 1},
          {"y": "regimen2", "x": 15, "x2": 20, "type": 2}
        ]
      },
      "mark": "bar",
      "encoding": {
        "x": {"field": "x", "type": "quantitative", "title": null},
        "x2": {"field": "x2"},
        "color": {
          "field": "type",
          "legend": null,
          "scale": {"range": ["#a4c2f4", "#741b47"]}
        },
        "y": {"field": "y", "type": "ordinal", "title": null}
      }
    }
  ]
}