Best visualization for combinations

Question

What kind of a visualization/chart should I use for showing all the ways you can choose from a set of items? (i.e., number of possible combinations)

Concretely, I am showing potential offspring from two animals, where each parent may possess some number of genes, and the offspring inherits 0, 1, or both parent genes of each type. The genes have fun names (e.g., fire), and sometimes combinations of those genes have their own names (fire + pastel = firefly), but this is beside the point.

Here's a simple example that shows 2 and 2 genes from parents (with 1 shared), which makes for 2^2 = 16 possibilities.

The current UI shows the list of possibilities, but nothing visually conveys the magnitude. Secondly, it would be great if the outcomes which share commonality (i.e., contain same genes) could be visually related.

My idea is something like a diamond shaped graph, or layered network, where at the top is the outcome where all genes are chosen, and below that a row of nodes with N-1, and so forth until the bottom row has 0 selected. Edges would connect the nodes beween layers with shared genes. Size of nodes could indicate probability. Something like this graph maybe(but ignore the data).

I'm aware of Punnett Squares, but I'm not sure it's the best for combinations of this order (for one it doesn't not combine equivalent outcomes).

Thanks!

Answer 1

If you expect to be limited to choices from two groups only, this lends itself nicely to a matrix or heat map visualization. This is especially true if all combinations of the items are in play. The heat map can be less useful when dealing with sparse groupings (like really sparse). In that case, you would probably have a cleaner visualization with something like a force directed graph.

If you expect to have more than 2 groups in play, then the problem is more difficult. A graph of some sort is probably the best choice, but it can become harder to interact with and interpret.

The heat map is an excellent choice when you are trying to encode a weight between the variables because you can vary the color of the intersection. You could also put some shape at the intersection and use size to encode another variable. As you can see in the examples below, the heat map is a very compact representation.

If you're in the business of using d3, here are a pair of examples showing combinations from two groups.

• For the Trulia example, the combination is day of week and and time of day. They use color to encode something (site usage?)

• For the Les Mis example, they are actually using color to showing a group assignment, and the presence of color indicates association. This really gives you two pieces of data in the matrix when dealing with sparse data.

• For the journals example, they are encoding time and journal with size indicating number of publications. Color looks to just be sequential, but it could be encoded if that is meaningful.

The heat map is also nice because you can generate it with simple CSS/HTML without needing external frameworks. Alternatively, you can use d3 to generate an HTML version or an SVG. The Trulia one is HTML; Les Mis is SVG.

As a further thought, you could extend the heat map to work with multiple combinations. One possibility would be to show multiple heat maps for the different groupings. This probably gets out of hand once you have more than 4 categories. You could also allow for a user to select which items are being visualized. Depending on context and user, that may not be too confusing.