java - sunburst - Visualización de jerarquías de conjuntos como gráficos codificados por colores.

d3.js tutorial

Question

He estado leyendo bastante sobre bibliotecas gráficas para Java y Javascript últimamente pero no he encontrado una buena manera de hacer lo que quiero hacer.

Esencialmente tengo una jerarquía de conjuntos con respecto a un conjunto de elementos (hasta varios miles). Estos conjuntos pueden superponerse total o parcialmente, cubrirse completamente o separarse unos de otros. Lo que me gustaría hacer es mostrar la siguiente información:

• El tamaño de un conjunto (en relación con los otros conjuntos)
• Un valor de "calor" (en código de color) de un conjunto calculado a partir de los elementos que cubre
• La topología completa de los conjuntos en un solo gráfico (para que las superposiciones, intersecciones, etc. se muestren al usuario)

Edición: Tal vez debería dar un ejemplo de lo que quiero decir con conjuntos y elementos y jerarquías parcialmente superpuestas. La siguiente es una versión simplificada del tipo de conjuntos con los que trato (tenga en cuenta que los números 1 10 y las letras a - h X representan elementos comparables entre sí):

Set1 = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11}
Set2 = {1, 2, 3, 4, 5, 6}
Set3 = {1, 2, 3}
Set4 = {1, 4, 5, 6, 7}
Set5 = {a, b, c, d, e, f, g, h}
Set6 = {a, b, c, d, e}
Set7 = {a, b, c, 7}
Set8 = {2, 4, 7, 8, c, f}
Set9 = {X}

No estoy seguro de cómo haría para mostrar esta información de una manera intuitiva. He visto los gráficos de Voronoi ² , ² que realmente me gustan visualmente, sin embargo, tienen una base matemática diferente, por lo que no creo que sea capaz de retratar las jerarquías que tengo de manera adecuada. Me gustaría crear estos gráficos durante el tiempo de ejecución (en caso de Java) o usar Javascript en caso de implementación de HTML, cualquiera de los dos está perfectamente bien. Una cosa que es una restricción, sin embargo, es que los gráficos deben ser creados, o pueden ser exportables, a gráficos vectoriales de alta resolución.

Mis preguntas en breve:

1. ¿Hay una buena manera de visualizar el tipo de datos que tengo? Si es así, ¿existe en una forma fácilmente implementada (es decir, una biblioteca)?
2. Si no hay una solución fácil para el problema, en otras palabras, si necesito inventar mi rueda en este caso, ¿cómo hago para implementar un gráfico de este tipo? ¿Cuál es un buen punto de partida? ¿A qué le presto más atención?

¡Gracias!

Edición: La idea potencial que tuve fue diseñar todos los elementos en el conjunto universal como una cuadrícula hexagonal con la superposición de color deseada, y luego dibujar los límites de los conjuntos. Sin embargo, hay varios problemas con esa idea, en particular el problema de designar ubicaciones para los elementos, por lo que los conjuntos no se dividen en todo el gráfico. ¿Algún comentario / sugerencia?

Answer 1

¿Has considerado una cuadrícula bidimensional?

• Poner el número establecido en un eje.
• Coloca los elementos únicos que se encuentran en todos los conjuntos en el otro eje.
• Colorea cada celda donde se encuentra un elemento en un conjunto (mirando las etiquetas de esa fila y columna)

Si bien este método de visualización normalmente sería inferior a algunos de los más complicados mencionados hasta ahora, tiene la virtud de ser realmente posible cuando tienes miles de elementos y miles de conjuntos.

El truco consistirá en ordenar las filas y columnas de manera que se junte la mayor parte de la información de una manera útil para el usuario. Mi instinto dice que el problema que estás tratando de resolver es hacer que las celdas de colores sean lo más "parecidas a un blot", si cada conjunto de celdas de colores adyacentes se llama "área", para tener el menor número de áreas distintas y para Que tengan menos agujeros en ellos.

