Percentage ticks with custom domain

[spandl]

I created a simple horizontal bar chart, that uses a custom domain (The total is supposed to be the total of respondents for a multiple answer survey, but this total is not accessible via the dataset).

The result should be expressed in percentages, not in total answers.

I came up with this version (which I like), but I need to create my own array of ticks.
Not a big deal, as it is based on a tick number, that could be calculated from the width.

The version without calculating the tick array is below and showing why this isn't working (it returns odd percentage values, as the tick values are only expressed in percentages)

The question: is there a better way to convert total values to percentages while using a custom x-domain?

I was playing around with offset: "normalize", but didn't get anywhere.

https://observablehq.com/@spandl/percentages-with-custom-domain

Thanks

[mbostock]

You can normalize the x-values by computing a proportion in a function:

Plot.plot({
    marginLeft: 300,
    x: {
     percent: true
    },
    marks: [
      Plot.ruleX([0]),
      Plot.barX(data, {
        x: 1,
        y: "Response_in_Text",
        fill: "slategrey",
        opacity: 0.25,
      }),
      Plot.barX(data, {
        x: (d) => d.count / 203,
        y: "Response_in_Text",
        sort: { y: "x", reverse: true },
      }),
      Plot.text(data, {
        x: 1,
        y: "Response_in_Text",
        text: (d) => `${((d.count / 203) * 100).toFixed(0)}%`,
        dx: -5,
        textAnchor: "end",
        fill: "black",
      }),
    ],
  })

[spandl]

YES! That is better

I define a custom n instead of a new domain
n = 203
apply percent and use n in barX and text and apply the percentage sign to the axis

x: {
  percent: true
},
...
Plot.axisX({
  tickFormat: (d) => `${d.toFixed(0)}%`
})

I like this solution better than mine, because Plot adjusts the number of ticks automatically. 🙏🏻

Plot.plot({
  marginLeft: 300,
  width: 1000,
  x: {
    percent: true
  },
  marks: [
    Plot.ruleX([0]),
    Plot.barX(data, {
      x: 1,
      y: "Response_in_Text",
      fill: "slategrey",
      opacity: 0.25
    }),
    Plot.barX(data, {
      x: (d) => d.count / n,
      y: "Response_in_Text",
      sort: { y: "x", reverse: true }
    }),
    Plot.text(data, {
      x: 1,
      y: "Response_in_Text",
      text: (d) => `${((d.count / n) * 100).toFixed(0)}%`,
      dx: -5,
      textAnchor: "end",
      fill: "black"
    }),
    Plot.axisX({
      tickFormat: (d) => `${d.toFixed(0)}%`
    })
  ]
})