search

DataBiosphere / data-explorer

BSD 3-Clause "New" or "Revised" License
10 stars 6 forks source link

Add HistogramFacet for visualizations #267

Closed bfcrampton closed 5 years ago

bfcrampton commented 5 years ago

This is a reopening of https://github.com/DataBiosphere/data-explorer/pull/245 since it was cleaner to start a new branch instead of rebasing. All of the comments in that PR should be addressed here, including switching to Vega Lite which is much nicer. Also added highlighting off selected facets, and made categorical facets horizontal.

screen shot 2019-02-04 at 12 18 55 pm

bfcrampton commented 5 years ago

Addressing some of your comments:

  • For numeric facets, it would be nice if x-axis legend text is horizontal instead of vertical. Could the labels be scattered? Or perhaps we should be smarter about the labels; instead of 0-9/10-19/20-29, we could somehow display 0/10/20.

Did this in this PR. Also added the labelsOverlap = true as described here which looks pretty nice I think. For the Total Exome Sequence ones, without it the labels overlap a lot and are not visible.

  • Title should look the same for TextFacet and HistogramFacet: Not bold, top (for both string and numeric facets), same font size, etc
  • HistogramFacet should look like a card, similar to TextFacet. Use card style and background should be white.
  • For facets with many values, like Population, instead of shrinking the bar, we should add a scrollbar, similar to TextFacet

This shouldn't be too hard, just apply the card wrapper (with title) around the histogram and make it scrollable I think?

  • I don't see a title for Total Exome Sequence facet.

Hmm I haven't seen this. maybe the horizontal labels fixed this?

  • For long facet values (like Population facet), can text be wrapped so entire string can be shown?

Definitely something we should do, not sure if vega supports that or not yet.

  • Bars for Population facet are all the same width. There is some cutoff problem. You also see it with Samples Overview facet, first 5 values.

I see this as well (if you expand your window large or zoom out on the page you can actually see this fixed). This is because of the fixed I applied (it looks really bad without this). Vega renders the equivalent of a static image so it doesn't scale with the page at all. There is an autosize property I experimented with a little bit, but couldn't get it looking good. We may want to revisit that.

  • On a related note, there should be a max width for the bar. Facets with just one value should not have a humongous bar.

I don't quite know what you mean by this, just that there should be space around the bar to be clear what it is?

  • For Total Exome Sequence facet, it's impossible to get tooltip to show for 80-90B. Can vega show tooltip if I'm anywhere in that column?

I think this is doable if we also put invisible data in to trigger the tooltip anywhere on the screen (I believe we discussed this a while ago). I haven't tried that yet, but doesn't seem too hard.