Mosaic/Marimekko chart
<Plot
frame
x={{ percent: true, label: false }}
y={{ percent: true, label: false }}
marginTop={15}
marginRight={15}>
<Rect
{...stacked}
inset={0.5}
opacity={0.5}
fill="segment" />
<Text
{...stacked}
fontSize={9}
text={(d) =>
[d.market, d.segment, d.value].join('\n')} />
<Text
data={groups(stacked.data, (d) => d.market).map(
([text, g]) => ({ text, x: g[0][stacked.x] })
)}
x="x"
text="text"
lineAnchor="bottom"
fontSize={10}
dy={-5}
frameAnchor="top" />
<Text
data={groups(stacked.data, (d) => d.segment).map(
([text, g]) => ({
text,
y: g.at(-1)[stacked.y]
})
)}
y="y"
text="text"
lineAnchor="bottom"
textAnchor="middle"
fontSize={10}
rotate={90}
dx={5}
frameAnchor="right" />
</Plot>
Open in Svelte playground