Complementos

Información sobre herramientas

Podemos añadir información sobre herramientas a cualquier gráfico. Son especialmente útiles cuando hay muchos puntos de datos (por ejemplo, en un gráfico de dispersión). Incluso con conjuntos de datos más pequeños, ayudan a despejar el gráfico, permitiendo a los usuarios centrarse en los patrones generales.

También son útiles en gráficos complejos, en los que diferentes partes del gráfico transmiten diferentes aspectos del conjunto de datos, y esto puede no ser obvio para los usuarios que no están familiarizados con este tipo de diagramas. Por ejemplo, en este Diagrama Sunburst los usuarios pueden pasar el ratón sobre los segmentos para ver tanto el punto de datos subyacente como el contexto de ese punto de datos. En este caso, el diagrama Sunburst desglosa los tratamientos médicos según el tipo, el órgano afectado y el tipo de seguro del paciente. Esta información aparece en la parte inferior de la pantalla y cambia a medida que el usuario pasa el ratón sobre cada segmento.

Uno de los grandes puntos fuertes de D3 es que ofrece una gran flexibilidad. Un tool-tip puede incluir cualquier dato presente en el conjunto de datos, texto contextual o incluso valores de un conjunto de datos completamente diferente. Por ejemplo, este Sankey muestra a los usuarios que los nodos representan el número total de refugiados, mientras que las líneas representan el número de refugiados que se desplazan entre cada origen (en este caso, un país) y destino (en este caso, un estado de EE.UU.). Este texto puede estar en cualquier idioma, lo que ayuda enormemente a la localización.

Cuando se utilizan dos o más conjuntos de datos en la visualización, los tool-tips pueden mostrar comparaciones entre ellos. Por ejemplo, pueden mostrar el valor de este año y el del año pasado, o conjuntos de datos de diferentes regiones. A la inversa, con un único conjunto de datos, pueden utilizarse para mostrar intervalos de confianza, valores porcentuales u otra información estadística relacionada con los puntos de datos, lo que ayuda a los usuarios a evaluar la fiabilidad de los datos.

Otra ventaja de los tool-tips es que son divertidos. Aumentan la interactividad al permitir a los usuarios interactuar con el gráfico y explorar los datos a su manera.

Zooms

Los zooms permiten a los usuarios ampliar áreas específicas de un gráfico o una tabla para examinar los puntos de datos y las tendencias más de cerca. Esto resulta especialmente útil con grandes conjuntos de datos. También es útil cuando los usuarios están interesados en diferentes aspectos del conjunto de datos: por ejemplo, algunos usuarios pueden querer centrarse en un periodo de tiempo concreto.

Los zooms también permiten a los usuarios realizar comparaciones detalladas entre distintas partes del conjunto de datos. Pueden explorar los datos de forma interactiva ampliando un área y desplazándose después a otra. Esto les ayuda a ver correlaciones, valores atípicos y patrones con mayor claridad.

Otra ventaja de los zooms es que permiten a los usuarios utilizar dispositivos más pequeños, como los teléfonos inteligentes, para ver el conjunto completo de datos y, aun así, poder ver los detalles que necesitan. Los usuarios de smartphones están acostumbrados a hacer zoom en la pantalla con el "gesto del pellizco".

El zoom también ayuda a mejorar la accesibilidad de las personas con defectos visuales.

Cepillos

El cepillado funciona de forma similar al zoom, en el sentido de que ofrece a los usuarios una forma de interactuar con parte del conjunto de datos. Sin embargo, en lugar de ampliar parte del gráfico, esta zona no cambia de tamaño. El área cepillada puede indicarse de alguna otra manera, como un cambio de color.

Se puede utilizar un pincel para filtrar los datos; por ejemplo, los usuarios pueden pincelar a lo largo del eje x de un gráfico de áreas moviendo el ratón. El área que se ha cepillado podría aparecer en otra parte de la pantalla. Otra forma de utilizar un pincel es añadir un gráfico separado que muestre los mismos datos a una escala diferente. En este caso, el pincel funciona de forma similar al zoom. Sin embargo, puede ser más fácil de usar, porque el gráfico original no cambia sus dimensiones.

Animaciones

