Facet Labels Are Too Long

[frscott]

I have faceted bar charts. I am looking to wrap my fx labels so that they are readable. Is this possible or do I need to use the text mark for each one?

Plot.plot({
  marginLeft: 80,
  width: 800,
  x: {grid: true, ticks: 5, domain: [1,100]},
  color: {legend: true},
  marks: [
    Plot.barX(data.filter(d =>
        d.response_subtype === "frequency_count"
      ), {
      y: "response",
      x: "percent",
      fill: "source",
      fx: "question",
      fy:"source",
      title: d => `${d.source}: ${d.percent}%` 
    }),
    Plot.ruleX([0])
  ]
})

[mbostock]

This should be possible by using an explicit axis mark (Plot.axisFx, Plot.axisFy) rather than relying on the implicit axes.

[frscott]

Thanks! This works great!

I originally wanted this to be a faceted grouped bar chart. Grouped by source (national vs. school) instead of faceting by source. But I couldn't figure it out from your example here. It would stack the bars instead of have them side by side like this.

Here is my code snippet

Plot.plot({
  marginLeft: 80,
  x: {grid: true, ticks: 5, domain: [1,100]},
  color: {legend: true},
  marks: [
    Plot.barX(data.filter(d =>
        d.response_subtype === "frequency_count"
      ), {
      y: "response",
      x: "percent",
      fill: "source",
      fy:"question",
      title: d => `${d.source}: ${d.percent}%` 
    }),
    Plot.ruleX([0])
  ]
})

[frscott]

Nevermind I figured it out. Thanks again for your work on this!

Code for the bottom plot is here:

Plot.plot({
  width: 800,
  x: {grid: true, ticks: 5, domain: [1,100]},
  color: {legend: true},
  marks: [
    Plot.barX(data.filter(d =>
        d.response_subtype === "frequency_count"
      ), {
      y: "source",
      x: "percent",
      fill: "source",
      fy:"response",
      fx: "question",
      title: d => `${d.source}: ${d.percent}%` 
    }),
     Plot.axisFx({anchor: "top", lineWidth:10, marginTop: 50}),
    Plot.ruleX([0])
  ]
})