Allow more groups on expressions plot

[Shians]

Feature proposal

Allow more groups to be displayed properly on expressions plot in MD plots

Use case

When more than 5 groups or groups with long names are used then the labels begin to overlap and become unreadable. This should be improved to allow more groups to be displayed.

Possible implementation

• Rotate the labels 90 degrees
• Smart rotation depending on text

[zackyj]

This feature would be absolutely amazing! At the moment, I use Notepad++ to replace
glimma.storage.charts.push(glimma.chart.scatterChart().height(400).width(500).size(function (d) { return 2; }).x(function (d) { return d["Group"]; }).xlab("Group")
with
glimma.storage.charts.push(glimma.chart.scatterChart().height(400).width(1000).size(function (d) { return 5; }).x(function (d) { return d["Group"]; }).xlab("Group")
in all of the .js files, which makes the expression plot wider and increases point size.

Now that I have even more sample groups this stopgap solution has caused the glimma window to exceed screen limits otherwise the labels once again overlap. Even if you don't make this feature automatic, please point out where in js I can edit this to rotate text labels while I also widen the window.

Awesome package by the way, keep up the good work!

[Shians]

It's probably not possible to edit this in the JS as the JS itself is heavily minified for size efficiency. Potentially you can select the svg elements with a follow-up js script and apply a rotation transformation yourself if you're savvy enough. It's super tacky but if you bring up the console and run

d3.selectAll("div:nth-child(1) > div:nth-child(2)").select(".x.axis").selectAll("text").style("text-anchor", "end").attr("transform", "rotate(-30)").attr("dy", "0em").attr("dx", "-0.5em")

The rotation and alignment is determined by the rotate, dy and dx respectively. It's a massive pain to line things up after rotation which is why this feature isn't implemented yet.

[zackyj]

Wow what a quick response, and that code entered into the console in my browser makes it look perfect. Unfortunately, it will be necessary for me to send these glimma masterpieces to collaborators and I can't ask them to use the console to enter your code.

When you say that it's a pain to line things up after rotation, could you leave those em values up to the user to fiddle with in R (even on a dev channel or something)? And, while you were at it, would it be difficult to include an argument for the width of that expression plot, and point size?

Is the positioning different for different length strings, or does it only change based on the rotation value? Also, I copied that code into the script portion of my html file and while it rotates, it positions differently to when I use the console. Could that be fixed by using a different distance unit such as rem or ch or something? I'm not even sure that I understand why it differs...

Do you have any other suggestions? I don't want to take more of your time than you are comfortable offering, but I think that this would be a very useful addition to glimma.

Thanks!

[Shians]

If you open up the HTML file in a text editor there should be a section marked <script>, adding that line like below will basically run that line automatically, you'll have to add this line manually just before you send it off or else it'll get re-written when you run Glimma again.

<script>
    glimma.init.processCharts();
    glimma.init.processTables();
    glimma.init.processLinkages();
    glimma.init.processInputs();
    if ($('th:contains(Adj.PValue)').text()) $('th:contains(Adj.PValue)').click(); // sort table by adjusted p-value
    d3.selectAll("div:nth-child(1) > div:nth-child(2)").select(".x.axis").selectAll("text").style("text-anchor", "end").attr("transform", "rotate(-30)").attr("dy", "0em").attr("dx", "-0.5em");
</script>

I don't really want to make users fiddle around with the em, it's tedious and adds more function arguments to the growing list. There should be a way to do it automatically as almost all plotting libraries have managed to achieve this, I just need to work it out some time.

Longer strings require greater dx, you'll also notice the text cuts off if it's too long. It's not the hardest thing in the world to solve but I simply have not had the time.