Mosaic/Marimekko chart

Auburn, ALAlmonds3840Auburn, ALBerries1920Auburn, ALCarrots960Auburn, ALDates880Birmingham, ALAlmonds1600Birmingham, ALBerries1440Birmingham, ALCarrots960Birmingham, ALDates420Gainesville, FLAlmonds640Gainesville, FLBerries960Gainesville, FLCarrots640Gainesville, FLDates440Durham, NCAlmonds320Durham, NCBerries410Durham, NCCarrots640Durham, NCDates460 Auburn, ALBirmingham, ALGainesville, FLDurham, NC AlmondsBerriesCarrotsDates
<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')} />
    <!-- add horizontal group labels -->
    <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" />
    <!-- add vertical group labels -->
    <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