Faceted bar chart with blanks

[vacquah]

My faceted bar chart is not working because when I use fx: "source_name" (faceting by country), Observable Plot creates a consistent x-axis across all facets showing ALL firms, but only fills in bars for firms that actually exist in each country - leading to blanks . How do I fix this?

Plot.plot({
  marginBottom: 100,
  x: {label: null, tickRotate: -45},
  fx: {label: "Country"},
  y: {label: "Average Cosst"},
  color: {legend: true, label: "Source"},
  marks: [
    Plot.barY(costData, {
      x: "firm",
      fx: "source_name",   // ← facet by country
      y: "avg_cost_cc1",
      fill: "source_name"
    }),
    Plot.ruleY([0])
  ]
})

I have tried to go a completely different route by manually inserting breaks between countries. Didnt work! I prefer this look, if only I can create the breaks like between the first two countries properly.

```

Plot.plot({
  marginBottom: 100,
  x: {
    label: null,
  },
  y: {label: null},
  color: {legend: true, label: "Country"},
  marks: [
    Plot.barY(costData, {
      x: d => `${d.source_name}: ${d.firm}`,
      y: "avg_cost_cc1",
      fill: "source_name"
    }),
    Plot.ruleY([0]),
    // Simple vertical separators
    Plot.ruleX(["firm a"], {stroke: "#999", strokeDasharray: "3,3"}),
    Plot.ruleX(["firm b"], {stroke: "#999", strokeDasharray: "3,3"}),
    Plot.ruleX(["firm c"], {stroke: "#999", strokeDasharray: "3,3"}),
    Plot.ruleX([firm cl"], {stroke: "#999", strokeDasharray: "3,3"})
  ]
})

[mbostock]

We’ve been calling this scales that vary across facets; please upvote #8 if you’re interested in this feature. In the meantime, you can implement it by creating small multiples (calling Plot.plot multiple times with different subsets of the data) that optionally share some scales (here you’d probably precompute the y-domain so that it is shared across plots). Then you’d combine all the plots into a single DIV or SVG element.