Vega Zoomable USA Map

I want to use this map https://vega.github.io/vega/examples/zoomable-world-map/ but only for USA.

I used this spec.

  private specVega = {
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "description": "An interactive world map supporting pan and zoom.",
    "width": 900,
    "height": 500,
    "autosize": "none",

    "signals": [
      { "name": "tx", "update": "width / 2" },
      { "name": "ty", "update": "height / 2" },
      {
        "name": "scale",
        "value": 150,
        "on": [{
          "events": {"type": "wheel", "consume": true},
          "update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)"
        }]
      },
      {
        "name": "angles",
        "value": [0, 0],
        "on": [{
          "events": "mousedown",
          "update": "[rotateX, centerY]"
        }]
      },
      {
        "name": "cloned",
        "value": null,
        "on": [{
          "events": "mousedown",
          "update": "copy('projection')"
        }]
      },
      {
        "name": "start",
        "value": null,
        "on": [{
          "events": "mousedown",
          "update": "invert(cloned, xy())"
        }]
      },
      {
        "name": "drag", "value": null,
        "on": [{
          "events": "[mousedown, window:mouseup] > window:mousemove",
          "update": "invert(cloned, xy())"
        }]
      },
      {
        "name": "delta", "value": null,
        "on": [{
          "events": {"signal": "drag"},
          "update": "[drag[0] - start[0], start[1] - drag[1]]"
        }]
      },
      {
        "name": "rotateX", "value": 0,
        "on": [{
          "events": {"signal": "delta"},
          "update": "angles[0] + delta[0]"
        }]
      },
      {
        "name": "centerY", "value": 0,
        "on": [{
          "events": {"signal": "delta"},
          "update": "clamp(angles[1] + delta[1], -60, 60)"
        }]
      }
    ],

    "projections": [
      {
        "name": "projection",
        "type": "mercator",
        "scale": {"signal": "scale"},
        "rotate": [{"signal": "rotateX"}, 0, 0],
        "center": [0, {"signal": "centerY"}],
        "translate": [{"signal": "tx"}, {"signal": "ty"}]
      }
    ],

    "data": [
      {
        "name": "counties",
        values: null,
        "format": {"type": "topojson", "feature": "states"},
      },
      {
        "name": "graticule",
        "transform": [
          { "type": "graticule", "step": [15, 15] }
        ]
      }
    ],

    "marks": [
      {
        "type": "shape",
        "from": {"data": "graticule"},
        "encode": {
          "enter": {
            "strokeWidth": {"value": 1},
            "stroke": {"value": "#ddd"},
            "fill": {"value": null}
          }
        },
        "transform": [
          { "type": "geoshape", "projection": "projection" }
        ]
      },
      {
        "type": "shape",
        "from": {"data": "states"},
        "encode": {
          "enter": {
            "strokeWidth": {"value": 0.5},
            "stroke": {"value": "#bbb"},
            "fill": {"value": "#e5e8d3"}
          }
        },
        "transform": [
          { "type": "geoshape", "projection": "projection" }
        ]
      }
    ]
  }

this.specVega["data"][0]["values"] = "data/us-10m.json" (this is just for understanding which data i used)

So i put data for only US here, but it didn't work. Got an error in console:

Undefined data set name: "states"

In general i just need a zoomable map for USA only, which i am going to use as a bubble map. If this map has a zoom i would definitely use it https://vega.github.io/vega-lite/examples/geo_layer.html

Here is an working example of USA map by states or counties in "albersUsa" projection. Zooming is by mouse wheel and panning by mouse click-drag. For better performance, zooming and panning are best done with states instead of counties.

View in Vega online editor

{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An interactive USA map supporting pan and zoom.",
"width": 900,
"height": 500,
"autosize": "none",

"signals": [

  {
    "name": "signal_show_map_graticule", 
    "value": true,
    "bind": {
        "input": "checkbox",
         "name": "Map graticule: "}
  },

  {
    "name": "signal_states_or_counties", 
    "value": "states",
    "bind": { "input": "select", 
              "options": ["states", "counties"],
              "name": "Map areas: "
    }
  },

  {
    "name": "signal_map_scale",
    "value": 1000,
    "bind": {"input": "range", "min": 1000, "max": 4000, "step": 50, "name": "Map scale: "},
    "on": [{
      "events": {"type": "wheel", "consume": true},
      "update": "round(clamp(signal_map_scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 1000, 4000))"
    }]
  },

  { "name": "signal_translate_xy", 
  "value": [450, 250],
  "update": "[clamp(signal_translate_last_xy[0] + signal_mouse_delta_xy[0], -300, 1200), clamp(signal_translate_last_xy[1] + signal_mouse_delta_xy[1], -200, 800)]"
  },

  { "name": "signal_translate_last_xy", 
    "value": [450, 250],
    "on": [{
      "events": [
        {"type": "mousedown"}
      ],
      "update": "signal_translate_xy"
    }]
  },

  {
    "name": "signal_mouse_start_xy",
    "value": [0, 0],
    "on": [{
      "events": [
        {"type": "mousedown"}
      ],
      "update": "xy()"
    }]
  },

  {
    "name": "signal_mouse_drag_xy", 
    "value": [0, 0],
    "on": [{
      "events": [
        {
          "type": "mousemove",
          "between": [
            {"type": "mousedown"},
            {"type": "mouseup"}
          ]
        }
      ], 
      "update": "xy()"
    }]
  },

  {
    "name": "signal_mouse_delta_xy", 
    "value": [0, 0],
    "update": "[signal_mouse_drag_xy[0] - signal_mouse_start_xy[0], signal_mouse_drag_xy[1] - signal_mouse_start_xy[1]]"
  }
],

"projections": [
  {
    "name": "map_projection",
    "type": "albersUsa",
    "scale": {"signal": "signal_map_scale"},

    
    "translate": {"signal": "signal_translate_xy"}
  }
],

"data": [
  {
    "name": "data_geo_usa",
    "url": "data/us-10m.json",
    "format": {
        "type": "topojson", 
        "feature": {"signal": "signal_states_or_counties"}
    }
  },
  {
    "name": "data_geo_graticule",
    "transform": [
      { "type": "graticule", "step": [5, 5] }
    ]
  }
],

"marks": [
  {
    "type": "shape",
    "from": {"data": "data_geo_graticule"},
    "encode": {
      "enter": {
        "strokeWidth": {"value": 1},
        "stroke": {"value": "#ddd"}
      },
      "update": {
        "strokeOpacity": {"signal": "signal_show_map_graticule ? 1 : 0"}
      }
    },
    "transform": [
      { "type": "geoshape", "projection": "map_projection" }
    ]
  },

  {
    "type": "shape",
    "from": {"data": "data_geo_usa"},
    "encode": {
      "enter": {
        "strokeWidth": {"value": 0.5},
        "stroke": {"value": "#bbb"},
        "fill": {"value": "#e5e8d3"}
      }
    },
    "transform": [
      { "type": "geoshape", "projection": "map_projection" }
    ]
  }
]}