Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show column summaries automatically above the im-table #10

Closed
yochannah opened this issue Aug 1, 2018 · 16 comments

Comments

@yochannah
Copy link
Member

commented Aug 1, 2018

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.
data browser

Suggest we only implement this after #8

@yochannah yochannah added this to the Version 1.1 milestone Aug 1, 2018

@AdrianBZG

This comment has been minimized.

Copy link
Member

commented Aug 2, 2018

@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

This comment has been minimized.

Copy link
Member

commented Aug 2, 2018

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

@yochannah

This comment has been minimized.

Copy link
Member Author

commented Aug 2, 2018

@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

This comment has been minimized.

Copy link
Member

commented Aug 2, 2018

@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

This comment has been minimized.

Copy link
Member

commented Sep 9, 2018

Hi @yochannah, hope you like it 😄 :

image

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

@yochannah

This comment has been minimized.

Copy link
Member Author

commented Sep 10, 2018

Thanks @AdrianBZG !

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

@yochannah

This comment has been minimized.

Copy link
Member Author

commented Sep 11, 2018

@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...

image

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:
image

  • 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:

image

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

This comment has been minimized.

Copy link
Member

commented Sep 11, 2018

@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).

image

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:

image

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

Returning this:

image

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 added a commit to AdrianBZG/InterMine-Data-Browser-Tool that referenced this issue Sep 11, 2018
AdrianBZG added a commit to AdrianBZG/InterMine-Data-Browser-Tool that referenced this issue Sep 11, 2018
AdrianBZG added a commit to AdrianBZG/InterMine-Data-Browser-Tool that referenced this issue Sep 11, 2018
AdrianBZG added a commit to AdrianBZG/InterMine-Data-Browser-Tool that referenced this issue Sep 11, 2018
AdrianBZG added a commit to AdrianBZG/InterMine-Data-Browser-Tool that referenced this issue Sep 11, 2018
@AdrianBZG

This comment has been minimized.

Copy link
Member

commented Sep 11, 2018

@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 comment has been minimized.

Copy link
Member Author

commented Sep 12, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Sep 12, 2018

image

AdrianBZG added a commit to AdrianBZG/InterMine-Data-Browser-Tool that referenced this issue Sep 16, 2018
@AdrianBZG

This comment has been minimized.

Copy link
Member

commented Sep 16, 2018

@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/

image

barchart2

@yochannah

This comment has been minimized.

Copy link
Member Author

commented Sep 20, 2018

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

@AdrianBZG

This comment has been minimized.

Copy link
Member

commented Sep 20, 2018

@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

This comment has been minimized.

Copy link
Member Author

commented Sep 20, 2018

@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

This comment has been minimized.

Copy link
Member

commented Nov 12, 2018

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 :/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.