Show column summaries automatically above the im-table

[yochannah]

Right now we have a single visualisation, the pie chart. Gos pointed out that we actually already have quite a few nice charts present in im-tables - the column summaries. Not all summaries are innately interesting, so I don't think we want to show each column summary.

This needs to be generic and work for tables that are neither gene nor protein.

Boring graphs:

example:, the Gene page has gene symbol, name, primary and secondary ID - all of which are unique strings or null, which doesn't give us any thing interesting.

Interesting graphs:

gene.length is an integer and can be plotted on a bar graph (interesting)
gene.organism is categorical data that is interesting in a pie or bar.

The same goes for proteins - length and organism name are probably interesting, the rest isn't.

implementation

This could literally take the imtables column summary graphs and place them in the div above the imtable (cloning the elements maybe?) or it could be that we simply add a bar chart that automatically picks up on data types but has nothing to do with the imtables column summaries. We'll need to think a little.

Suggest we only implement this after #8

[AdrianBZG]

@yochannah Note: the charts in the im-table's column summaries only appear (in the HTML, and with overlapping classes) once at a time, when the summary is clicked

[AdrianBZG]

@yochannah Also, in the text above you mention that organism in a pie chart would be interesting, but we already have that, right?

[yochannah]

@yochannah Note: the charts in the im-table's column summaries only appear (in the HTML, and with overlapping classes) once at a time, when the summary is clicked

We could probably hack it to fake a click, then use js to clone it and place it up above, but I don't like that idea. Better options would be either to extend imtables to allow us to display the chart externally, or to simply implement another chart (I'm guessing this is probably the fastest).

@yochannah Also, in the text above you mention that organism in a pie chart would be interesting, but we already have that, right?

Yep!

[AdrianBZG]

@yochannah Yes, probably the way to go is to implement another chart and feed it with the Gene.length column summary. We probably don't want the fake click approach (that will show the summary window for a few milliseconds to the user and it's weird).

[AdrianBZG]

Hi @yochannah, hope you like it 😄 :

Commit: AdrianBZG@499a9c6
Deployment: http://im-browser-prototype.herokuapp.com/

[yochannah]

Thanks @AdrianBZG !

@rachellyne would you be able to take a look too? :)

[yochannah]

@AdrianBZG this is a great start!!

Some notes:

• The colours of the bars in the bar chart imply correlation between the pie and the bar char (i.e. the pie chart has a nice warm yellow for h. sapiens - one might think that implied the yellow in the bar chart was also homo sapiens). I'd suggest making the chart have only a single colour of bars - perhaps the same blue colour as the selected proteins/genes selector along the top of the page.
• When I click on the bars, a strange filter happens with no results...

I think we are missing some labels. In the chart as shown, I assume there are 4 genes of some length, 4 of another, 2 in the third bar... and it took me a little while to find the 13th gene. :)

So maybe:

• start the chart at 0, so even bars of the value 1 have some height.
• label under the bars (let me know if we need help fitting things in and we can brainstorm)
• when hovering over bars, also show the hovered label - right now it says "Bucket 2 (4 values)" but something like "11 Genes with a length of x" might be clearer.

And some notes about layout:

• ideally all the boxes (imtables, charts) should have neatly aligned left and right edges with the same mount of padding or margin on each side, and the boxes and buttons should have spacing in between each other. I've tried to highlight the areas that need to be aligned in green above.
• the pie cha disappears completely on narrow pages:

for the pie and bar chart it would be nice to see a breakpoint when the screen gets narrow that sets them to be one above another - if I was doing this with flexbox, I'd set flex-direction:row and then have a media query below which the flex-direction would be column.

Nice job do far though!

[AdrianBZG]

@yochannah I'm not sure if we can use another data for the bar chart. What I mean is, currently the data used there is the one given by the Gene length summary, which is divided in groups/buckets, just as the column summary graph from im-table (it's a hand-made replication of that one).

This is the graph from im-table, which is the same as the new one on top. The query to get the data for ours is:

https://github.com/AdrianBZG/InterMine-Data-Browser-Tool/blob/master/routes/statistics.js#L117

Returning this:

http://im-browser-prototype.herokuapp.com/statistics/genelength/httpCOLONSLASHSLASHwww.humanmine.orgSLASHhumanmineSLASHservice/Gene

So I'm quite not sure which labels and data to use in the bar chart. Do you have an idea?

[AdrianBZG]

@yochannah I've addressed all points except the one related to the data (explained in previous comment), can you please take a look when you have some time?:

http://im-browser-prototype.herokuapp.com/

Thanks

[yochannah]

This took some digging to figure out, but im-tables calculates the bucket start and end values client-side.

• We know how many buckets there are
• We know the start and end coordinates of the entire thing (the min and max value),
• each bucket is equal width.

so if the range was 0-30 and we had three buckets,

bucket 1 would be >0 and <=10
bucket 2 would be >10 and <=20
bucket 3 would be >20 <=30

[yochannah]

[AdrianBZG]

@yochannah Looks better now, the bars have some height even if value is 1, also its using logarithmic scale so all the bars are shown, independently of the first ones having huge values and the others tiny values. Also labels are now properly calculated and displayed.

Can you please take a look? 👍

http://im-browser-prototype.herokuapp.com/

[yochannah]

@AdrianBZG This looks great! How are you implementing the log scale?

[AdrianBZG]

@yochannah What I'm doing is taking the log2 of the count, plus 1 (https://github.com/AdrianBZG/InterMine-Data-Browser-Tool/blob/master/src/js/common.js#L1235). This value is only used for the height of the bars, but the shown labels are the original counts, so the user doesn't get confused.

This avoids two things:

1. By using the log, even if the first 2-3 bars have a very huge count, and the rest values extremely low, you can still see the distribution by looking at the height bars.

2. By adding 1 to the log2 value, we avoid the bars with a count of 1 to don't have height. Note that the beginAtZero for the y-axis is not working in chart.js and that's why I did this.

[yochannah]

@AdrianBZG I think that sounds good! @rachellyne what do you think?

1. Nice! I suspect in some scenarios where the data are more sparse, we might want to have the option to switch the log view off and go back to the normal view. Would that be tricky to add? It would alsobe nice to tell people a little bit about how the buckets are calculated and displayed - maybe just an i in a circle-type info icon, that displays a short explanation when hovered and/or clicked?
2. Nice workaround! 😁

[AdrianBZG]

I can't add buttons or links to Chart.js graphs text, so I would need to add that below the graph, and that is not going to look very good :/