# How to label a boxplot with dates, format axis

**URL:** <https://talk.observablehq.com/t/how-to-label-a-boxplot-with-dates-format-axis/7739>\
**Category:** Help\
**Created:** [March 13, 2023, 9:04pm UTC](https://talk.observablehq.com/t/how-to-label-a-boxplot-with-dates-format-axis/7739 "2023-03-13T21:04:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![zachbogart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/zachbogart/32/8597_2.png) [@zachbogart](https://talk.observablehq.com/u/zachbogart)\
**Post date:** [March 13, 2023, 9:04pm UTC](https://talk.observablehq.com/t/how-to-label-a-boxplot-with-dates-format-axis/7739/1 "2023-03-13T21:04:28Z")

</div>

I have a boxplot using years as the categorical values. I want to format the axis so that I don’t see all of the years bunching up against each other. How can I format the axis to just label a few of the years?

- [Notebook](https://observablehq.com/d/836f9d5ff0b01ca4)

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [March 13, 2023, 10:49pm UTC](https://talk.observablehq.com/t/how-to-label-a-boxplot-with-dates-format-axis/7739/2 "2023-03-13T22:49:09Z")

</div>

You could try the following:

```
Plot.plot({
  width,
  x: {ticks: d3.range(1975,2030,5), tickFormat: d3.format('d')},
  marks: [
    Plot.boxY(data, {
      y: "value",
      x: "year"
    })
  ]
})

```

There might be a better way to deal with the ordinal axis, though.

---

<div class="post-metadata">

**Author:** ![zachbogart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/zachbogart/32/8597_2.png) [@zachbogart](https://talk.observablehq.com/u/zachbogart)\
**Post date:** [March 13, 2023, 11:21pm UTC](https://talk.observablehq.com/t/how-to-label-a-boxplot-with-dates-format-axis/7739/3 "2023-03-13T23:21:23Z")

</div>

Nice I like it! So since [ticks](https://github.com/observablehq/plot/blob/main/README.md#position-options) can accept an array of values, simply list out the values you want. Any further insight into why simply stating the tick number doesn’t work? Is it because our x variable is ordinal?

---

<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:** [March 14, 2023, 12:12am UTC](https://talk.observablehq.com/t/how-to-label-a-boxplot-with-dates-format-axis/7739/4 "2023-03-14T00:12:06Z")

</div>

The fundamental problem here is that the boxY mark forces the _x_ scale to be a _band_ scale because it uses the groupX transform and barY/tickX mark under the hood. Since the _x_ values here are numeric, it would be more appropriate to use the binX transform with the rectY/ruleY mark instead.

Perhaps the box mark could provide an option to guess which would be appropriate based on the data, similar to what the new Plot.auto mark does. I filed [#1330](https://github.com/observablehq/plot/issues/1330) to track this idea.

In the meantime you’ll have to copy the implementation, like so:

 ![untitled (24)](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/674d34ffb823f8237318a2d77deda7212eacc42e.png)

```js
Plot.plot({
  width,
  marks: [
    Plot.ruleX(data, Plot.binX({y1: loqr1, y2: hiqr2}, {x: "year", y: "value", interval: 2})),
    Plot.rectY(data, Plot.binX({y1: "p25", y2: "p75"}, {x: "year", y: "value", fill: "#ccc", interval: 2})),
    Plot.ruleY(data, Plot.binX({y: "p50"}, {x: "year", y: "value", strokeWidth: 2, interval: 2})),
    Plot.dot(data, Plot.map({y: oqr}, {x: "year", y: "value", z: (d) => Math.floor(d.year * 2)}))
  ]
})

```

Full implementation:

> **[How to label a boxplot with dates, format axis](https://observablehq.com/d/2191b40557498b19)**
>
> Ref. https://talk.observablehq.com/t/how-to-label-a-boxplot-with-dates-format-axis/7739/2

I couldn’t quite figure out how to compute the per-bin outliers using the map transform, like the box mark currently does, so I had to hard-code a bin interval of 2 above. Maybe someone else can figure out a way. 😅

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [March 14, 2023, 9:33am UTC](https://talk.observablehq.com/t/how-to-label-a-boxplot-with-dates-format-axis/7739/5 "2023-03-14T09:33:32Z")

</div>

My suggestion would be:

```auto
  x: {
    interval: 1,
    tickSize: 1,
    tickFormat: (d) => (d % 5 === 0 ? `${d}` : "")
  },

```

_interval_ sort-of bins the data by year, and makes sure that even if a year is missing from the data, it will create a blank space on the axis instead of “forgetting” it; and _tickFormat_ only renders labels (years) that are a multiple of 5. _tickSize_ is only aesthetic.