Las animaciones ayudan de varias maneras. En el caso de un simple gráfico de barras, por ejemplo, las barras pueden deslizarse lentamente hacia arriba en lugar de aparecer instantáneamente. Esto añade muy poco al contenido informativo del gráfico, pero lo hace más interesante para los usuarios.

Las animaciones desempeñan un papel más serio cuando se utilizan para las transiciones. Por ejemplo, este Diagrama de Sankey muestra datos de varios años. A medida que el usuario se desplaza de un año a otro, utilizando el deslizador, los tamaños relativos de los nodos cambian. Se mueven porque están ordenados por tamaño. Sin la animación, el cambio sería brusco y sería difícil mantener la "constancia del objeto". Por ejemplo, un usuario podría estar interesado en cómo cambia el flujo (en este caso, de refugiados) procedente de un país concreto de un año a otro. Si ese nodo saltara sin una transición suave, sería difícil lograrlo.

Otro ejemplo de transición se muestra en este gráfico circular. Cuando se pasa el ratón sobre un segmento, éste se desplaza ligeramente hacia fuera. Al utilizar una transición suave, este movimiento parece natural y ayuda a mantener la metáfora de la tarta. Sin él, esta sección del gráfico saltaría de una posición a otra. Por esta misma razón, las animaciones funcionan especialmente bien cuando se muestran datos de series temporales, como los valores de un indicador bursátil. De nuevo, la ventaja es que es más fácil para el ojo seguir la pista de un valor concreto a medida que cambia.

Cuando se utiliza la animación para pasar de un conjunto de datos a otro, y estas transiciones se controlan mediante una interfaz de usuario, como <TransLink>este deslizador</TransLink>, el usuario puede explorar los valores casi como en una pantalla de vídeo.

Colores

Debido a que los gráficos y diagramas D3 se crean utilizando JavaScript, es posible establecer los colores utilizando una función. Esto significa que el color se puede utilizar de maneras que no son posibles en otras bibliotecas de visualización de datos.

El uso más obvio del color es distinguir diferentes conjuntos de datos - por ejemplo, este Gráfico de Barras tiene datos para múltiples conjuntos de datos similares. Utilizando colores diferentes para cada conjunto de datos y explicando el significado de estos colores en una leyenda, es posible combinarlos en el mismo gráfico.

El color también puede utilizarse para agrupar conjuntos de valores similares. Por ejemplo, este diagrama Sunburst muestra una jerarquía de datos. Cada anillo representa un nivel diferente en la jerarquía. Utilizando el color, podemos agrupar valores que pertenecen al mismo nivel y explicarlos en una leyenda.

Otra ventaja de D3 es que es posible variar la saturación del color, así como su tonalidad. Por ejemplo, en este diagrama Sunburst (el ejemplo superior) se varía la saturación del color en cada sección, mientras que todas las secciones del mismo anillo tienen el mismo color. En este caso, la intensidad es simplemente aleatoria, con el fin de distinguir más claramente los sectores individuales (compárese con el ejemplo en el que cada sector de un anillo tiene tanto el mismo tono como la misma saturación). Sin embargo, la saturación también podría estar relacionada con el punto de datos subyacente. En este caso, es mejor que las secciones no estén ordenadas por tamaño, ya que de lo contrario los sectores más pequeños serán demasiado difíciles de distinguir.

Otro ejemplo en el que se ha utilizado el color para hacer el diagrama más claro es este Diagrama de Sankey. En los dos ejemplos superiores, se utiliza un color para representar los nodos de origen y otro color representa los nodos de destino. Además, la densidad del color representa el tamaño de cada nodo. Estos mismos colores se utilizan en las líneas de conexión. Por lo tanto, existe un vínculo evidente entre los valores representados por los nodos y los valores representados por las líneas de conexión. En los dos últimos ejemplos, se utilizan dos colores y los valores de los datos subyacentes se representan mediante los valores relativos de estos dos colores. Esto puede resultar a veces más claro, sobre todo cuando las diferencias entre los valores de los datos son sutiles.

Por último, el color puede utilizarse a veces simplemente para separar partes del diagrama, sin ningún significado subyacente. Este es el caso del tercer ejemplo de un Diagrama Sunburst. Los colores se eligen específicamente de forma que los límites entre sectores en el diagrama Sunburst sean claramente visibles. Esto es especialmente útil cuando los valores son pequeños y los sectores son muy estrechos.

