How to fix gaps in Area mark, when grouping by count?

Community Help
1

Hi! I’m rather new to Plot so please excuse my lack of knowledge. I have this plot of the count of clients that have arrived to the facility each hour during the working hours. And for some reason when the count is 0, the area mark cuts off and I can’t wrap my head around the ways to fix it.

image
image1282×602 57.2 KB

Plot.areaY(
      deals.filter((d) => {
        const dealDate = new Date(d.time_arrival);
        return dealDate.toDateString() === date.toDateString();
      }),
      Plot.groupX(
        { y: "count", sort: "x" },
        {
          x: (d) => new Date(d.time_arrival.getUTCHours()).getTime() + 4, //manually fixing timezone difference, since it's irrelevant to this prototype
          y: "id",
          fy: "destination_id",
          curve: "bump-x",
          fill: "#588d7a",
          opacity: 1
        }
      )
    ),

Lurking around the discussions I found this one, with the opposite problem, but still no luck with figuring out how to fix mine.

I tried a custom reducer to substitute the supposedly NaN values by 0, but i can’t figure out what to compare datapoint’s value to, since the value in the gaps is neither 0 nor undefined. Can you help me figure this one out?

2

Maybe try and add interval: 1 to the marks’ options? This will create points where there is no data.

3

This fixes the gaps, but now everything is offset by .5 on x for some reason :eyes:

4

I see. The interval transforms, say, 6 into [6, 7), and then x is the midpoint.

I think the proper fix for your chart is this:

Plot.binX({x: "min", …}, {interval: 1, …})
5

Excuse me, I’m not sure how this would help? Could you elaborate how binning by min on x would achieve the desired result of the amount of clients per hour? I might not see it, bear with me please :see_no_evil:

image
image1434×1682 271 KB

6

Sorry I should have been clearer: you need to add these parameters but still keep the ones you had for y. But actually the code would be better with the “x1” reducer and the filter:null option — that will give you a value (y=0) even for empty bins:

charts
charts1022×1216 116 KB

2 Likes
7

Thank you very much for your help and time!