Observable/Plot: Formatting group transform proportion text

[alecgregory]

I am using a text mark with a group transform to show proportions on top of my histogram bars. It’s working well but the proportion results have too many decimal places so take up too much horizontal space (see below)

Is there an easy way to round to only 2 decimal places? My current solution is to do it via DOM manipulation which is not ideal.

Here’s the code I’m using to get the result in the screenshot

Plot.plot({
  x: {
    label: "Years in development"
  },
  y: {
    label: "Innovation Count"
  },
  marks: [
    Plot.barY(
      innovations,
      groupByDevelopmentTime( null, { fill: "goldenrod" })
    ),
    Plot.ruleX(
      [getAverageDevelopmentTime(innovations)],
      {stroke: "red"}
    ),
    Plot.text(
      [getAverageDevelopmentTime(innovations)],
      {
        x: getAverageDevelopmentTime(innovations),
        y: 150,
        text: [`Average: ${getAverageDevelopmentTime(innovations)}`],
        dx: 30
      }
    ),
    Plot.text(
      innovations,
      groupByDevelopmentTime ( { "text": "proportion" }, { dy: -5 })
    )
  ]
});

const getAverageDevelopmentTime = (innovations) =>
  Math.round(
    innovations.reduce(
      (acc, curr) => acc + curr.DEVELOPMENT_TIME, 0)
        / innovations.length
  )

const groupByDevelopmentTime = (outputs, options) => {
  return Plot.groupX(
    { y: "count", ...outputs },
    { x: "DEVELOPMENT_TIME", ...options }
  );
}

[mcmcclur]

Perhaps, you could change

{ "text": "proportion" }

to

{"text": d => d3.format("0.2f")(d.proportion)}

It’s always easier to formulate a response with a link to the notebook, though.

[alecgregory]

Thanks for the reply. I have updated the subject to clarify that I’m talking about observable/plot so there’s no notebook.

I did try the code you suggested (and had tried other things like that earlier) but with no luck. I just see NaN above all the bars. I think this is because “proportion” is not a property of d, it’s a built-in group transformation. What I’m looking to do is benefit from the ease of using the built-in transformation while also being able to format the output.