Plotting Away and Home Goal Difference for Crystal Palace 2020/21

Question

Using javascript, vega editor and this data: https://github.com/StanWaldron/StanWaldron.github.io/blob/main/final.csv, which I got from SportDataAPI and organised using pandas, I have attempted to make a graph that plots Crystal Palace's home and away goal differences over the course of the 2020/21 season. As you can see though, I can't get a smooth plot.

The issue seems to be that the NaNs in the data are being put in as 0s for home games when they have played away and vice versa. When trying to resolve this by looping through like so:

for c in final['Home_GD']:
    if math.isnan(c) == True:
        c = 0.0

It doesn't seem to change the data at all. If this worked, I would just be able to simply add it to the previous value and plot it that way, for every game.

In the javascript side I have also used layers, but have struggled to find any way of separating the data completely and then using two different data sources which I can layer on the same graph.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "title": {
      "text": "Home and Away Goal Difference For Crystal Palace 2020/21",
      "subtitle":["Exclusively in the Premier League"],
      "subtitleFontStyle":"italic",
      "subtitleFontSize":10,
      "anchor": "start",
      "color": "black"},

  "data": {
      "url":
      "https://raw.githubusercontent.com/StanWaldron/StanWaldron.github.io/main/final.csv"
   },

   "repeat": {"layer": ["Away_GD", "Home_GD"]},

   "height": 300,
   "width": 300,

   "spec": {
      "mark": {
          "type":"line",
          "strokeWidth":2},

      "encoding": {
          "x": {
              "field": "Date",
              "type": "temporal",
              "title":null,
              "axis":{
                 "grid": false
          }},

          "y": {
              "field": {"repeat": "layer"},
              "type": "quantitative",
              "title": null},

          "color": {
              "datum": {"repeat": "layer"},
              "scale": {"range": ["blue", "red"]},
              "legend": {
                "orient":"top-left",
                "fillColor":"white"}}
              }
          }
  }

Answer 1

I would probably do this by filtering each value individually within a layer; here's an example (open in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "https://raw.githubusercontent.com/StanWaldron/StanWaldron.github.io/main/final.csv"
  },
  "transform": [{"fold": ["Home_GD", "Away_GD"], "as": ["key", "Goals"]}],
  "encoding": {
    "x": {"field": "Date", "type": "temporal"},
    "y": {"field": "Goals", "type": "quantitative"},
    "color": {"field": "key", "type": "nominal"}
  },
  "layer": [
    {
      "transform": [{"filter": "datum.key == 'Home_GD' && datum.Home_GD != ''"}],
      "mark": "line"
    },
    {
      "transform": [{"filter": "datum.key == 'Away_GD' && datum.Away_GD != ''"}],
      "mark": "line"
    }
  ]
}