{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 600,
  "height": 360,
  "autosize": "fit",
  "signals": [
    {
      "name": "interpolate",
      "value": "linear"
    }
  ],
  "data": [
    {
      "name": "table",
      "url": "<%= absolute_url %>data/states.json"
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "point",
      "range": "width",
      "domain": {
        "data": "table",
        "field": "x"
      },
      "padding": 0.2
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {
        "data": "table",
        "field": "y"
      },
      "padding": 0.4
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "c"},
      "range": [
        "#9C27B0",
        "#109618",
        "#FF9900",
        "#DC3912",
        "#3366CC"
      ]
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "x",
      "ticks": false,
      "grid": true,
      "title": "Quarterly",
      "titleFontSize": 12,
      "labelFontSize": 12,
      "labelFont": "Roboto",
      "titlePadding": 10,
      "gridDash": [
        3,
        4
      ]
    },
    {
      "orient": "left",
      "scale": "y",
      "ticks": false,
      "labelPadding": 10,
      "title": "Users",
      "titleFontSize": 12,
      "titlePadding": 12
    },
    {
      "orient": "right",
      "scale": "y",
      "ticks": true,
      "tickColor": "#ffffff",
      "labels": false
    },
    {
      "orient": "top",
      "scale": "x",
      "zindex": 2,
      "ticks": true,
      "tickColor": "#ffffff",
      "labels": false
    }
  ],
  "legends": [
    {
      "orient": "top-right",
      "fill": "color",
      "offset": 10,
      "zindex": 1,
      "direction": "horizontal",
      "symbolType": "square"
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "table",
          "groupby": "c"
        }
      },
      "marks": [
        {
          "type": "line",
          "from": {
            "data": "series"
          },
          "encode": {
            "enter": {
              "x": {
                "scale": "x",
                "field": "x"
              },
              "y": {
                "scale": "y",
                "field": "y"
              },
              "stroke": {
                "scale": "color",
                "field": "c"
              },
              "strokeWidth": {
                "value": 2
              }
            }
          }
        },
        {
          "type": "symbol",
          "from": {
            "data": "series"
          },
          "encode": {
            "enter": {
              "x": {
                "scale": "x",
                "field": "x"
              },
              "y": {
                "scale": "y",
                "field": "y"
              },
              "stroke": {
                "scale": "color",
                "field": "c"
              },
              "strokeWidth": {
                "value": 2
              },
              "size": {
                "value": 7
              }
            }
          }
        }
      ]
    }
  ]
}
