Red and blue states

redblue.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A choropleth map depicting U.S. unemployment rates by county in 2009.",
  "width": 960,
  "height": 500,
  "autosize": "none",
  "signals": [
    {
      "name": "Year",
      "value": 1991,
      "bind": {
        "input": "range",
        "min": 1991,
        "max": 2018,
        "step": 1
      }
    }
  ],
  "data": [
    {
      "name": "redblue",
      "url": "https://raw.githubusercontent.com/Finterly/Datasets_to_play_with/master/redblue_wo_new.csv",
      "format": {
        "type": "csv",
        "parse": "auto",
        "delimiter": ","
      },
      "transform": [
        {
          "type": "filter",
          "expr": "datum.year == Year"
        }
      ]
    },
    {
      "name": "states",
      "url": "data/us-10m.json",
      "format": {
        "type": "topojson",
        "feature": "states"
      },
      "transform": [
        {
          "type": "lookup",
          "from": "redblue",
          "key": "id",
          "fields": [
            "id"
          ],
          "values": [
            "perc",
            "party",
            "state_name",
            "state"
          ]
        },
        {
          "type": "filter",
          "expr": "datum.perc != null"
        }
      ]
    }
  ],
  "projections": [
    {
      "name": "projection",
      "type": "albersUsa"
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": [
        "Republican",
        "Democratic"
      ],
      "range": [
        "#f33",
        "#33f"
      ]
    },
    {
      "name": "opacity",
      "type": "linear",
      "zero": true,
      "domain": {
        "data": "states",
        "field": "perc"
      },
      "range": [
        0.02,
        1
      ]
    },
    {
      "name": "legend_label",
      "type": "ordinal",
      "domain": [
        "red",
        "blue"
      ],
      "range": [
        "Republican states",
        "Democratic states"
      ]
    }
  ],
  "legends": [
    {
      "fill": "color",
      "orient": "bottom-left",
      "title": "US State Party",
      "encode": {}
    }
  ],
  "marks": [
    {
      "type": "shape",
      "from": {
        "data": "states"
      },
      "encode": {
        "enter": {
          "tooltip": {
            "signal": "{title:datum.state_name, 'hate crimes per million': format(datum.perc, '0.4')}"
          }
        },
        "update": {
          "fill": {
            "scale": "color",
            "field": "party"
          },
          "fillOpacity": {
            "scale": "opacity",
            "field": "perc"
          },
          "stroke": {
            "value": null
          }
        },
        "hover": {
          "stroke": {
            "value": "#C89BEB"
          },
          "strokeWidth": {
            "value": 3
          }
        }
      },
      "transform": [
        {
          "type": "geoshape",
          "projection": "projection"
        }
      ]
    }
  ],
  "config": {}
}