Какую визуализацию я должен использовать для отображения комбинаций?

Question

Мне нужно создать визуализацию / диаграмму, показывающую все способы выбора из набора предметов (т. Е. Количество возможных комбинаций)

Конкретно, я показываю потенциальное потомство от двух животных, где каждый родитель может обладать некоторым количеством генов, а потомство наследует 0, 1 или оба родительских гена каждого типа. У генов есть забавные имена (например, огонь), и иногда комбинации этих генов имеют свои собственные имена (огонь + пастель = светлячок), но это не относится к делу.

Вот простой пример, который показывает 2 и 2 гена от родителей (с 1 общим), что дает 2^2 = 16 возможностей.

Текущий пользовательский интерфейс показывает список возможностей, но ничто визуально не передает величину. Во-вторых, было бы замечательно, если бы результаты, которые имеют общие черты (то есть содержат одни и те же гены), могли бы быть визуально связаны.

Моя идея - это что-то вроде ромбовидного графа или многослойной сети, где вверху находится результат, в котором выбраны все гены, а ниже - ряд узлов с N-1 и так далее, пока в нижнем ряду не будет выбрано 0. Края будут соединять узлы между слоями с общими генами. Размер узлов может указывать вероятность. Примерно так (но игнорируем данные):

Я знаю о Punnett Squares, но я не уверен, что это лучше для комбинаций этого порядка (для одного это не объединяет эквивалентные результаты).

Я надеялся, что у d3js будет что-то подобное, но в изобилии примеров в галерее я не увидел ничего подобного.

Спасибо!

Answer 1

Текущий пользовательский интерфейс показывает список возможностей, но ничто визуально не передает величину.

Вместо того, чтобы обозначать каждую возможность дробью - например, "1 / 16" - поместите горизонтальную гистограмму рядом с вашими возможностями, где размер столбца пропорционален вероятности этой возможности. Вы можете отсортировать возможности, также уменьшив вероятность.