Introducción

DynamicD3 ofrece visualizaciones de datos personalizadas utilizando D3.js. Trabajaremos con usted para ayudarle a seleccionar la forma más eficaz de mostrar sus datos: esto podría incluir Gráficos de Barras, Gráficos de Líneas, Gráficos de Tarta, Diagramas Sankey o visualizaciones de datos más exóticas como cloropletas, Gráficos de Burbujas o Diagramas Sunburst.

Las visualizaciones de datos D3.js pueden incluir un gran número de Add Ons como tool-tips, zooms, mouse-overs y animaciones. Estos ayudan a los usuarios a entender los datos de manera más intuitiva y proporcionan una experiencia atractiva que no es posible con visualizaciones de datos estáticas. También podemos crear una interfaz de usuario personalizada (con botones de opción, casillas de verificación, controles deslizantes o interruptores de palanca) que amplíe aún más la gama de experiencias interactivas.

Le proporcionamos JavaScript plano, que puede insertar directamente en su sitio web, o un componente React. Crearemos una página web sencilla y gratuita como demostración. Como opción, podemos crear una rejilla de datos para que puedas actualizar tus datos fácilmente.

D3.js puede utilizar datos de un archivo estático JSON o CSV, o puede tomar datos de una API. También podemos crear una rejilla de datos para que puedas actualizar los datos fácilmente.

Gráficos de barras

Los gráficos de barras se suelen utilizar para datos categóricos, como este ejemplo en el que se compara el número de operaciones de tres órganos concretos en un gran hospital.

Tenga en cuenta que un diagrama de barras no es lo mismo que un histograma, aunque se parezcan. Un histograma no tiene datos categóricos, como los países (en los que un punto de datos está inequívocamente en una categoría u otra). En su lugar, muestra datos que forman un continuo, pero que se dividen en diferentes rangos, denominados intervalos. Por ejemplo, un conjunto de datos en el que el eje x muestre la distancia desde un punto determinado podría dividirse en intervalos. Sin embargo, esos rangos son arbitrarios y se suelen elegir para mostrar los datos con claridad.

D3.js puede utilizarse tanto para un gráfico de barras como para un histograma, y cualquiera de ellos puede representar uno o varios conjuntos de datos. También puede utilizarse para representar datos continuos. Sin embargo, esto se muestra más apropiadamente en un gráfico de líneas o de dispersión.

Gráficos de líneas

Line Charts and Area Charts displays data points over a continuous interval or time period. Depending on the curve used to connect the lines it shows trends and patterns over time. The horizontal, or x-axis represents the independent variable (often time), while the vertical axis represents the dependent variable (the value which has been measured). If the horizontal axis represents time this can be labelled using standard units of time and date, such as seconds, minutes, months and years. D3.js is extremely flexible in this regard. Date and time labels can be localized (for example, by using words in another language to represent the months).

Los gráficos de líneas son especialmente útiles para mostrar varios conjuntos de datos relacionados de algún modo. Estos conjuntos de datos suelen utilizar el mismo eje x, pero pueden tener escalas y ejes y diferentes. Son especialmente útiles para ver tendencias en diferentes conjuntos de datos (como comparar cuándo se produce un pico de enfermedad en diferentes países). En este ejemplo se utiliza una interfaz de usuario para cambiar entre diferentes combinaciones de conjuntos de datos. Tenga en cuenta que D3.js puede ajustar automáticamente la escala del eje vertical a medida que cambian los datos.

Otro punto fuerte de los gráficos lineales es su capacidad para analizar tendencias con eficacia. Puede dibujarse una curva que pase por cada punto o que muestre tendencias a corto o largo plazo. En el ejemplo enlazado más arriba se ha añadido una interfaz de usuario para que los usuarios puedan explorar el conjunto de datos de distintas maneras utilizando diferentes curvas.

A variation on the line chart is the area chart, in which the area under the line is shaded. This is also shown in the example on the Line Chart page

Gráficos circulares

En un gráfico circular, el ángulo de cada rebanada es proporcional a la cantidad que representa. Los gráficos de tarta y los gráficos de rosquilla son iguales, excepto que los gráficos de rosquilla tienen un agujero en el centro que puede contener datos. Los gráficos Donut pueden tener múltiples anillos que muestran una jerarquía de valores de datos; sin embargo, este tipo de gráfico se denomina Diagrama Sunburst.

