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? ...
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')
source to share
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
.
source to share