Visualisation des hiérarchies définies sous forme de graphiques codés par couleur

Oui, c’est un problème assez bien étudié. Ce que vous décrivez s’appelle un hypergraphe . Chaque élément peut être représenté sous la forme d’un sumt dans un graphique et les ensembles sont les hypergères. Le problème devient alors celui de la visualisation des hypergraphes.

Malheureusement, il n’ya pas de solution parfaite et généralisée, car même les graphiques les plus simples peuvent avoir des visualisations complexes.

Si vos jeux sont relativement petits (<5 éléments), vous pouvez utiliser une bibliothèque de dessin de graphes classique telle que graphviz . Pour ce faire, connectez simplement toutes les paires de sommets de chaque ensemble et colorez-les différemment. Cela donnera une solution semblable à ceci:

Avez-vous considéré une grid à deux dimensions:

• Placez le numéro défini sur un axe
• Mettez les éléments uniques trouvés dans tous les ensembles sur l’autre axe
• Colorez chaque cellule où un élément se trouve dans un ensemble (en regardant les étiquettes de cette ligne et de la colonne)

Bien que cette méthode de visualisation soit normalement inférieure à certaines des plus compliquées mentionnées jusqu’à présent, elle a le mérite d’ être réellement possible lorsque vous avez des milliers d’éléments et des milliers d’ensembles.

L’astuce consiste à classer les lignes et les colonnes de manière à rassembler le plus d’informations de manière utile pour l’utilisateur. Mon instinct dit que le problème que vous essayez de résoudre est de faire en sorte que les cellules colorées soient aussi “bleues” que possible – si chaque ensemble de cellules colorées adjacentes est appelé une “zone”, pour avoir le moins de zones distinctes et les avoir le moins de trous.

C’est un problème très compliqué en soi, mais qui pourrait être au moins partiellement résolu en établissant des facteurs de contiguïté pour chaque ensemble par rapport à tous les autres. Ce que vous recherchez, ce sont des “îlots” de proximité. Commencez donc par les paires d’ensembles les plus similaires, ajoutez-les au graphique et considérez-les comme une région. Recalculez vos numéros de proximité avec la région remplaçant la paire qu’elle contient (moyenne d’une manière?). Recherchez la paire d’éléments la plus proche suivante (chaque élément étant une région ou un ensemble) et, si cette paire se trouve à un certain seuil de proximité par rapport à une région existante du graphique, attachez-la à un côté de cette région. , région distincte (en supprimant à nouveau les valeurs de proximité de la paire et en effectuant un nouveau calcul pour la région elle-même). Finalement, tous les ensembles seront ajoutés aux régions et toutes les régions seront jointes. La jonction de deux régions peut avoir quatre possibilités (le retournement peut être nécessaire), de sorte que les côtés à joindre au graphique pourraient être calculés par la proximité des ensembles sur les 4 bords des deux régions.

Bien que cela puisse ne jamais donner la configuration optimale, il devrait arriver quelque chose qui a peu de régions par rapport à une dissortingbution aléatoire.

Enfin, une réorganisation dynamic pourrait être utile, en permettant à l’utilisateur de sélectionner un ensemble ou un élément intéressant, et de l’utiliser comme graine pour un graphe complètement réarrangé, en calculant chaque addition en fonction de la proximité de cet élément (puis de la région combinée). avec un autre élément), plutôt que la proximité globale la plus faible.

Voici un diagramme du résultat, ayant effectué le processus logique ci-dessus sur l’exemple de données dans votre question:

Décider comment commander les colonnes est complexe, mais en gros, vous pouvez obtenir des résultats raisonnables en déplaçant les colonnes pour qu’elles soient adjacentes lorsqu’un tel mouvement ne perturbe pas la zone de blocs colorés des segments déjà ajoutés.

Pensées supplémentaires:

• Le calcul de la proximité d’un ensemble ne dépend pas seulement du nombre d’éléments communs, mais également du nombre d’éléments non communs. Si deux paires d’ensembles ont 3 éléments en commun entre les paires, mais que l’une possède 5 éléments non partagés et l’autre 3 éléments non partagés, la paire avec 3 éléments non partagés est plus proche que l’autre.
• Après avoir ajouté un ensemble au graphique, il est possible de réorganiser les éléments. Emstackr les éléments le plus à gauche possible est un bon début pour le premier placement. Après cela, emstackr les éléments les plus courants à gauche semble bon. Après ça, ça tombe en panne. Je me demande si le fait de placer les cellules colorées aussi près que possible de la diagonale (de haut en bas à droite) serait également un algorithme utile – cela me rappelle un peu la masortingce de structure de conception, même si elle ne montre que des dépendances à un sens plutôt que deux. relations de manière.
• Lorsqu’un blob de couleur est constitué d’ensembles qui sont complètement disjoints de tous les autres ensembles (comme l’ensemble contenant X dans votre exemple), il peut être déplacé vers un graphique séparé.

Il existe de nombreuses approches à ce problème, mais personnellement, je tirerais une sorte de graphique de Venn en utilisant SVG généré de manière dynamic avec un outil tel que Raphael JS et le colorierais comme je le voulais. En outre, Raphael a api comme Set qui peut vous permettre de donner des informations détaillées sur les éléments et leurs relations. Le convertisseur SVG en code vous aidera également à comprendre comment vous pouvez générer les éléments SVG.

Vous pouvez également utiliser des outils tels que les diagrammes de Venn :

ce qui semble être facilement adaptable à ce scénario. Il y a aussi Flotr2 qui peut créer des graphiques à bulles:

ou même Canvas Express .

Un peu plus de peaufinage avec l’un des derniers outils vous permettra de le faire correctement …

Je n’ai pas votre solution pour obtenir les données dans le bon format. Jetez un oeil à ce plugin javascript créé par MIT pour la construction de graphes, sigmajs . N’a pas regardé les données qu’il accepte, mais peut valoir le coup d’oeil.