Ese es un problema muy complicado en sí mismo, pero podría resolverse al menos parcialmente al trabajar algunos factores de adyacencia para cada conjunto contra cada otro conjunto. Lo que busca son "islas" de cercanía, así que comience con el par de conjuntos más parecidos, agréguelos a la gráfica y considérelos una región. Vuelva a calcular sus números de proximidad con la región que reemplaza al par que mantiene (¿promedia de alguna manera?). Encuentre el siguiente par de elementos más cercanos (cada elemento es una región o un conjunto), y si ese par está dentro de un cierto umbral de proximidad a cualquier región existente en el gráfico, adjúntelo a un lado de esa región, de lo contrario, cree un nuevo , región separada (nuevamente eliminando los valores de proximidad del par y volviendo a calcular para la región en sí). Eventualmente, todos los conjuntos se agregarán a las regiones y todas las regiones se unirán. Unir dos regiones puede tener cuatro posibilidades (puede ser necesario voltear), por lo que los lados para unir en el gráfico podrían calcularse por la cercanía de los conjuntos en los 4 bordes de las dos regiones.

Si bien esto puede que nunca proporcione la configuración óptima, debería proponer algo que tenga pocas regiones en comparación con una distribución aleatoria.

Finalmente, algún reordenamiento dinámico puede ser útil, ya que le permite al usuario seleccionar un conjunto o elemento interesante, y usarlo como semilla para un gráfico completamente reorganizado, calculando cada adición en función de la cercanía a ese elemento (y posteriormente a esa región después de combinarse). con otro elemento), en lugar de la menor cercanía general de cualquiera.

Aquí hay un diagrama del resultado, después de haber realizado el proceso lógico anterior en el conjunto de datos de ejemplo en su pregunta:

Decidir cómo ordenar las columnas es complejo, pero básicamente puede obtener resultados razonables moviendo las columnas para que sean adyacentes cuando tal movimiento no perturbará el área del bloque coloreado de ningún segmento ya agregado.

Pensamientos adicionales:

• Calcular la cercanía del conjunto no es solo la cantidad de elementos que tienen en común, sino también la cantidad de elementos que tienen que no están en común. Si dos pares de conjuntos tienen 3 elementos en común entre los pares, pero uno tiene 5 elementos no compartidos y el otro tiene 3 elementos no compartidos, entonces el par con 3 elementos no compartidos es una coincidencia más cercana que el otro.
• Después de agregar un conjunto al gráfico, existe la oportunidad de reordenar los elementos. Apilar los elementos lo más a la izquierda posible es un buen comienzo para la primera colocación. Después de eso, apilar la mayoría de los elementos comunes a la izquierda parece bueno. Después de eso, se descompone. Me pregunto si obtener las celdas de colores tan cerca de la diagonal (de arriba a abajo a la derecha) también sería un algoritmo útil. Esto me recuerda un poco a la Matriz de Estructura de Diseño, que solo muestra dependencias de una sola vía en lugar de dos. relaciones de manera
• Cuando un blob de color consiste en conjuntos que están completamente separados de todos los demás conjuntos (como el conjunto que contiene X en su ejemplo), se puede mover a un gráfico separado.

Answer 2

Hay muchos enfoques para este problema, pero personalmente, dibujaría una especie de gráfico de Venn utilizando SVG generado dinámicamente con una herramienta como Raphael JS y lo colorearía como quisiera. Además, Raphael tiene un api como Set que puede permitirle dar información detallada sobre los elementos y sus relaciones. Es probable que el convertidor de código SVG a código también ayude a comprender cómo puede generar los elementos SVG.

Alternativamente, podrías usar herramientas como los gráficos de Venn :

lo que parece ser fácilmente adaptable a este escenario. También hay Flotr2 que puede crear gráficos de burbujas:

o incluso Canvas Express .

Un poco más de ajustes con cualquiera de las herramientas posteriores le permitirá hacerlo correctamente ...

Answer 3

No tengo su solución para obtener los datos en el formato adecuado. Eche un vistazo a este complemento de javascript creado por MIT para crear gráficos, sigmajs . No he mirado los datos que acepta, pero puede valer la pena echarle un vistazo.

Answer 4

Sí, este es un problema bastante bien estudiado. Lo que estás describiendo se llama hypergraph . Cada elemento se puede representar como un vértice en un gráfico, y los conjuntos son los hipertextos. El problema se convierte entonces en el de visualizar hipergrafías.

Desafortunadamente, no existe una solución perfecta y generalizada para esto, ya que incluso los gráficos más simples pueden tener visualizaciones complejas.

Si sus conjuntos son relativamente pequeños (<5 elementos), puede usar una biblioteca de dibujo de gráficos regular como graphviz . Para hacer esto, simplemente conecte todos los pares de vértices dentro de cada conjunto y coloréelos de manera diferente. Esto producirá una solución similar a esta: