redblue_linechart.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 800,
  "height": 400,
  "padding": 5,
  "signals": [
    {
      "name": "Year",
      "value": 1991,
      "bind": {
        "input": "range",
        "min": 1991,
        "max": 2018,
        "step": 1
      }
    }
  ],
  "data": [
    {
      "name": "table",
      "url": "https://raw.githubusercontent.com/Finterly/Datasets_to_play_with/master/redblue_tally_perc.csv",
      "format": {
        "type": "csv",
        "parse": {
          "newdate": "date"
        },
        "delimiter": ","
      },
      "transform": [
        {
          "type": "filter",
          "expr": "datum.year == Year"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "utc",
      "domain": {
        "data": "table",
        "field": "newdate"
      },
      "range": "width"
    },
    {
      "name": "yscale",
      "domain": {
        "data": "table",
        "field": "perc"
      },
      "range": "height"
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": [
        "Republican",
        "Democratic"
      ],
      "range": [
        "#f33",
        "#33f"
      ]
    },
    {
      "name": "opacity",
      "type": "linear",
      "zero": true,
      "domain": {
        "data": "table",
        "field": "perc"
      },
      "range": [
        0.2,
        0.8
      ]
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "grid": true
    },
    {
      "orient": "left",
      "scale": "yscale",
      "grid": true
    }
  ],
  "legends": [
    {
      "fill": "color",
      "orient": "top-left",
      "title": "US State Party",
      "encode": {}
    }
  ],
  "marks": [
    {
      "type": "symbol",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "newdate"
          },
          "y": {
            "scale": "yscale",
            "field": "perc"
          },
          "tooltip": {
            "signal": "{title: timeFormat(datum.newdate, '%b %d'), 'hate crimes per million': format(datum.perc, '0.4')}"
          }
        },
        "update": {
          "fill": {
            "scale": "color",
            "field": "party"
          },
          "fillOpacity": {
            "scale": "opacity",
            "field": "perc"
          }
        }
      }
    }
  ],
  "config": {}
}