# Plot.ruleX not accepting "new Date()"

**URL:** <https://talk.observablehq.com/t/plot-rulex-not-accepting-new-date/6273>\
**Category:** Help\
**Created:** [February 21, 2022, 10:45pm UTC](https://talk.observablehq.com/t/plot-rulex-not-accepting-new-date/6273 "2022-02-21T22:45:38Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\
**Post date:** [February 21, 2022, 10:45pm UTC](https://talk.observablehq.com/t/plot-rulex-not-accepting-new-date/6273/1 "2022-02-21T22:45:39Z")

</div>

Used inside Plot

```auto
Plot.ruleX(today, { stroke: "red" })

```

Today defined with `new Date()` - **DOES NOT WORK**

```auto
today = [new Date()];

```

Today defined with `new Date(2022,2,21)` - **WORKS**

```auto
today = [new Date(2022,2,21)];

```

Reference code:

> **[Plot now](https://observablehq.com/@hashg/plot-now)**

---

<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:** [February 22, 2022, 1:43am UTC](https://talk.observablehq.com/t/plot-rulex-not-accepting-new-date/6273/2 "2022-02-22T01:43:15Z")

</div>

The issue is that you’re implicitly defining an ordinal (point) scale because you’ve specified a domain with more than two values. Since the domain doesn’t include the rule’s date (today), the plot is invalid. I suspect that you want to define the domain as `domain: [start, end]` instead so that you get a continuous (utc) scale.

---

<div class="post-metadata">

**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\
**Post date:** [February 22, 2022, 5:36am UTC](https://talk.observablehq.com/t/plot-rulex-not-accepting-new-date/6273/3 "2022-02-22T05:36:03Z")

</div>

Thanks a lot for the analysis. It means a lot coming from you.

When I switch the domain to `domain: [start, end]`, the scale shows only months `Jan, Feb, Mar`.  
What would be the right way to display every day always on x-axis?

---

<div class="post-metadata">

**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\
**Post date:** [February 22, 2022, 3:25pm UTC](https://talk.observablehq.com/t/plot-rulex-not-accepting-new-date/6273/4 "2022-02-22T15:25:31Z")

</div>

@mbostock I tried this

```auto
let start = new Date(2022, 0, 1);
let end = new Date(2022, 2, 1);
let rangeCount = d3.timeDay.count(start, end);

 Plot.plot({
          .....
          grid: true,
          x: {
            axis: "top",
            domain: [start, end],
            range: [0, rangeCount],
            tickFormat: (d) => formatDay(d)
          },

It does not render every date on x-axis, only displays `Jan, Mar`

Thanks in advance.
```

---

<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:** [February 22, 2022, 3:35pm UTC](https://talk.observablehq.com/t/plot-rulex-not-accepting-new-date/6273/5 "2022-02-22T15:35:52Z")

</div>

> [@kadale](#):
>
> What would be the right way to display every day always on x-axis?

Using the _ticks_ option. Something like

```js
          x: {
            axis: "top",
            domain: [start, end],
            ticks: d3.utcDay,
            tickSize: 0,
            tickFormat: formatDay
          },

```

---

<div class="post-metadata">

**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\
**Post date:** [February 22, 2022, 4:53pm UTC](https://talk.observablehq.com/t/plot-rulex-not-accepting-new-date/6273/6 "2022-02-22T16:53:01Z")

</div>

> [@mbostock](#):
>
> Using the _ticks_ option. Something like
> 
> ```auto
> x: {
> axis: "top",
> domain: [start, end],
> ticks: d3.utcDay,
> tickSize: 0,
> tickFormat: formatDay
> },
> 
> ```

It worked! But When I add data

```auto
Plot.cell(data, {
              y: "name",
              x: (d) => d.date,
              fill: (d) => d.country,
              title: (d) => `${d.name}\n${d.country}`
            })

```

x-axis resets back to `Jan, Mar`.  
Updated - [https://observablehq.com/@hashg/plot-now](https://observablehq.com/@hashg/plot-now)

I’m in process of building a gantt-calendar similar to this,

- What would be your recommendation to realise this?
- Me choosing `Plot`, is it a good choice?
- Should I use pure d3?

[![](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/2/23d7fe0a35e25d5f39221f092ccab3febb310c57.png) ](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/2/23d7fe0a35e25d5f39221f092ccab3febb310c57.png)

---

<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:** [February 22, 2022, 11:42pm UTC](https://talk.observablehq.com/t/plot-rulex-not-accepting-new-date/6273/7 "2022-02-22T23:42:26Z")

</div>

It resets because Plot.cell implies that both _x_ and _y_ are ordinal scales, so you’re back to where you started. 😬 (If you specify `x: {type: "utc"}` you’ll see an error when you try to use Plot.cell.)

You want a Plot.barX, not a Plot.cell here, because _x_ is continuous (representing a time interval with a start and stop) and _y_ is ordinal. And you’ll typically want to specify the start and stop time of each period of work, something like

```nohighlight
    Plot.barX(data, {
      y: "name",
      x1: (d) => d.startDate,
      x2: (d) => d.endDate,
      fill: (d) => d.country,
      title: (d) => `${d.name}\n${d.country}`
    })

```

If you don’t have a start and stop date, and instead you have periodic sampling (like, every day), you could use the _interval_ option instead:

```nohighlight
    Plot.barX(data, {
      y: "name",
      x: (d) => d.date,
      interval: d3.utcDay,
      fill: (d) => d.country,
      title: (d) => `${d.name}\n${d.country}`
    })

```

I’ll also note that your notebook is currently using local time. That’s fine if all of your viewers are in the same time zone, but if your viewers might be in different time zones, then you’ll want to use UTC instead. And also note that Plot defaults to UTC with temporal data, so you’ll need to say `x: {type: "time"}` (rather than `x: {type: "utc"}`, or not specifying the scale type).

(You’ll also want to avoid the mutation you’re currently doing by calling setHours as this leads to unpredictable behavior with Observable dataflow.)

I’d probably do something like this:

 ![untitled (6)](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/8/894d18723d69d962f89475ea5f940cc216ece941.png)

```nohighlight
Plot.plot({
  width,
  height: 200,
  label: null,
  x: {
    axis: "top",
    domain: [start, end]
  },
  y: {
    grid: true
  },
  marks: [
    Plot.ruleX(d3.utcDay.range(start, end), { strokeOpacity: 0.1 }),
    Plot.ruleX([today], { stroke: "red" }),
    Plot.barX(data, {
      y: "NAME",
      x: "DATE",
      interval: d3.utcDay,
      inset: 0, // no gaps between days
      fill: "COUNTRY",
      title: (d) => `${d.NAME}\n${d.COUNTRY}`
    })
  ]
})

```

Live notebook: [Plot now / Mike Bostock / Observable](https://observablehq.com/d/6fee29fa5c690626)

---

<div class="post-metadata">

**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\
**Post date:** [February 23, 2022, 4:25am UTC](https://talk.observablehq.com/t/plot-rulex-not-accepting-new-date/6273/8 "2022-02-23T04:25:19Z")

</div>

Thanks again.  
I learnt lot more about `ordinal scales`, `utc`, choosing right `plot` type. Highly valued feedback. 🙏