Otra forma de utilizar el color es para distinguir un determinado conjunto de puntos de datos. Esto puede combinarse con un pincel (véase más arriba). Al pasar el pincel sobre el gráfico, los usuarios pueden filtrar los puntos de datos. Los valores filtrados pueden mostrarse con un color diferente, que puede vincularse a una leyenda independiente.

Incluso sin un pincel, los colores pueden ser útiles para resaltar valores específicos. Por ejemplo, con D3.js podemos hacer que los valores atípicos tengan un color específico o utilizar colores diferentes para los valores negativos y positivos. Las visualizaciones de datos se vuelven mucho más claras cuando los colores se utilizan de forma inteligente, especialmente cuando hay muchos puntos de datos. El código de colores también se puede utilizar para mostrar la estructura general de una visualización de datos.

Los colores también pueden ayudar en las interacciones. El color de un punto, barra o línea de datos puede cambiar al pasar el ratón por encima, para destacar que ha sido seleccionado.

Cuadrícula de datos

Los datos para un gráfico D3js normalmente provienen de una de estas tres fuentes. Si es poco probable que los datos cambien muy a menudo, pueden almacenarse en un archivo JSON o CSV en el servidor. Si los datos provienen de una base de datos local que la base de datos tendrá que ser actualizado directamente, ya sea con una interfaz personalizada o con una herramienta de base de datos, tales como DBeaver. Podemos configurar esto para usted.

However, if data needs to be updated by somebody with no technical skills, the best option is for us to create a data grid for you. This looks and feels much like an Excel spreadsheet. It can either be on a page which is shielded from search engines or which is password-protected.

Una variación de una cuadrícula de datos es un formulario: funciona de forma muy parecida al formulario de contacto de un sitio web. Esto puede ser más apropiado cuando los datos deben ser introducidos por personal que no está familiarizado con una cuadrícula de datos.

Elementos de interfaz de usuario

Aunque D3.js ofrece un conjunto limitado de herramientas de interfaz de usuario, es mejor codificarlas utilizando una biblioteca de componentes, como MUI, o como HTML plano.

Los elementos de interfaz de usuario más útiles son los botones de radio y las casillas de verificación. A veces se confunden. Los botones de radio, como los que se muestran en este Gráfico de barras apiladas, permiten a los usuarios elegir entre un conjunto de opciones mutuamente excluyentes: en este caso, pueden elegir un único conjunto de datos, que se muestra como un simple gráfico de barras, o varios conjuntos de datos, que se muestran como un gráfico de barras apiladas. Sin embargo, también pueden utilizarse para cambiar la forma en que se muestran los datos. En esta visualización de datos Sunburst los botones de opción afectan a la forma en que se utiliza el color para resaltar diferentes aspectos del conjunto de datos.

Por otro lado, las casillas de verificación permiten a los usuarios elegir cualquier permutación de opciones: en este caso, las opciones no son mutuamente excluyentes. En el ejemplo de la casilla de verificación, la visualización de datos <Link>Line Chart</Link> puede mostrar sólo un conjunto de datos, dos conjuntos de datos cualesquiera o los tres. Esto resulta extremadamente útil cuando los usuarios necesitan realizar comparaciones específicas entre pares de conjuntos de datos: por ejemplo, podrían querer comparar los valores de las operaciones de corazón frente a las operaciones de hígado, y eliminar los valores de las operaciones de bazo para mejorar la claridad.

Otro elemento de interfaz de usuario que resulta útil para mejorar las visualizaciones de datos D3.js es un conmutador. Esto se utiliza cuando el diagrama puede estar en uno de dos estados, o cuando se quiere dar a los usuarios la opción de cambiar parte de la visualización de datos para mejorar la claridad. En este ejemplo se utiliza un conmutador para <Link> cambiar entre un gráfico de líneas y un gráfico de áreas</Link>.

Por último, se pueden utilizar controles deslizantes. Funcionan especialmente bien cuando una visualización de datos contiene conjuntos de datos de distintos periodos de tiempo. Permiten a los usuarios avanzar y retroceder intuitivamente en la línea temporal, como en esta visualización de datos de Sankey.