Improve layout and interactions of categorical histograms

[domoritz]

There is a lot of whitespace that could be used.

Also it's odd that I can't click on the words on the left but only the bars.

[willeppy]

Yes agreed. I struggled with the vgplot chart to find a way to allow selections on the label and not just the bar. It gets really annoying if the bar is very small because very hard to click

[willeppy]

The current categorical chart spec looks like

vg.plot(
vg.barX(vg.from(table, { filterBy: $mosaicSelection }), {
        x: vg.count(),
        y: col,
        fill: colorColName ?? "steelblue",
        sort: { y: "-x", limit },
      }),
      vg.highlight({ by: selection }),
      vg.toggleY({ as: selection }),
      vg.toggleY({ as: $mosaicSelection }),
      vg.text(vg.from(table, { filterBy: $mosaicSelection }), {
        x: 0,
        y: col,
        sort: { y: "-x", limit },
        text: vg.count(),
        dx: -3,
        textAnchor: "end",
        textOverflow: "ellipsis",
        fill: "black",
      }),
      vg.margins({ left: 250, bottom: 0, top: 0, right: 0 }),
      vg.width(400),
      vg.axis(null),
      vg.axisY({
        textOverflow: "ellipsis",
        lineWidth: 15,
        label: null,
        textAnchor: "start",
        dx: -220,
        fontSize: 14,
        tickSize: 0,
      }),
)

Maybe I could encode the text rather than use the axis to make it clickable?

[domoritz]

Yeah, try that. Alternatively, it might be worth coding this specific chart by hand rather than relying to vgplot to have more control over the layout and interactions.