Plot: inherited colors

Community Help
1

I created a function to draw a calendar with Plot. This notebook works as expected Untitled / ee2dev / Observable.

However, when I use the same code the following notebook - see at the very bottom

Question 1:
The colors for the calendar seems to get overridden by some style setting within the notebook. What causes this color change?

Question 2:
The calendar is not displayed at all if I use Iphone/ Safari. Is there a way to to make it work there, too?

Remark: (I have also posted this 2 days ago in the ambassador slack channel)

2

In the “as expected” notebook, you are using the latest version of Plot (0.5.0). In the “not as expected” notebook, you are using an older version 0.1.0 of Plot. If you delete the Plot cell in the latter notebook, the chart will again function as expected. I would also recommend deleting the d3 cell, as that is too using an old version of D3, and both D3 and Plot are included by default as one of Observable’s recommended libraries.

Using bisection, I determined that it was Plot version 0.4.0 that changed the behavior of the default color scale here. And that is because your drawCalendar function is using channels that define literal colors; 0.4.0 introduced the feature that color scales would default to identity scales when all channel values are literal colors, but prior to that, these values were interpreted as any other categorical value and you’d get a categorical color scale with the default tableau10 scheme instead.

3 Likes
3

Thanks @mbostock !:heart:

I checked this answer to be the solution as it completely answers question 1.

Question 2 might be of interest for/ known to the observable team as well as for the users but I was not sure if I should have split this question off as a separate one.

4

Ah, thanks. The problem in Safari is that you are passing a nonstandard date format to the Date constructor. You must use the ISO 8601 date format if you want to pass a string to the Date constructor. Like so:

drawCalendar(new Date("2022-03-08"), new Date("2022-04-13"))

The other problem I see is that you are using local time for your date operations. This is not a good idea as the behavior will vary depending on the viewer’s time zone, and also local time zones have things like daylight saving time changes that can make date computation more complicated. (The Date constructor if you pass an ISO 8601 string as above will also return dates at UTC midnight, not midnight local time. Plot also defaults to UTC for temporal data.)

Here’s a suggestion that fixes those problems (in the smaller notebook):

https://observablehq.com/compare/f3c6319bdde35775...a9517b62be60e3ef

I also highly recommend using d3-time for these sorts of operations, as it will do a lot of the work for you.

1 Like
5

Thanks so much! That’s great!
I actually went down that path and tried to call UTC function everywhere, at first glance your solution look like what I had. Except I missed one or two calls where I had local dates instead - as a result the calendar was not showing up correctl.
Then I chose to call the local date function and seemingly getting the visual I envisioned I thought that worked for me. So it’s super helpful you pointed that out and provided the solution :heart::heart:

1 Like