Slope Chart Comparison for Keynote

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/barley.json"},
  "hconcat": [
    {
      "mark": {"type": "line", "size": 3},
      "height": 250,
      "width": {"step": 60},
      "encoding": {
        "x": {
          "field": "year",
          "type": "ordinal",
          "scale": {"padding": 0.5},
          "title": "Year",
          "axis": {"labelAngle": 0}
        },
        "y": {
          "aggregate": "median",
          "field": "yield",
          "type": "quantitative",
          "title": "Median Yield"
        },
        "color": {
          "field": "site",
          "type": "nominal",
          "title": "Site",
          "legend": {"symbolStrokeWidth": 4}
        }
      }
    },
    {
      "height": 250,
      "width": {"step": 60},
      "mark": {
        "type": "circle",
        "size": 100
      },
      "encoding": {
        "x": {
          "field": "year",
          "type": "ordinal",
          "scale": {"padding": 0.5},
          "title": "Year",
          "axis": {"labelAngle": 0}
        },
        "y": {
          "aggregate": "median",
          "field": "yield",
          "type": "quantitative",
          "title": "Median Yield"
        },
        "color": {
          "field": "site",
          "type": "nominal",
          "title": "Site"
        }
      }
    }
  ],
  "resolve": {"scale": {"color": "independent"}},
  "config": {
    "background": "#414141",
    "title": {"color": "#fff"},
    "style": {
      "guide-label": {"fill": "#fff", "fontSize": 12},
      "guide-title": {"fill": "#fff", "fontSize": 14}
    },
    "axis": {"domainColor": "#fff", "gridColor": "#888", "tickColor": "#fff"}
  }
}