# Grouped bar chart with temporal bins

**URL:** <https://talk.observablehq.com/t/grouped-bar-chart-with-temporal-bins/9434>\
**Category:** Help\
**Created:** [June 25, 2024, 10:41pm UTC](https://talk.observablehq.com/t/grouped-bar-chart-with-temporal-bins/9434 "2024-06-25T22:41:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![xvvvyz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/xvvvyz/32/8997_2.png) [@xvvvyz](https://talk.observablehq.com/u/xvvvyz)\
**Post date:** [June 25, 2024, 10:41pm UTC](https://talk.observablehq.com/t/grouped-bar-chart-with-temporal-bins/9434/1 "2024-06-25T22:41:45Z")

</div>

Hello! I would like to create a chart like this:

> **[Plot: Olympians grouped bar chart](https://observablehq.com/@observablehq/plot-olympians-grouped-bar-chart)**
>
> The color scale, which also represents sex, is redundant with x, allowing us to suppress the x axis and instead rely on the color legend to help the reader understand the chart’s encodings. The facets (representing sports) are separated by making the...

Instead of faceting over a nominal value (sport), I would like to bin time by month.

Example data structure:

`[{ Time: <date object>, Value: <value 1> | <value 2> }]`

I would like to have two vertical bars with different colors indicating the frequency of value 1 and value 2 respectively within each bin.

The closest I have gotten is stacked bars with the following:

```javascript
Plot.rectY(
  data,
  Plot.groupX(
    { y: 'count' },
    {
      fill: 'Value',
      interval: 'month',
      x: 'Time',
      y: 'Value',
    },
  ),
)

```

Any help is appreciated.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 26, 2024, 12:48am UTC](https://talk.observablehq.com/t/grouped-bar-chart-with-temporal-bins/9434/2 "2024-06-26T00:48:58Z")

</div>

You’ll have to use [`binX`](https://observablehq.com/plot/transforms/bin#binX) instead of `groupX` since your x values are temporal. You may also want to either drop `y: 'Value'` or change the bin’s reduce to `y: 'sum'`.

Here’s a simple example using the [`olympians` sample dataset](https://observablehq.com/@observablehq/sample-datasets#-olympians):

```js
Plot.rectY(
  olympians,
  Plot.binX(
    {y: "count"},
    {x: "date_of_birth", fill: "sex", interval: "year"}
  )
).plot()

```

---

<div class="post-metadata">

**Author:** ![xvvvyz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/xvvvyz/32/8997_2.png) [@xvvvyz](https://talk.observablehq.com/u/xvvvyz)\
**Post date:** [June 26, 2024, 2:11pm UTC](https://talk.observablehq.com/t/grouped-bar-chart-with-temporal-bins/9434/3 "2024-06-26T14:11:47Z")

</div>

Thanks for the quick response @mootari. I ended up getting what I wanted like this:

```javascript
P.barX(
  data,
  P.groupY(
    { x: 'count' },
    {
      fill: 'Value',
      fy: (d) => P.timeInterval('month').floor(d.Time),
      y: 'Value',
    },
  ),
)

```