matthewcornell
commented
4 years ago <!DOCTYPE html>
<html lang="en">
<head>
<title>Vega-lite date bug</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<!--
9/19/020 This file demonstrates an issue where vega-lite's display of dates is one day off.
Instructions: load this file in a browser, hover the mouse over the leftmost blue bar, and notice it incorrectly shows
"2011-10-02", but the data value for it is "2011-10-02"
-->
<script type="text/javascript">
const zoltarVlSpec = {
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
data: {
values: [
{
"model": "docs forecast model",
"timezero": "2011-10-02",
"forecast_url": "/forecast/13251",
"# rows": 62,
"# units": 3,
"# targets": 5
},
{
"model": "docs forecast model",
"timezero": "2011-10-09",
"forecast_url": "/forecast/13259",
"# rows": 62,
"# units": 3,
"# targets": 5
}
]
},
mark: {type: "rect"},
// width: "container",
config: {
view: {step: 10},
axis: {grid: false},
legend: {titleOrient: "right"}
},
encoding: {
x: {
field: "timezero",
timeUnit: "yearmonthdate",
type: "temporal",
title: null,
axis: {
orient: "top",
format: "%Y-%m-%d"
}
},
y: {
field: "model",
type: "nominal",
title: null
},
href: {field: "forecast_url"},
tooltip: [
{field: "model"},
{field: "timezero", type: "temporal", "format": "%Y-%m-%d"},
{field: "forecast_url"},
{field: "# rows"},
{field: "# units"},
{field: "# targets"}
],
color: {
field: "# targets",
type: "quantitative"
}
}
};
vegaEmbed('#vis', zoltarVlSpec);
</script>
</body>
</html>
Example: https://www.zoltardata.com/project/41/forecasts Hover over the blue bar and note that the tooltip date is "2011-10-02", but the actual date for the forecast https://www.zoltardata.com/forecast/9753 is "2011-10-02".