Previous discussion What's an intuitive interface for making connections between UI elements?

We have a web application called a genome browser, and we want to draw connections between different areas of the genome. Since this is sort of application specific context, let's imagine a more general idea. Let's say you have two different graphs, and you want to connect points between them

So we can mock this up like this

enter image description here

Now, what if, instead of just one bar graph on top and bottom, we have two on top and two on the bottom, where the two on top are related by their genomic region and the two on the bottom are related by their genomic region. So now, if we want to draw connections between them, there are lots of cross cutting elements

enter image description here

Now at this point, the user interface seems pretty chaotic. Also there are other concerns like

  • the connecting lines need to be drawn in an overlay, and this really limits how we can interact with it because in HTML, overlays really mess up your event handling: you have to put pointer-events:none on the overlay to click through to the underlay, and can possibly turn it off to interact with the overlay, but this requires a manual toggle
  • what if we just render the connecting lines independently of the graphs on the top and bottom, because maybe we just care about the connections and the pattern they make more than the actual bargraphs. in that case we can just render to a middle area rather than an overlay, but it becomes a little confusing what "status" this now holds in the app, how do you turn it on and off if it is separate from the rows on the top and bottom?

Those are just a couple concerns. The overlay often results in at least some visual chaos and conceptual confusion, even though it can kind of help in some cases too. Are there any guidelines or similar user interfaces in other apps that have these types of concerns?

  • 2
    Do these graphs share a common baseline metric? Also, is there a need to show more than one interrelated datapoint at a time?
    – Mike M
    Mar 30, 2020 at 21:47
  • So, the graphs in the genome browser parlance are called "tracks". In the first picture, it is the same track on the top and bottom, but the top is chromosome 1 and bottom is chromosome 2. The data in the graphs have, embedded in each dot, a suggestion that the two regions are connected e.g. chromosome 1 is connected to chromosome 2. That is why it's important to visualize that connection via a line.
    – Colin D
    Mar 30, 2020 at 22:20
  • okay, but the line is predicated on the fact that the user selected a datapoint in the first graph, correct?
    – Mike M
    Mar 31, 2020 at 1:01
  • It is actually very informative to have many of the interrelated datapoint lines displayed at once. It has been something mentioned by my team to limit the number displayed, for example to one at a time, but there are tons of interconnections and the pattern (e.g. where they connect on the X axis) is very informative for the genome (it shows where genomic mutations a connected together, or shared genes between species, or similar)
    – Colin D
    Mar 31, 2020 at 3:24
  • 1
    what do the x and y axis represent?
    – Mike M
    Mar 31, 2020 at 15:49

2 Answers 2


Since you have multiple graphs with multiple data points, try allowing users to directly select or search using a 'starting point'.

If they need to select more than one point, each subsequent selection can add a chip, and the data points could be another color. Having the starting point in a chip also means unselecting can be done by clearing the chip in the search bar as well.

This way you're creating an ad hoc legend, in which you could limit it to a few starting data points to keep down visual clutter. You can allow them to toggle the edges if it brings more clarity.

enter image description here

enter image description here I don't know a thing about genetic regions, but here's a first shot. Let me know if I missed some key constraints or have oversimplified the problem.

  • Thanks for posting this. Clearly you also find the idea of lines being drawn all over the screen to be problematic. This provides some useful ways to possibly avoid that. One thing that to me is a drawback of this is that it does require some manual interaction to see the patterns. My colleagues have also expressed that I should just allow it to display the lines on mouse over of a specific feature or something, but there can be many (many!) data points, we can lose the larger pattern, and often there is a larger pattern. I will mull this over, but thanks again for the feedback.
    – Colin D
    Apr 13, 2020 at 15:10
  • I also like the see results as table, this could be a useful thing to explore. We are often looking at the results of several layers of analysis with our programs so it helps to explore the raw data at several levels.
    – Colin D
    Apr 13, 2020 at 15:12
  • I will also note that I did a lot of explanation of why I thought the stacked view is problematic during the last couple weeks, and I guess I wanted to do that to thoroughly document what I thought were problems, but probably I sounded like I was complaining without any alternative to my team. My team asked what I thought an alternative was, and I suggested side-by-side displays, instead of these stacked ones, which I am going to consider in more detail.
    – Colin D
    Apr 13, 2020 at 15:16

This is one of the only other applications I know of that kind of has this "connections drawn over other UI" phenomena https://github.com/rohanrhu/gdb-frontend

The connections do end up overlapping other UI things including the programming text. In this app the connections seem like they do not sufficiently cause a lot of obscuring of other elements

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.