# Calendar-aligned axis ticks with Plot.cell

**URL:** <https://talk.observablehq.com/t/calendar-aligned-axis-ticks-with-plot-cell/5088>\
**Category:** Help\
**Created:** [May 20, 2021, 5:34pm UTC](https://talk.observablehq.com/t/calendar-aligned-axis-ticks-with-plot-cell/5088 "2021-05-20T17:34:34Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rgov](https://avatars.discourse-cdn.com/v4/letter/r/779978/32.png) [@rgov](https://talk.observablehq.com/u/rgov)\
**Post date:** [May 20, 2021, 5:34pm UTC](https://talk.observablehq.com/t/calendar-aligned-axis-ticks-with-plot-cell/5088/1 "2021-05-20T17:34:34Z")

</div>

I am using `Plot.cell` to make a 2D plot in which the _x_-axis represents day of year and the _y_-axis represents time of day.

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

I’d like to add ticks along the _x_-axis showing Jan 1, Feb 1, Mar 1, etc. How can I achieve this?

Notebook here, but warning: it requires a lot of RAM. [Herring Data Visualization / Ryan Govostes / Observable](https://observablehq.com/d/40dabcee4cb6397f)

Other recommendations welcome — perhaps using `Plot.cell` is not the most performant or appropriate way to achieve this?

---

<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:** [May 20, 2021, 6:14pm UTC](https://talk.observablehq.com/t/calendar-aligned-axis-ticks-with-plot-cell/5088/2 "2021-05-20T18:14:27Z")

</div>

You could do something like this:

```auto
XAxisFormat = {
  const EndDate = d3.utcYear.offset(d3.utcYear(StartDate), 1);
  return {
    domain: d3.utcDay.range(StartDate, EndDate),
    ticks: d3.utcMonth.range(StartDate, EndDate),
    tickFormat: "%b",
    round: false
  }
}

```

Another way of approaching this would be to use Plot.bin and Plot.rect. Then you can do you aggregation within the visualization itself, where _x_ is a temporal axis (not ordinal) and _y_ is a quantitative axis (also not ordinal, representing minutes since midnight):

 ![untitled-77](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/5397969e6486a27439d9ebb94060a2a4b241ecc1.png)

```auto
Plot.plot({   
  round: true,
  y: {
    tickFormat: d => d3.utcFormat("%-I %p")(d3.utcMinute.offset(0, d)),
    ticks: d3.range(25).map(h => h * 60),
    reverse: true
  },
  color: {
    scheme: "YlGnBu"
  },
  marks: [
    Plot.rect(
      Data,
      Plot.bin({
        fill: "count"
      }, {
        x: {
          value: ([date]) => date,
          thresholds: d3.utcDay
        },
        y: {
          value: ([date]) => date.getUTCHours() * 60 + date.getUTCMinutes(),
          thresholds: d3.range(1, 24).map(h => h * 60)
        },
        filter: d => d[thresh + 1] >= DetectionThreshold,
        inset: 0
      })
    )
  ]
})

```

This still takes a few seconds to bin the 5.6M records… I suspect that could be optimized, though. I didn’t investigate yet to see whether there is obvious room for improvement. But at least it shouldn’t be slow from the rendering side; you can adjust the thresholds to make larger bins.