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.

enter image description here

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

enter image description here

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


  • 2
    Check out the d3.js examples for inspiration - maybe something like the Force Directed Graph, Node Link Tree, Sunburst, Cluster layout. There's examples such as the Hierarchical Classification Tree, and the Tree of Life which might be relevant Jan 27, 2015 at 11:34
  • Thanks @RogerAttrill, I had looked at the gallery but not seen anything that struck me. The Hierarchical Tree though looks like it has promise. Jan 27, 2015 at 19:02
  • If you would have combinations of less than 5 or 6 items a Venn diagram would be suitable.
    – nise81
    Jun 12, 2023 at 8:41

1 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?) enter image description here

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

enter image description here

  • 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. enter image description here

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.

  • 1
    Your examples are great in showing powerful ways to viz 2d results. I could have made it clearer, but these combinations can easily be triples, quads, etc. Thank you very much! Feb 3, 2015 at 23:30

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.