Vega-Lite MBTA Attempt

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Revenue and fares visualization with percentage of revenue via fares on a secondary axis.",
  "data": {"url": "https://pastie.io/raw/vijzjm.csv"},
  "width": 640,
  "transform": [
    {
      "calculate": "datum['Revenue from fares'] / datum['Revenue'] * 100",
      "as": "Percent of Revenue via Fares"
    },
    {
      "calculate": "datum['Revenue from fares'] / 1e6",
      "as": "Revenue from fares"
    },
    {"calculate": "datum['Revenue'] / 1e6", "as": "Revenue"}
  ],
  "encoding": {
    "x": {"field": "year", "type": "temporal", "title": "Year"},
    "y": {"type": "quantitative"}
  },
  "layer": [
    {
      "transform": [
        {"fold": ["Revenue", "Revenue from fares"], "as": ["Type", "Value"]}
      ],
      "encoding": {
        "y": {
          "field": "Value",
          "type": "quantitative",
          "title": "Millions (M)"
        },
        "color": {
          "field": "Type",
          "type": "nominal",
          "scale": {"range": ["green", "red"]}
        }
      },
      "layer": [{"mark": {"type": "line", "interpolate": "natural"}}]
    },
    {
      "mark": {"type": "line", "interpolate": "natural"},
      "encoding": {
        "y": {
          "field": "Percent of Revenue via Fares",
          "axis": {
            "title": "Percent of Revenue via Fares",
            "titleColor": "steelblue"
          },
          "scale": {"domain": [0, 100]},
          "title": null
        },
        "color": {"value": "steelblue"},
        "strokeDash": {}
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}},
  "config": {"legend": {"orient": "top"}}
}