FIT3179-map.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A map with tooltips showing country and region information with color-coded regions based on Total tourist arrivals.",
  "width": 900,
  "height": 500,
  "autosize": "none",

  "signals": [
    {
      "name": "type",
      "value": "mercator"
    },
    { "name": "scale", "value": 100, "bind": {"input": "range", "min": 50, "max": 2000, "step": 1} },
    {
      "name": "selectedYear",
      "value": 2015,
      "bind": {
        "input": "range",
        "min": 2015,
        "max": 2020,
        "step": 1,
        "name": "Year"
      }
    },
    {
      "name": "selectedQuarter",
      "value": 1,
      "bind": {
        "input": "range",
        "min": 1,
        "max": 4,
        "step": 1,
        "name": "Quarter"
      }
    },
    { "name": "translate0", "update": "width / 2" },
    { "name": "translate1", "update": "height / 2" },
    { "name": "graticuleDash", "value": 0, "bind": {"input": "radio", "options": [0, 3, 5, 10]} },
    { "name": "borderWidth", "value": 1, "bind": {"input": "text"} },
    { "name": "background", "value": "#ffffff", "bind": {"input": "color"} },
    { "name": "invert", "value": false, "bind": {"input": "checkbox"} }
  ],

  "projections": [
    {
      "name": "projection",
      "type": {"signal": "type"},
      "scale": {"signal": "scale"}
    }
  ],

  "data": [
    {
      "name": "world",
      "url": "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json",
      "format": {
        "type": "topojson",
        "feature": "countries"
      }
    },
    {
      "name": "country_info",
      "url": "https://raw.githubusercontent.com/omarsrepo/FIT3179-2/refs/heads/main/countries.json",  
      "format": {"type": "json"}
    },
    {
      "name": "tourist_arrivals",
      "url": "https://raw.githubusercontent.com/omarsrepo/FIT3179-2/refs/heads/main/Reshaped_Tourist_Arrivals_Data_map.csv",
      "format": {"type": "csv", "parse": "auto"}
    },
    {
      "name": "filtered_arrivals",
      "source": "tourist_arrivals",
      "transform": [
        {
          "type": "filter",
          "expr": "datum.YEAR == selectedYear && datum.QUARTER == selectedQuarter"
        }
      ]
    },
    {
      "name": "region_totals",
      "source": "filtered_arrivals",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["REGION"],
          "fields": ["TOTAL"],
          "ops": ["sum"],
          "as": ["Total"]
        }
      ]
    },
    {
      "name": "graticule",
      "transform": [
        { "type": "graticule" }
      ]
    },
    {
      "name": "world_with_info",
      "source": "world",
      "transform": [
        {
          "type": "lookup",
          "from": "country_info",
          "key": "id",
          "fields": ["id"],
          "values": ["name", "region"]
        }
      ]
    },
    {
      "name": "region_with_total",
      "source": "world_with_info",
      "transform": [
        {
          "type": "lookup",
          "from": "region_totals",
          "key": "REGION",
          "fields": ["region"],
          "values": ["Total"]
        }
      ]
    }
  ],

  "marks": [
    {
      "type": "shape",
      "from": {"data": "graticule"},
      "encode": {
        "update": {
          "strokeWidth": {"value": 1},
          "strokeDash": {"signal": "[+graticuleDash, +graticuleDash]"},
          "stroke": {"signal": "invert ? '#444' : '#ddd'"},
          "fill": {"value": null}
        }
      },
      "transform": [
        { "type": "geoshape", "projection": "projection" }
      ]
    },
    {
      "type": "shape",
      "from": {"data": "region_with_total"},
      "encode": {
        "update": {
          "stroke": {"value": null},
          "fill": [
            {"test": "datum.Total == null", "value": "#ababab"},  
            {"scale": "color", "field": "Total"}  
      ],
          "tooltip": {
            "signal": "{'Region': datum.region, 'Total': datum.Total ? datum.Total : 'No data'}"
          }
        }
      },
      "transform": [
        { "type": "geoshape", "projection": "projection" }
      ]
    }
  ],

  "scales": [
    {
      "name": "color",
      "type": "linear",
      "domain": [1, 500000],  
      "range": ["#ffd6d6", "#ff0000"]
    }
  ],

  "legends": [
    {
      "fill": "color",
      "title": "Total Tourist Arrivals",
      "orient": "top-left"
    }
  ]
}