gistfile1.txt

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json"
,  "description": "A population pyramid for Energy Consumption over Years",
"data": { "url": "https://raw.githubusercontent.com/mkeutgen/dataviz_energy/main/Sub-Meansumry2_LOG.csv", "format":{"type":"csv"}},

 "params": [{
    "name": "filter", "value":"Africa",
    "select": {"type": "point", "fields": ["continent"]},
    "bind": {"input": "select", "options": ["Africa", "Americas", "Asia", "Europe", "Oceania"]}
  }],

 "transform": [
    {"filter":{ "field":"energy_type" , "oneOf":["fossil", "low_carbon"]}},
    {"filter":{"param":"filter"}}
    ],

  "spacing": 0,
  "hconcat": [{
    "transform": [{
      "filter": {"field": "energy_type", "equal": "fossil"}
    }],
    "title": "Fossil",
    "mark": "bar",
    "encoding": {
      "y": {
        "field": "year", "axis": null, "sort": "ascending"
      },

      "x": {
        "field": "logmeanconsmp", "type":"quantitative",
        "title": "Log Mean Consumption",
        "axis": {"format": "s"},
        "sort": "descending",
        "scale":{"domain":[0,9]}
      },

      "color": {
        "field": "energy_type",
        "scale": {"range": ["#675193", "#ca8861"]},
        "legend": null
      }
    }
  }, {
    "width": 20,
    "view": {"stroke": null},
    "mark": {
      "type": "text",
      "align": "center"
    },
    "encoding": {
      "y": {"field": "year", "type": "ordinal", "axis": null, "sort": "ascending"},
      "text": {"field": "year", "type": "quantitative"}
    }
  }, {
    "transform": [{
      "filter": {"field": "energy_type", "equal": "low_carbon"}
    }],
    "title": "Low Carbon",
    "mark": "bar",
    "encoding": {
      "y": {
        "field": "year", "title": null,
        "axis": null, "sort": "ascending"
      },
      "x": {
        "field": "logmeanconsmp", "type":"quantitative",
        "title": "Log Mean Consumption",
        "axis": {"format": "s"},
        "scale":{"domain":[0,9]}
      },
      "color": {
        "field": "energy_type"}
      }
    }
  ],

  "config": {
    "view": {"stroke": null},
    "axis": {"grid": true}
  }
}