Faceted Barchart with Proportion of Groups

[gvanhorne]

Hello!

I'm working on a bar chart visualization similar to this example from the documentation:

I'm not 100% clear on the terminology here but what I would like to be able to do is have each pair of bars display their proportion relative to the group. So if male aquatics athletes account for say 5% of the total number of male athletes, I'd like the related bar to reflect that along the y axis.

Let me know if anything is unclear there, and appreciate any advice! I'll add the related code here as well

Plot.plot({
  marginBottom: 100,
  fx: {padding: 0, label: null, tickRotate: 90, tickSize: 6},
  x: {axis: null, paddingOuter: 0.2},
  y: {grid: true},
  color: {legend: true},
  marks: [
    Plot.barY(olympians, Plot.groupX({y2: "count"}, {x: "sex", fx: "sport", fill: "sex"})),
    Plot.ruleY([0])
  ]
})

[mbostock]

Yes, you can apply a normalize transform after the group transform. It’s a little tricky because you have to spread the grouped options so that you can later tell the normalize transform how you want to group (by sport).

Plot.plot({
  marginBottom: 100,
  fx: {padding: 0, label: null, tickRotate: 90, tickSize: 6},
  x: {axis: null, paddingOuter: 0.2},
  y: {grid: true, percent: true},
  color: {legend: true},
  marks: [
    Plot.barY(
      olympians,
      Plot.mapY(Plot.normalize("sum"), {
        ...Plot.groupX({y2: "count"}, {x: "sex", fill: "sex"}),
        fx: "sport",
        z: "sport",
        sort: {fx: "-y"}
      })
    ),
    Plot.ruleY([0])
  ]
})

[gvanhorne]

Hi @mbostock! Thank you for the reply. This looks very close to what I had in mind, but I'm curious if the percentage could be a function of the athlete population across all sports for the related sex? I'm thinking that would involve grouping differently? Hope that makes sense 👍

[mbostock]

Hmm. You can use the proportion-facet reducer, but then you need to facet by sex instead of by sport, which looks like this:

Plot.plot({
  marginBottom: 100,
  fx: {label: null},
  x: {tickRotate: -90, label: null},
  y: {grid: true, percent: true},
  color: {legend: true},
  marks: [
    Plot.barY(
      olympians,
      Plot.groupX(
        {y2: "proportion-facet"},
        {x: "sport", fill: "sex", fx: "sex", z: "sport", sort: {x: "-y"}}
      )
    ),
    Plot.ruleY([0])
  ]
})

That makes me realize there’s a simpler way to specify the chart above…

Plot.plot({
  marginBottom: 100,
  fx: {padding: 0, label: null, tickRotate: 90, tickSize: 6},
  x: {axis: null, paddingOuter: 0.2},
  y: {grid: true, percent: true},
  color: {legend: true},
  marks: [
    Plot.barY(
      olympians,
      Plot.groupX(
        {y2: "proportion-facet"},
        {fx: "sport", fill: "sex", x: "sex", sort: {fx: "-y"}}
      )
    ),
    Plot.ruleY([0])
  ]
})

But I don’t think there’s a built-in way to get the layout of the second chart, with the values of the first chart… you’d need a proportion-x reducer or something, where you’re computing the proportion of all the values with the same x-value.

[Fil]

My take on this (uses a fragile hack to overlay the two facets by adding padding: -65 to the specification of fx).

Plot.plot({
  marginBottom: 104,
  fx: { axis: null, padding: -65 },
  y: { grid: true, percent: true },
  color: { legend: true },
  marks: [
    Plot.axisX({ facetAnchor: "left", tickRotate: 90, tickSize: 6 }),
    Plot.barY(
      olympians,
      Plot.groupX(
        { y: "proportion-facet" },
        {
          x: "sport",
          fill: "sex",
          fx: "sex",
          sort: { x: "-y" },
          insetRight: 11,
          dx: 0.5
        }
      )
    ),
    Plot.ruleY([0])
  ]
})

[gvanhorne]

That is exactly what I was looking for! You guys are amazing and thanks for the interesting discussion here. Still lots for me to learn when it comes to Plot API but this gives me plenty of options for this particular visualization 👌