Vega map and histogram

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "spacing": 24,
  "title": {
    "text": "Linked Map and Plots",
    "anchor": "start",
    "fontSize": 16,
    "subtitle": "Clic pour filtrer, double-clic pour réinitialiser"
  },
  "datasets": {
    "cities": [
      {
        "name": "Paris",
        "lon": 2.3522,
        "lat": 48.8566,
        "category": "Climate",
        "activity": "model"
      },
      {
        "name": "Lyon",
        "lon": 4.8357,
        "lat": 45.764,
        "category": "Ocean",
        "activity": "observation"
      },
      {
        "name": "Marseille",
        "lon": 5.3698,
        "lat": 43.2965,
        "category": "Ocean",
        "activity": "model"
      },
      {
        "name": "Bordeaux",
        "lon": -0.5792,
        "lat": 44.8378,
        "category": "Climate",
        "activity": "observation"
      },
      {
        "name": "Lille",
        "lon": 3.0573,
        "lat": 50.6292,
        "category": "Geology",
        "activity": "observation"
      },
      {
        "name": "Nantes",
        "lon": -1.5536,
        "lat": 47.2184,
        "category": "Biology",
        "activity": "model"
      },
      {
        "name": "Toulouse",
        "lon": 1.4442,
        "lat": 43.6047,
        "category": "Climate",
        "activity": "observation"
      },
      {
        "name": "Strasbourg",
        "lon": 7.7521,
        "lat": 48.5734,
        "category": "Geology",
        "activity": "model"
      },
      {
        "name": "Nice",
        "lon": 7.262,
        "lat": 43.7102,
        "category": "Biology",
        "activity": "observation"
      }
    ]
  },
  "config": {"view": {"stroke": "#d1d5db"}, "background": "white"},
  "resolve": {"scale": {"color": "independent"}},
  "hconcat": [
    {
      "width": 420,
      "height": 420,
      "projection": {"type": "mercator", "center": [-5, 51.5], "scale": 1600},
      "layer": [
        {
          "data": {
            "url": "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json",
            "format": {"type": "topojson", "feature": "countries"}
          },
          "transform": [{"filter": "datum.id == 250"}],
          "mark": {
            "type": "geoshape",
            "fill": "#dddddd",
            "stroke": "#8f8f8f",
            "strokeWidth": 2
          }
        },
        {
          "data": {"name": "cities"},
          "params": [
            {
              "name": "selCity",
              "select": {
                "type": "point",
                "fields": ["name"],
                "on": "click",
                "clear": "dblclick"
              }
            }
          ],
          "transform": [
            {"filter": {"param": "selCategory", "empty": true}},
            {"filter": {"param": "selActivity", "empty": true}}
          ],
          "mark": {
            "type": "circle",
            "size": 200,
            "stroke": "#111827",
            "cursor": "pointer"
          },
          "encoding": {
            "longitude": {"field": "lon", "type": "quantitative"},
            "latitude": {"field": "lat", "type": "quantitative"},
            "color": {
              "field": "category",
              "type": "nominal",
              "scale": {
                "domain": ["Climate", "Ocean", "Geology", "Biology"],
                "range": ["#3f6ed3", "#0891b2", "#ca8421", "#16a34a"]
              },
              "legend": null
            },
            "opacity": {
              "condition": {"param": "selCity", "value": 1, "empty": true},
              "value": 0.35
            },
            "tooltip": [
              {"field": "name", "type": "nominal"},
              {"field": "category", "type": "nominal"}
            ]
          }
        }
      ]
    },
    {
      "width": 280,
      "height": 420,
      "data": {"name": "cities"},
      "params": [
        {
          "name": "selCategory",
          "select": {
            "type": "point",
            "fields": ["category"],
            "on": "click",
            "clear": "dblclick"
          }
        }
      ],
      "transform": [
        {"filter": {"param": "selCity", "empty": true}},
        {"filter": {"param": "selActivity", "empty": true}}
      ],
      "mark": {"type": "bar", "cursor": "pointer"},
      "encoding": {
        "x": {
          "field": "category",
          "type": "nominal",
          "sort": ["Climate", "Ocean", "Geology", "Biology"],
          "axis": {"labelAngle": 0, "title": "Category"}
        },
        "y": {
          "aggregate": "count",
          "type": "quantitative",
          "title": "Count",
          "axis": {"tickMinStep": 1, "format": "d"}
        },
        "color": {
          "field": "category",
          "type": "nominal",
          "scale": {
            "domain": ["Climate", "Ocean", "Geology", "Biology"],
            "range": ["#3f6ed3", "#0891b2", "#ca8421", "#16a34a"]
          },
          "legend": null
        },
        "opacity": {
          "condition": {"param": "selCategory", "value": 1, "empty": true},
          "value": 0.35
        },
        "tooltip": [
          {"field": "category", "type": "nominal"},
          {"aggregate": "count", "type": "quantitative", "title": "Count"}
        ]
      }
    },
    {
      "width": 220,
      "height": 200,
      "title": {
        "text": "Activity",
        "anchor": "middle",
        "offset": 18,
        "fontSize": 12
      },
      "data": {"name": "cities"},
      "params": [
        {
          "name": "selActivity",
          "select": {
            "type": "point",
            "fields": ["activity"],
            "on": "click",
            "clear": "dblclick"
          }
        }
      ],
      "transform": [
        {"filter": {"param": "selCity", "empty": true}},
        {"filter": {"param": "selCategory", "empty": true}},
        {"aggregate": [{"op": "count", "as": "count"}], "groupby": ["activity"]}
      ],
      "mark": {
        "type": "arc",
        "innerRadius": 55,
        "outerRadius": 95,
        "stroke": "white",
        "strokeWidth": 1,
        "cursor": "pointer"
      },
      "encoding": {
        "theta": {"field": "count", "type": "quantitative"},
        "color": {
          "field": "activity",
          "type": "nominal",
          "scale": {
            "domain": ["model", "observation"],
            "range": ["#dc2626", "orange"]
          },
          "legend": {"title": null}
        },
        "opacity": {
          "condition": {"param": "selActivity", "value": 1, "empty": true},
          "value": 0.35
        },
        "tooltip": [
          {"field": "activity", "type": "nominal"},
          {"field": "count", "type": "quantitative"}
        ]
      },
      "view": {"stroke": null}
    }
  ]
}