# Observable Plot: Stack and Facet

**URL:** <https://talk.observablehq.com/t/observable-plot-stack-and-facet/6969>\
**Category:** Help\
**Created:** [August 26, 2022, 2:44pm UTC](https://talk.observablehq.com/t/observable-plot-stack-and-facet/6969 "2022-08-26T14:44:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![aldo.viramontes](https://avatars.discourse-cdn.com/v4/letter/a/f6c823/32.png) [@aldo.viramontes](https://talk.observablehq.com/u/aldo.viramontes)\
**Post date:** [August 26, 2022, 2:44pm UTC](https://talk.observablehq.com/t/observable-plot-stack-and-facet/6969/1 "2022-08-26T14:44:41Z")

</div>

Hi there,

I’m new to Observable Plot (and js) and could not find a similar question in the community help topics for this. I am trying to create a chart that displays stacked values over time and facet that by an additional category. The resulting chart is duplicating the values for both of the fy channels.

I’ve been reading the documentation for stack, bin & group but I’m not able to figure it out, I believe I might have to group the data before binning (?). Below is the code snippet and a link to the notebook:

```auto
Plot.plot({
  facet: {
    data: data.filter(d => d.country == 'US' || d.country == 'CA'),
    y: 'country'
  },
  marks: [
    Plot.rectY(
      data.filter(d => d.country == 'US' || d.country == 'CA'),
      Plot.binX(
        { y: "count" },
        {
          x: "date",
          y: "price_in_usd",
          fill: "brand",
          thresholds: d3.utcDay
        }
      )
    )
  ],
  marginLeft: 100,
  width: 666,
  height: 300
})

```

> **[Stack and Facet](https://observablehq.com/@appcast-aldo/stack-and-facet)**
>
> I'm trying to apply a stack and a facet, however, the chart is duplicating the values for both categories

---

<div class="post-metadata">

**Author:** ![nachocab](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nachocab/32/2426_2.png) [@nachocab](https://talk.observablehq.com/u/nachocab)\
**Post date:** [August 26, 2022, 4:05pm UTC](https://talk.observablehq.com/t/observable-plot-stack-and-facet/6969/2 "2022-08-26T16:05:21Z")

</div>

The default behavior is `facet: auto`, which tests for strict equality and filtering returns a shallow copy of the data.

Try saving the original data to its own variable first:

```auto
{
  const data2 = data.filter((d) => d.country == "US" || d.country == "CA");
  return Plot.plot({
    facet: {
      data: data2,
      y: "country"
    },
    marks: [
      Plot.rectY(
        data2,
        Plot.binX(
          { y: "count" },
          {
            x: "date",
            y: "price_in_usd",
            fill: "brand",
            thresholds: d3.utcDay
          }
        )
      )
    ],
    marginLeft: 100,
    width: 666,
    height: 300
  });
}

```

The alternative is to manually specify `facet: "include"` or “exclude”.