Combine barX and areaX

Community Help
1

Hi,
I try to achieve something like this

Screenshot 2021-12-08 at 10.11.20
Screenshot 2021-12-08 at 10.11.201836×622 89.3 KB

by adapting the code from this excellent Plot.plot example:

however, I came only this far:

since the y-axis is categorical I have to find a way to combine the bar and area marks in a way that the borders align with each other (like in the example). How could this be done? Or is there a better approach?

Thanks for your help.
/Till

2

I’m sending you a suggestion—the trick is to make the y-axis continuous.

3

Thank you for your suggestions.
Since you mentioned to change the type of the y-axis, I’ve just recoded the categorical values as numericals. But I still struggle to place the area correctly between the rects.

Apparently, I’m not passing the right y1 and y2 values…

4

I’ve ended up with the following result

Screenshot 2021-12-09 at 12.19.17

generated by the following code:

Plot.plot({
  marginLeft: 100,
  height: 100,
  label: null,
  style: { color: "grey" },
  x: {
    label: "Percent of MRIs",
    domain: [0, 100]
  },
  y: {
    axis: null,
    domain: [1, 5]
    //paddingInner: 0.5
  },
  marks: [
    Plot.rectX(csv, {
      x: "percent_cognitive_impairment",
      y1: "MR_status_num",
      y2: (d) => d.MR_status_num + 1,
      stroke: "white",
      fill: "lightblue",
      fillOpacity: 0.8
    }),
    Plot.areaX(csv, {
      y: (d, i) => (i == 0 ? d.MR_status_num + 1 : d.MR_status_num),
      x1: "percent_cognitive_impairment",
      fill: "lightblue",
      fillOpacity: 0.5,
      stroke: "white"
    })
  ]
})

As suggested by @Fil I converted the y-axis from categorical to continuous and recoded the categories as numbers. Further, it was important to sort the y-data since Plot.area uses data in input order:

As with lines, points in areas are connected in input order: the first point is connected to the second point, the second is connected to the third, and so on. This typically means that area data should be sorted chronologically. If unsorted data gives you gibberish, try a sort transform to fix the problem.
https://observablehq.com/@observablehq/plot-area

I don’t know if this was the best way to solve it but it works :wink:
:wave: :wave: