Regression in Vega Lite

Question

Using Vega Lite Regression on a Line Chart with a $$ value in Y, and a Date in X. The Date has a type of Quantitative in order to use the regression. I want to display the X-Axis as a date but because it was typed as quantitative. if I change the date to Temporal the regression Fails. I would like to see a date on the x-axis and still be able to use the regression methods.

I am using the standard Regression template with radio buttons for the selection.

{
  "title": {
    "anchor": "start",
    "align": "left",
    "text": " Regression ",
    "font": "Verdana",
    "fontSize": 36,
    "fontWeight": "bold",
    "fontStyle": "normal",
    "subtitle": "()",
    "subtitleFont": "Verdana",
    "subtitleFontSize": 18,
    "subtitleFontWeight": "normal",
    "subtitleFontStyle": "italic"
  },
  "data": {"name": "dataset"},
  "width": 900,
  "height": 400,
  "params": [
    {
      "name": "_regression_method",
      "value": "polynomial",
      "bind": {
        "input": "radio",
        "options": [
          "linear",
          "logarithmic",
          "exponential",
          "power",
          "quadratic",
          "polynomial"
        ],
        "name": "Regression Method: "
      }
    },
    {
      "name": "_regression_keyword",
      "expr": "if( _regression_method == 'linear', 'linear', if( _regression_method == 'logarithmic', 'log', if( _regression_method == 'exponential', 'exp', if( _regression_method == 'power', 'pow', if( _regression_method == 'quadratic', 'quad', if( _regression_method == 'polynomial', 'poly', 'JUNK' ))))))"
    }
  ],
  "layer": [
    {
      "name": "Data",
      "mark": {
        "type": "line",
        "filled": false,
        "color": "Black",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "field": "Date",
          "type": "quantitative",
          "axis": {"tickCount": 8}
        },
        "y": {
          "field": "Spends",
          "type": "quantitative",
          "axis": {"tickCount": 8}
        }
      }
    },
    {
      "name": "REGRESSION_LINE",
      "transform": [
        {
          "regression": "Spends",
          "on": "Date",
          "method": {
            "signal": "_regression_keyword"
          }
        }
      ],
      "mark": {
        "type": "line",
        "color": "#D64550"
      },
      "encoding": {
        "x": {
          "field": "Date",
          "type": "quantitative"
        },
        "y": {
          "field": "Spends",
          "type": "quantitative"
        }
      }
    },
    {
      "name": "REGRESSION_STATISTIC",
      "transform": [
        {
          "regression": "Spends",
          "on": "Date",
          "method": {
            "signal": "_regression_keyword"
          },
          "params": true
        },
        {
          "calculate": "'R²: ' + format( datum['rSquared'], '.2f' )",
          "as": "R2"
        }
      ],
      "mark": {
        "type": "text",
        "color": "#D64550",
        "fontSize": 20,
        "align": "right",
        "x": {"expr": "width/1"},
        "y": {"expr": "height/100000"}
      },
      "encoding": {
        "text": {
          "type": "nominal",
          "field": "R2"
        }
      }
    }
  ]
}

Answer 1

I am guessing your date is not in the correct date format because it is working fine here. Please update your question with your sample data.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "width": 900,
  "height": 400,
  "params": [
    {
      "name": "_regression_method",
      "value": "polynomial",
      "bind": {
        "input": "radio",
        "options": [
          "linear",
          "logarithmic",
          "exponential",
          "power",
          "quadratic",
          "polynomial"
        ],
        "name": "Regression Method: "
      }
    },
    {
      "name": "_regression_keyword",
      "expr": "if( _regression_method == 'linear', 'linear', if( _regression_method == 'logarithmic', 'log', if( _regression_method == 'exponential', 'exp', if( _regression_method == 'power', 'pow', if( _regression_method == 'quadratic', 'quad', if( _regression_method == 'polynomial', 'poly', 'JUNK' ))))))"
    }
  ],
  "transform": [{"filter": "datum.symbol==='AAPL'"}],
  "layer": [
    {
      "mark": {"type": "line"},
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "name": "REGRESSION_LINE",
      "transform": [
        {
          "regression": "price",
          "on": "date",
          "method": {"signal": "_regression_keyword"}
        }
      ],
      "mark": {"type": "line", "color": "#D64550"},
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    }
  ]
}