Elementos de base

Un gráfico está formado de distintas piezas. Algunas de ellas son propias de él, como los ejes y series de datos, y otras estructuras también son parte de otros elementos de diseño, como las burbujas de información, los puntos y las leyendas.


Anatomía de un gráfico

El área de un gráfico es todo lo que comprende el gráfico, desde el título hasta la leyenda. Estas diferentes partes pueden estar compuestas, a su vez, por elementos más pequeños: por ejemplo, el tipo de gráfico es creado mediante puntos, líneas o áreas.

  1. Título de la visualización
  2. Label (etiqueta)
  3. Título de eje
  4. Tooltip (globo de información)
  5. Leyenda
  6. Fuente de información

Puntos

Los puntos representan valores para datos específicos. Cada punto en el gráfico es un valor para una variable en el eje vertical (eje o Lebel Y) en función de otra variable en el eje horizontal (eje o Lebel X).

Los puntos se colocan en coordenadas específicas dentro del gráfico, y la conexión entre estos puntos mediante líneas sirve para visualizar la progresión de los valores entre ellos.

Los puntos además sirven para identificar patrones, tendencias o cambios en los datos. Por ejemplo, en un gráfico de líneas, los puntos ayudan a identificar el peak de un dato. Incluso de forma individual, los puntos pueden resaltar valores atípicos o extremos en los datos, que es relevante para identificar anomalías o patrones interesantes dentro de la información representada en el gráfico.


Líneas

Las líneas con distinción de colores pueden ayudar a diferenciar y comparar fácilmente diferentes conjuntos de datos. Esto permite visualizar y analizar múltiples variables en un solo gráfico. Esto facilita la identificación de patrones, tendencias o relaciones entre los datos representados por cada línea.


Areas

Las áreas de color muestran múltiples series de datos. Pueden ser de un color o de varios. En el caso de varios colores superpuestos, corresponden a áreas apiladas, donde la altura de la sección en un punto específico indica el valor de esa serie en ese punto.

La combinación de estas áreas apiladas revela tanto la tendencia general del conjunto como la contribución relativa de cada serie al total.


Leyendas

Las leyendas son elementos clave para comprender la información representada visualmente.

Por lo general, las leyendas son áreas dentro del gráfico que asignan etiquetas a los diferentes elementos gráficos, como líneas, colores o formas, y explican lo que cada uno representa.


Ejes y label

En un gráfico, los ejes X e Y representan variables o dimensiones específicas. El eje X representa la variable independiente y el eje Y representa la variable dependiente. Juntos, estos ejes nos muestran la relación entre dos variables y cómo cambian en relación entre sí.

  • El eje X, (ubicado horizontalmente en la parte inferior del gráfico), representa la variable independiente (que no depende de otra) en el gráfico. Por ejemplo, en un gráfico de tiempo versus temperatura, el eje X podría representar el tiempo.
  • El eje Y, (situado verticalmente), representa la variable dependiente, que cambia en función de la variable en el eje X (como el ejemplo anterior, en un gráfico de tiempo versus temperatura, el eje Y representaría la temperatura, ya que esta variable puede variar dependiendo del tiempo.)

Intervalo de confianza

El intervalo de confianza brinda una representación visual de la certeza o incertidumbre alrededor de una estimación puntual dentro de un gráfico, ofreciendo una idea de la variabilidad y precisión de los datos.

En un gráfico, se representa visualmente como una banda alrededor de la estimación puntual, como la media o la mediana.

Cuanto más amplio sea el intervalo de confianza, mayor será la incertidumbre sobre la estimación puntual. Por otro lado, un intervalo más estrecho indica una mayor precisión en la estimación.


Las cards son un componente de interfaz que muestra y tiene acciones relacionadas a un sólo tema. Deben ser fáciles de leer y escanear visualmente para identificar información accionable. Elementos del gráfico como barras, líneas, ejes y leyendas deben estar situados de manera que quede clara la jerarquía de elementos.

Título gráfico de barras apiladas

Conj. datos A
Conj. datos B
Conj. datos C
Conj. datos D
Conj. datos E
Conj. datos F

Iconos

El kit Digital UC usa la librería de iconos de Material Design Para usar los iconos, se debe incluir el texto asociado al icono en el tag: <i class="uc-icon"></i>