Los gráficos circulares se utilizan habitualmente en los periódicos. Sin embargo, aunque son familiares y fáciles de entender, no son la mejor manera de mostrar datos proporcionales o categóricos, porque es difícil comparar valores diferentes (a diferencia de un diagrama de barras, donde las alturas de los rectángulos pueden compararse fácilmente. Sin embargo, son útiles cuando los datos representan una proporción de un valor total. Las proporciones también pueden mostrarse con gráficos de barras, pero esto es menos obvio intuitivamente.

La metáfora de una tarta puede ampliarse dibujando un trozo de la tarta hacia fuera. Esto puede hacerse de forma estática o utilizando un efecto del ratón, como se muestra en la página Gráfico de tartas. Esto se conoce como un gráfico de tarta desglosado. Puede encontrar información más detallada en la sección de despiece.

Diagramas Sunburst

Los gráficos Sunburst son una forma de gráfico circular multinivel. A veces se conocen como treemaps radiales, porque los datos tienen la misma estructura jerárquica que un treemap convencional.

Este tipo de visualización de datos muestra la jerarquía a través de una serie de anillos que se cortan para cada nodo de categoría. Cada anillo corresponde a un nivel en la jerarquía, con el círculo central representando el nodo raíz y la jerarquía moviéndose hacia fuera desde él. Por ejemplo, en este ejemplo se dividen los tipos de operación. El primer anillo divide las operaciones según el órgano al que afectan. El siguiente anillo divide cada una de estas secciones según el tipo de tratamiento (conservador, operación, trasplante o fármacos) y el siguiente anillo muestra si los pacientes tenían o no seguro. Al pasar el ratón por encima se muestran los valores subyacentes en una pantalla en la parte inferior. Esto significa que los usuarios pueden explorar los datos desplazándose por la pantalla. Por ejemplo, podrían querer saber en qué difiere la proporción de pacientes que recibieron tratamiento renal en función de su cobertura de seguro.

El color puede utilizarse para resaltar agrupaciones jerárquicas o categorías específicas. En el ejemplo anterior, el usuario puede cambiar el esquema de colores para resaltar distintos aspectos del conjunto de datos. En el primer ejemplo, se utilizan diferentes gamas de colores para cada anillo. Esto facilita la comprensión de los datos mostrados en cada anillo y, al mismo tiempo, deja claros los límites de las secciones. Sin embargo, esto no funciona con grandes conjuntos de datos. En este caso, resulta más claro si todas las secciones de un anillo concreto tienen el mismo tono. Por último, en algunos casos se pueden utilizar colores aleatorios. Éstos dificultan la comprensión del significado de cada nivel en la jerarquía, pero facilitan la visualización de los distintos sectores. La visualización de la interfaz de usuario en el ejemplo Sunburst alterna entre estas alternativas.

Diagrama Sankey

Los diagramas de Sankey se utilizan para representar procesos de flujo, como el flujo de dinero dentro de una organización (tal y como se muestra en un estado financiero), el flujo de energía o materias primas a través de una serie de procesos industriales o el flujo de un activo más abstracto, como la información. La altura o anchura de cada nodo representa la cantidad total de flujo que pasa por ese nodo y el grosor de las líneas entre cada par de nodos representa la cantidad de flujo que pasa entre esos nodos. Se puede utilizar el color, ya sea para mostrar la cantidad de flujo (por ejemplo, utilizando un gradiente de color) o para mostrar algún otro aspecto del proceso, como en este diagrama de Sankey, que utiliza colores para ilustrar el flujo de refugiados.

Un ámbito en el que se utilizan a menudo las Sankeys es el sector energético. Por ejemplo, pueden mostrar la fuente de gas natural por países, los medios por los que llega a su destino (gasoducto, barco, etc.) y luego cómo se utiliza (usuarios finales). Este tipo de diagramas son útiles para los responsables políticos, ya que ponen de relieve las áreas en las que se puede mejorar la eficiencia.

Los diagramas de Sankey son una forma especialmente intuitiva de mostrar los cambios a lo largo del tiempo. En este diagrama de Sankey se muestra el flujo de refugiados de varios países de origen a Estados Unidos a lo largo de un periodo de tiempo. El control deslizante permite a los usuarios desplazarse por la línea temporal, y las transiciones suaves facilitan el seguimiento de los nodos a medida que aumentan o disminuyen en importancia.

Cloropleto

Los coropletos utilizan el color para mostrar cómo varía una variable en una zona geográfica. Son similares a los mapas térmicos, pero, a diferencia de éstos, dividen el mapa en subunidades geopolíticas, como países, estados, provincias o condados.

Los valores utilizados en un cloropleto deben tener en cuenta los distintos tamaños de las zonas. Por ejemplo, hay una gran diferencia entre los tamaños de los distintos países, por lo que no tiene sentido colorear los países basándose sólo en su población. En su lugar, estos datos se "normalizarían" entre regiones utilizando la densidad de población en lugar de la población absoluta. En ambos tipos de visualización, los colores más oscuros o intensos suelen representar valores más altos, mientras que los colores más claros o pálidos indican valores más bajos.

Por desgracia, los datos del mundo real no suelen dividirse en categorías naturales. Por ejemplo, un cloropleto en el que la intensidad de un color fuera proporcional a la densidad de población podría funcionar cuando hay una diferencia similar entre las densidades de población de distintas regiones (como entre distintos condados del mismo estado de EE.UU.). Sin embargo, a menudo los datos contienen valores que son órdenes de magnitud mayores que otros valores del mismo conjunto de datos. Afortunadamente, D3.js dispone de un rico conjunto de escalas. En algunos casos, una escala logarítmica podría ser más apropiada: esto mostraría bien las pequeñas diferencias, pero también mostraría diferencias mucho mayores. En otros casos, se podría utilizar un color para mostrar valores por encima o por debajo de un determinado umbral. Es este alto nivel de flexibilidad lo que hace de D3.js una herramienta tan poderosa para crear visualizaciones de datos.

Además de ayudarnos a escalar los datos, D3.js nos permite utilizar una amplia gama de proyecciones cartográficas: estas tienen un gran impacto en la forma en que se perciben los datos. Los cloroproyectos elaborados con otras bibliotecas suelen utilizar proyecciones estándar, como la de Mercator, que pueden provocar grandes distorsiones en determinadas partes del mundo. Este problema es menor cuando el mapa muestra zonas más pequeñas, como los condados del Reino Unido, o cuando las zonas mostradas se encuentran todas a una latitud similar.

Por último, es posible utilizar dos datos distintos (pero relacionados), cada uno con una escala de colores diferente. Es lo que se conoce como Cloropleto bidimensional.

Gráfico de burbujas

Los gráficos de burbujas son como los de dispersión, pero los datos se sustituyen por círculos. Mientras que un gráfico de dispersión sólo puede utilizar la posición y el color de un punto para representar la información, un gráfico de burbujas también tiene dimensiones horizontales y verticales. Esto hace que los gráficos de burbujas sean especialmente adecuados para mostrar relaciones multidimensionales.

Si sólo es necesario mostrar una información adicional para cada círculo, ésta puede representarse mediante el área del círculo. Sin embargo, esto puede ser problemático, porque los usuarios tienden a juzgar los tamaños relativos de los círculos basándose en su diámetro y no en sus áreas. Es importante dejarlo claro en la leyenda.

Los gráficos de burbujas funcionan peor cuando hay muchos puntos de datos, y cuando hay un gran rango de datos. Cuando hay demasiados puntos de datos, la visualización puede parecer abarrotada y las burbujas pueden solaparse. Cuando hay un gran rango de valores en el conjunto de datos, las burbujas más pequeñas pueden no ser claramente visibles. Estos problemas pueden solucionarse hasta cierto punto utilizando interacciones con el ratón para obtener más información, como el valor exacto del punto de datos subyacente.

Un último problema de los gráficos de burbujas es la ilusión de la media ponderada: el tamaño de las burbujas afecta a la percepción de los valores x e y del punto de datos. Esta distorsión debe tenerse en cuenta al estimar los valores medios x e y.

Los gráficos de burbujas que necesitan mostrar valores negativos pueden crearse utilizando un símbolo en el centro de las burbujas que representan valores negativos, diferentes colores para positivo y negativo o incluso diferentes formas. Con D3.js este nivel de flexibilidad es posible, pero este no es el caso con la mayoría de las bibliotecas de visualización de datos.