How to set a date as default value for a parameter?

[bmesuere]

I'm trying to create a visualisation based on this example, but I want to set a default value for the selection so that a certain value is highlighted by default before the user hovered over the graph.

This should be possible by adapting the top few lines of the example and adding a .value() call with the default date however this doesn't seem to work. It does work however when I adapt the graph so that the x encoding uses a string or number, so it seems passing a date is the issue.

  const hover = vl.selectPoint('hover')
    .encodings('x')
    .value("2010-02-01")   // this doesn't seem to work (my data has values by day)
    .on('mouseover')
    .toggle(false) 
    .nearest(true);

I tried passing it as "2010-02-01", new Date("2010-02-01"), {date: "2010-02-01"},... to no avail.

[domoritz]

This seems to be a question specific to Vega-Lite-API. In Vega-Lite , you can pass an object with date components such as {"year": 2021}.

[bmesuere]

Thanks, I tried with .value({DATE: {year: 2021, month: 1, date: 21}}) without success. Should I open an issue in that repo?

[domoritz]

What I would suggest is generating the Vega-Lite JSON from the example above and fixing it in the Vega editor. Then try to reproduce the fixed version with Vega-Lite API.

[bmesuere]

As always, time zones are tricky.

The format is indeed .value({DATE: {year: 2021, month: 1, date: 21}}), and gets interpreted as local time. My data, however is in the format "2021-01-21" which gets parsed as UTC. The mismatch caused no data to be highlighted by default.

Instead of passing {year: 2021, month: 1, date: 21}, it is also possible to use a timestamp. As a workaround, I now use Date.parse("2021-01-21").

[domoritz]

Oh year, time zones. ISO 8601 should be interpreted as UTC. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#differences_in_assumed_time_zone.

Seems like we found the answer to your original question, though.

[bmesuere]

Yes, thanks for the help! Also I made an error in my previous comment and it's the other way around, {year: 2021, month: 1, date: 21} gets parsed as local time, "2021-01-21" as UTC. I'll edit the comment so future readers are not confused.