Why are certain time values not plotting on this graph?

user_17597290 0
Viewed 52

Creating a scatter plot with vega points are only plotted up to the 11/12th of every month? I'm confused as I feel like everything should be working fine, however this clearly doesnt seem to be the case. Is this due to the data? or the choice of graph maybe? Feel as though there should be a solution but going through the documentation i can't find one

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {"background": "#e6edf0"},
  "title": {
    "text": "Chart 1: Daily Cryptocurrency Returns",
    "subtitle": "Daily returns for six high marketcap cryptocurrencies source: Binance.com ",
    "subtitleFontStyle": "italic",
    "subtitleFontSize": 10,
    "anchor": "start",
    "color": "black"
  },
  "data": {
    "url": "https://raw.githubusercontent.com/andrewsnowdon/andrewsnowdon.github.io/main/Data_mega_final.csv",
    "format": {"type": "csv"}
  },
  "selection": {
    "Stockname": {
      "type": "single",
      "fields": ["Stockname"],
      "bind": {
        "input": "select",
        "options": [
          null,
          "DAX",
          "DOWJONES",
          "FTSE100",
          "NASDAQ",
          "S&P500"
          
        ],
        "name": "Pick an index: "
      }
    }
  },
  "transform": [
    {"filter": {"selection": "Stockname"}},
    {
      "filter": {
        "field": "Stockname",
        "oneOf": [
          "DAX",
          "DOWJONES",
          "FTSE100",
          "NASDAQ",
          "S&P500"
        ]
      }
    }
  ],
  "height": 300,
  "width": 1000,
  "mark": {"type": "circle"},
  "encoding": {
    "x": {
      "field": "Date",
      "type": "temporal",
      "title": "Date",
      "axis": {"grid": false}
    },
    "y": {
      "field": "Returns",
      "type": "quantitative",
      "title": "Daily Return (%)",
      "scale": {"domain": [-20, 20]},
      "axis": {"grid": false}
    },
    "color": {
      "field": "Stockname",
      "type": "nominal",
      "scale": {"scheme": "inferno"},
      "title": "Stockname",
      "legend": {"orient": "top-left", "fillColor": "aliceblue"}
    },
    "tooltip": [
      {"field": "Stockname", "title": "Stockname", "type": "ordinal"},
      {"field": "Date", "title": "Date", "type": "temporal"},
      {"field": "Returns", "title": "Return (%)", "type": "quantitative"}
    ]
  }
}
vega vega-lite json
1 Answers

Your source data appears to store dates using DD/MM/YYYY format, which Javascript date parsing assumes is MM/DD/YYYY. Because of this, when the day is larger than 12, the result is an invalid date.

You can fix this by declaring the correct date format in your specification:

  "data": {
    "url": "https://raw.githubusercontent.com/andrewsnowdon/andrewsnowdon.github.io/main/Data_mega_final.csv",
    "format": {"type": "csv", "parse": {"Date": "date:'%d/%m/%Y'"}}
  },

See https://vega.github.io/vega-lite/docs/data.html#format for more information.

user_29378310
Related