Vegalite daily swing line chart

I ran into an issue with vegalite, resulting in a "wobbling line" in the charts when the line should be straight and the dates are not evenly spaced.

Can anyone check if this is a bug, or am I wrong in my spec? enter image description here...

I found that this problem gets more serious as you increase the number of data points.

To reproduce this issue, paste the following spec into the vega lite editor :

{
  "description": "",
  "data": {
    "values": [
      {
        "date": "2017-01-23",
        "value": 100
      },
      {
        "date": "2017-01-24",
        "value": 200
      },
      {
        "date": "2017-01-25",
        "value": 300
      },
      {
        "date": "2017-01-26",
        "value": 400
      },
      {
        "date": "2017-01-27",
        "value": 500
      },
      {
        "date": "2017-01-28",
        "value": 600
      },
      {
        "date": "2017-01-29",
        "value": 700
      },
      {
        "date": "2017-01-30",
        "value": 800
      },
      {
        "date": "2017-01-31",
        "value": 900
      },
      {
        "date": "2017-02-01",
        "value": 1000
      },
      {
        "date": "2017-02-02",
        "value": 1100
      },
      {
        "date": "2017-02-03",
        "value": 1200
      },
      {
        "date": "2017-02-04",
        "value": 1300
      },
      {
        "date": "2017-02-05",
        "value": 1400
      },
      {
        "date": "2017-02-06",
        "value": 1500
      },
      {
        "date": "2017-02-07",
        "value": 1600
      }
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal"
    },
    "y": {
      "field": "value"
    }
  },
  "config": [],
  "embed": {
    "renderer": "canvas",
    "actions": {
      "export": false,
      "source": false,
      "editor": false
    }
  }
}

      

Edit: Followup - while experimenting in Altair it looks like the date aspect of this doesn't matter. You get the same problem with both of the following blocks of code:

import pandas as pd
import numpy as np
from altair import *

s1 = pd.date_range(start="2017-01-23", end="2020-02-07")
s2  = np.arange(1,len(s1)+1)*100
df = pd.DataFrame({"date":s1, "value":s2})

Chart(df).mark_line(
).encode(
    x='date',
    y='value'
)

      

and

import pandas as pd
import numpy as np
from altair import *

s1 = np.arange(1,1000,1)
s2  = np.arange(1,len(s1)+1)*100
df = pd.DataFrame({"x":s1, "value":s2})

Chart(df).mark_line(
).encode(
    x='x',
    y='value'
)

      

Conversely, the following produced a slick plot (pandas and matplotlib):

%matplotlib inline
df.plot('date', 'value')

      

+3


source to share


1 answer


Vibration is caused by the effect of round-off error when calculating the pixel coordinates corresponding to the data values.

Looking at the code vega

generated vega-lite

, you can see the entries "round": true

for specific scale

s. Changing this setting to false

fixes the problem on my screen and does it vega-lite

, you can also add:

"config": {"scale": {"round" : false}},

      



instead

"config": [],

      

in the specification vega-lite

.

+2


source







All Articles