{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 600,
  "height": 360,
  "autosize": "fit",
  "title": {
    "text": "Ribbon Chart",
    "anchor": "start"
  },
  "data": [
    {
      "name": "data_table",
      "url": "<%= absolute_url %>data/ribbon.json",
      "transform": [
        {
          "offset": "center",
          "type": "stack",
          "groupby": [
            "<%= data_mapper.column_1 %>"
          ],
          "field": "<%= data_mapper.column_2 %>"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "scales_x",
      "type": "point",
      "range": "width",
      "padding": 10,
      "domain": {
        "data": "data_table",
        "field": "<%= data_mapper.column_1 %>"
      }
    },
    {
      "name": "scales_y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {
        "data": "data_table",
        "field": "y1"
      }
    },
    {
      "name": "scales_color",
      "type": "ordinal",
      "range": [
        "#3466cc"
      ],
      "domain": {
        "data": "data_table",
        "field": "<%= data_mapper.column_4 %>"
      }
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "scales_x",
      "zindex": 1,
      "ticks": false,
      "labelPadding": 12
    },
    {
      "orient": "left",
      "scale": "scales_y",
      "zindex": 1,
      "ticks": false,
      "labelPadding": 12
    }
  ],
  "marks": [
    {
      "name": "marks_area_group",
      "format": "center",
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "data_table",
          "groupby": "<%= data_mapper.column_3 %>"
        }
      },
      "marks": [
        {
          "name": "marks_area",
          "type": "area",
          "from": {
            "data": "series"
          },
          "encode": {
            "enter": {
              "interpolate": {
                "value": "monotone"
              },
              "fillOpacity": {
                "value": 1
              }
            },
            "update": {
              "x": {
                "scale": "scales_x",
                "field": "<%= data_mapper.column_1 %>"
              },
              "y": {
                "scale": "scales_y",
                "field": "y0"
              },
              "y2": {
                "scale": "scales_y",
                "field": "y1"
              },
              "fill": {
                "scale": "scales_color",
                "field": "<%= data_mapper.column_4 %>"
              }
            }
          }
        }
      ]
    }
  ]
}