How to sort by custom order and set fy correctly?`

[winner106]

https://observablehq.com/d/43f0286cc828219c

I have sorted brands by startingChar and value, but the value order in each startingChar group don't work on the chart.

I want to sort the bars firstly by startingChar ,secondly by value, how to write the code please?

Thanks.

[Fil]

maybe try y: { label: null, domain: sortedBrands.map(d => d.name) },

[mbostock]

Like @Fil says, you either want to set the y scale’s domain explicitly (to whatever order you desire, say using d3.sort or d3.groupSort), or you can use imputed ordinal scale domains via the sort mark option.

[winner106]

Thank you for the guidance. It turns out it can be so simple, but I wanted to try implementing it using the sort option, and I couldn't get it right. My mind was really blanking out.

[winner106]

I'm really sorry, but I have to ask another question. I added fy to barx mark, but I didn't get the desired result, the y axis label of each group should only show its own data label. Could you please point out where I went wrong? Is there a way to fix it? Thank you again! @mbostock @Fil

https://observablehq.com/d/43f0286cc828219c

[Fil]

This is just not how facets work currently: all the facets share the same x and y scales (ie, with the complete domain). What you could do instead is a loop through the dataset that creates one plot per letter:

html`${[...d3.rollup(sortedBrands, v => 
Plot.plot({
  marginLeft: 90,
  height: v.length * 22 + 40,
  x: { axis: null, domain: [0, 220000] },
  y: { label: null, domain: v.map((d) => d.name) },
  marks: [
    Plot.frame(),
    Plot.barX(v, {
      x: "value",
      y: "name"
    }),

    Plot.text(v, {
      text: (d) => `${Math.floor(d.value / 1000)} B`,
      y: "name",
      x: "value",
      textAnchor: "end",
      dx: -3,
      fill: "white"
    })
  ]
}), d => d.startingChar).values()]}`

note that here I have to set the domain for x explicitly, so that the bars have a comparable length.

[winner106]

I see, thank you! You are all truly experts among experts, truly professional!