display label on Ribbon chart/ power bi hacking ribbon chart.

[nighotatul]

https://observablehq.com/@analyzer2004/plot-powerbi

we are following the above URL we are a very new user so our client want a Ribbon chart similar to power bi

so we add a plot library in our project and now we want to display a label on the Ribbon chart how could we easily achieve the same thing

as we tried by our way but we are not achieved maybe bcz of new to the library

so please give us a solution on how to display labels on the Ribbon chart.it is very much important for us.

[harshagarwalnyu]

Observable Plot doesn't have a native ribbon/Sankey mark, but you can overlay Plot.text() marks on the ribbon geometry to add labels. The trick is computing the label position from the ribbon's bounding rectangle.

Here is a pattern that positions labels at the centroid of each ribbon:

import * as d3 from "d3";

// Assuming `ribbonData` has {source, target, value, x0, x1, y0, y1} from your layout
const chart = Plot.plot({
  marks: [
    // Draw ribbon shapes via Plot.geo or a custom mark
    Plot.geo(ribbonGeoJSON, { fill: d => d.properties.color, fillOpacity: 0.7 }),

    // Label at centroid of each ribbon
    Plot.text(labelData, {
      x: d => (d.x0 + d.x1) / 2,  // horizontal center
      y: d => (d.y0 + d.y1) / 2,  // vertical center
      text: "label",
      fill: "white",
      fontWeight: "bold",
      fontSize: 11,
      textAnchor: "middle",
    }),
  ],
});

For the specific Power BI-style ribbon chart from the notebook you linked, the ribbon positions come from d3.ribbon(). The centroid of a D3 ribbon arc is:

// midAngle of the chord
const midAngle = (d) => d.startAngle + (d.endAngle - d.startAngle) / 2;
const labelRadius = outerRadius + 10;
const labels = chords.groups.map(d => ({
  label: names[d.index],
  x: Math.sin(midAngle(d)) * labelRadius,
  y: -Math.cos(midAngle(d)) * labelRadius,
  anchor: midAngle(d) < Math.PI ? "start" : "end",
}));

Plot.plot({
  marks: [
    // ... your ribbon marks ...
    Plot.text(labels, {
      x: "x", y: "y",
      text: "label",
      textAnchor: d => d.anchor,
      fontSize: 12,
    }),
  ]
})

If you share your current code I can give a more precise answer — the exact approach depends on how you are constructing the ribbon paths.