Plot: Can clip flag only cut the left and right ranges?

Community Help
1

Hi, I found that if the clip: ture attribute is directly added to the drawing, the upper part will be cut, so I would like to ask if it is possible to cut only the left and right sides?

image
image1408×354 15.3 KB

Thanks for your help.

2

No, but you can use insetTop to make your chart fit. Or, again, use the monotone-x curve

1 Like
3

Okay, I used insetTop and clip to adjust my chart, but I found that the position of the cut is different from the scatter plot. What is the reason for this?

image
image447×1125 179 KB

4

I’m happy to help but without seeing the code it’s just too difficult.

1 Like
5

Sorry, this is my code.
the bin transform:

Plot.plot({
        insetTop: 20,
        insetBottom: 20,
        height: 200,
        width: 840,
        // marginLeft: 85,
        x: { domain: this.x },
        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
              {
                clip: true,
                x: "umap_x",
                fill: this.colored,
                fillOpacity: 0.1,
                thresholds: 10,
                curve: "natural",
              }
            )
          ),
          Plot.ruleY([0]),
          Plot.lineY(
            data,
            Plot.binX(
              { y: "proportion" },
              {
                clip: true,
                x: "umap_x",
                stroke: this.colored,
                thresholds: 10,
                // curve: "monotone-x",
                curve: "natural",
              }
            )
          ),
          Plot.axisX({
            tickSpacing: 50,
            label: null,
          }),
          Plot.axisY({
            tickSpacing: 50,
            label: null,
          }),
        ],
      });

the dot:

Plot.plot({
        x: { domain: this.x },
        y: { domain: this.y },
        marginTop: 200,
        marginLeft: 80,
        marginBottom: 80,
        inset: 10,
        width: 900,
        height: 800,
        marks: [
     Plot.dot(data, {
          clip: true,
          x: "umap_x",
          y: "umap_y",
          fill: this.colored,
          fillOpacity: 0.7,
          r: 3
        })],   });   
color: {
          legend: true,
          domain: colorArr,
          range: this.colorRange,
        },
6

It’s really awkward, I know the reason. In the bin transform chart, I forgot to add inset:10.

1 Like
7

Thank you for your help. You are so kind.