Observable Plot: Why are there negative values when calculating the proportion information of each bin in the bin transform

Hi, When I was drawing the bin transform and calculating the proportion information of each bin, I found that some values were negative. Why are there negative values? Should the proportion not always be greater than 0?
My code is as follows:

Plot.plot({
        height: 200,
        width: 840,
        // marginLeft: 85,
        x: { domain: this.x },
        // y: { axis: null },
        // x: { nice: true },
        // fy: { domain: this.cells }, // excludes N/A
        color: { range: this.colorRange, domain: colorArr },
        facet: { data: data },
        marks: [
          Plot.areaY(
            data,
            Plot.binX(
              { y2: "proportion" }, // using y2 to avoid areaY’s implicit stacking
              {
                x: "vae_x",
                fill: this.colored,
                fillOpacity: 0.1,
                thresholds: 10,
                curve: "natural",
              }
            )
          ),
          Plot.ruleY([0]),
          Plot.lineY(
            data,
            Plot.binX(
              { y: "proportion" },
              {
                x: "vae_x",
                // y: "vae_y",
                stroke: this.colored,
                thresholds: 10,
                curve: "natural",
              }
            )
          ),
          Plot.axisX({
            tickSpacing: 50,
            label: null,
          }),
          Plot.axisY({
            tickSpacing: 50,
            label: null,
          }),
        ],
      });

Thanks very much to the kind stranger!

No negative values, but an artifact of the natural curve interpolation:

Is there any other way to not display artifacts besides increasing the threshold?

replace “natural” with “monotone-x”.

Thanks, you have helped me a lot.

1 Like