Line Charts Showing Ranks Over Time

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "title": {
    "text": "World Cup 2018: Group F Rankings",
    "frame": "bounds"
  },
  "data": {
    "values": [
      {"team": "Germany", "matchday": 1, "point": 0, "diff": -1},
      {"team": "Mexico", "matchday": 1, "point": 3, "diff": 1},
      {"team": "South Korea", "matchday": 1, "point": 0, "diff": -1},
      {"team": "Sweden", "matchday": 1, "point": 3, "diff": 1},
      {"team": "Germany", "matchday": 2, "point": 3, "diff": 0},
      {"team": "Mexico", "matchday": 2, "point": 6, "diff": 2},
      {"team": "South Korea", "matchday": 2, "point": 0, "diff": -2},
      {"team": "Sweden", "matchday": 2, "point": 3, "diff": 0},
      {"team": "Germany", "matchday": 3, "point": 3, "diff": -2},
      {"team": "Mexico", "matchday": 3, "point": 6, "diff": -1},
      {"team": "South Korea", "matchday": 3, "point": 3, "diff": 0},
      {"team": "Sweden", "matchday": 3, "point": 6, "diff": 3}
    ]
  },
  "transform": [{
    "sort": [
      {"field": "point", "order": "descending"},
      {"field": "diff", "order": "descending"}
    ],
    "window": [{
      "op": "rank",
      "as": "rank"
    }],
    "groupby": ["matchday"]
  }],
  "mark": {"type": "line", "orient": "vertical"},
  "encoding": {
    "x": {"field": "matchday", "type": "ordinal"},
    "y": {"field": "rank", "type": "ordinal"},
    "color": {
      "field": "team", "type": "nominal",
      "scale": {
        "domain": ["Germany", "Mexico", "South Korea", "Sweden"],
        "range": ["black", "#127153", "#C91A3C", "#0C71AB"]
      }
    }
  }
}