# Plot: inherited colors

**URL:** <https://talk.observablehq.com/t/plot-inherited-colors/6735>\
**Category:** Help\
**Created:** [June 23, 2022, 11:19pm UTC](https://talk.observablehq.com/t/plot-inherited-colors/6735 "2022-06-23T23:19:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![EE2dev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ee2dev/32/695_2.png) [@EE2dev](https://talk.observablehq.com/u/EE2dev)\
**Post date:** [June 23, 2022, 11:19pm UTC](https://talk.observablehq.com/t/plot-inherited-colors/6735/1 "2022-06-23T23:19:00Z")

</div>

I created a function to draw a calendar with Plot. This notebook works as expected [Untitled / ee2dev / Observable](https://observablehq.com/d/f3c6319bdde35775).

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

> **[Plot Exploration: How to customize the calendar visualization?](https://observablehq.com/@ee2dev/plot-exploration-how-to-customize-the-calendar-visualizat)**
>
> I am very excited🕺 about the prospect of using Plot as the go-to tool for interactive data exploration😀. As I am trying to grasp the concept and the mental model behind the Plot API, I am browsing through the observable plot collection going through...

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)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [June 24, 2022, 1:16am UTC](https://talk.observablehq.com/t/plot-inherited-colors/6735/2 "2022-06-24T01:16:34Z")

</div>

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](https://observablehq.com/@observablehq/recommended-libraries).

Using bisection, I determined that it was Plot [version 0.4.0](https://github.com/observablehq/plot/releases/tag/v0.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.

---

<div class="post-metadata">

**Author:** ![EE2dev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ee2dev/32/695_2.png) [@EE2dev](https://talk.observablehq.com/u/EE2dev)\
**Post date:** [June 24, 2022, 7:25am UTC](https://talk.observablehq.com/t/plot-inherited-colors/6735/3 "2022-06-24T07:25:58Z")

</div>

Thanks @mbostock !❤

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.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [June 24, 2022, 11:54am UTC](https://talk.observablehq.com/t/plot-inherited-colors/6735/4 "2022-06-24T11:54:30Z")

</div>

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:

```nohighlight
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](https://observablehq.com/compare/f3c6319bdde35775...a9517b62be60e3ef)

I also highly recommend using [d3-time](https://github.com/d3/d3-time) for these sorts of operations, as it will do a lot of the work for you.

---

<div class="post-metadata">

**Author:** ![EE2dev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ee2dev/32/695_2.png) [@EE2dev](https://talk.observablehq.com/u/EE2dev)\
**Post date:** [June 24, 2022, 1:57pm UTC](https://talk.observablehq.com/t/plot-inherited-colors/6735/5 "2022-06-24T13:57:31Z")

</div>

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 ❤❤