13 KiB

Raw Permalink Blame History

Creando Visualizaciones Significativas


Visualizaciones Significativas - Sketchnote por @nitya

"Si torturas los datos lo suficiente, confesarán cualquier cosa" -- Ronald Coase

Una de las habilidades básicas de un científico de datos es la capacidad de crear una visualización de datos significativa que ayude a responder preguntas. Antes de visualizar tus datos, debes asegurarte de que hayan sido limpiados y preparados, como hiciste en lecciones anteriores. Después de eso, puedes comenzar a decidir cómo presentar mejor los datos.

En esta lección, revisarás:

Cómo elegir el tipo de gráfico adecuado
Cómo evitar gráficos engañosos
Cómo trabajar con el color
Cómo estilizar tus gráficos para mejorar la legibilidad
Cómo construir soluciones de gráficos animados o en 3D
Cómo crear una visualización creativa

Cuestionario previo a la lección

Elige el tipo de gráfico adecuado

En lecciones anteriores, experimentaste con la creación de todo tipo de visualizaciones de datos interesantes utilizando Matplotlib y Seaborn. En general, puedes seleccionar el tipo de gráfico adecuado para la pregunta que estás haciendo utilizando esta tabla:

Necesitas:	Deberías usar:
Mostrar tendencias en el tiempo	Línea
Comparar categorías	Barra, Pastel
Comparar totales	Pastel, Barra apilada
Mostrar relaciones	Dispersión, Línea, Faceta, Línea dual
Mostrar distribuciones	Dispersión, Histograma, Caja
Mostrar proporciones	Pastel, Donut, Waffle

✅ Dependiendo de la composición de tus datos, es posible que necesites convertirlos de texto a numérico para que un gráfico determinado los soporte.

Evita el engaño

Incluso si un científico de datos es cuidadoso al elegir el gráfico adecuado para los datos, hay muchas formas en que los datos pueden ser mostrados para probar un punto, a menudo a costa de socavar los datos mismos. ¡Existen muchos ejemplos de gráficos e infografías engañosos!

🎥 Haz clic en la imagen de arriba para ver una charla sobre gráficos engañosos

Este gráfico invierte el eje X para mostrar lo opuesto a la verdad, basado en la fecha:

Este gráfico es aún más engañoso, ya que el ojo se dirige hacia la derecha para concluir que, con el tiempo, los casos de COVID han disminuido en los diversos condados. De hecho, si miras de cerca las fechas, encontrarás que han sido reorganizadas para dar esa tendencia descendente engañosa.

Este ejemplo notorio utiliza color Y un eje Y invertido para engañar: en lugar de concluir que las muertes por armas aumentaron después de la aprobación de una legislación favorable a las armas, de hecho el ojo es engañado para pensar que ocurrió lo contrario:

Este gráfico extraño muestra cómo la proporción puede ser manipulada, con un efecto hilarante:

Comparar lo incomparable es otra táctica dudosa. Existe un sitio web maravilloso sobre 'correlaciones espurias' que muestra 'hechos' correlacionando cosas como la tasa de divorcio en Maine y el consumo de margarina. Un grupo de Reddit también recopila los usos feos de los datos.

Es importante entender lo fácil que es engañar al ojo con gráficos engañosos. Incluso si la intención del científico de datos es buena, la elección de un mal tipo de gráfico, como un gráfico de pastel que muestra demasiadas categorías, puede ser engañosa.

Color

Viste en el gráfico de 'violencia con armas en Florida' cómo el color puede proporcionar una capa adicional de significado a los gráficos, especialmente aquellos que no están diseñados utilizando bibliotecas como Matplotlib y Seaborn, que vienen con diversas bibliotecas y paletas de colores verificadas. Si estás creando un gráfico manualmente, estudia un poco sobre teoría del color.

✅ Ten en cuenta, al diseñar gráficos, que la accesibilidad es un aspecto importante de la visualización. Algunos de tus usuarios podrían ser daltónicos: ¿tu gráfico se muestra bien para usuarios con discapacidades visuales?

Ten cuidado al elegir colores para tu gráfico, ya que el color puede transmitir un significado que no pretendes. Las 'damas rosadas' en el gráfico de 'altura' arriba transmiten un significado distintivamente 'femenino' que añade a lo extraño del gráfico en sí.

Aunque el significado del color puede ser diferente en distintas partes del mundo y tiende a cambiar según su tonalidad, generalmente los significados incluyen:

Color	Significado
rojo	poder
azul	confianza, lealtad
amarillo	felicidad, precaución
verde	ecología, suerte, envidia
púrpura	felicidad
naranja	vitalidad

Si se te asigna la tarea de crear un gráfico con colores personalizados, asegúrate de que tus gráficos sean accesibles y que el color que elijas coincida con el significado que intentas transmitir.

Estilizando tus gráficos para mejorar la legibilidad

Los gráficos no son significativos si no son legibles. Tómate un momento para considerar el estilo del ancho y alto de tu gráfico para que se ajuste bien a tus datos. Si una variable (como los 50 estados) necesita ser mostrada, muéstralos verticalmente en el eje Y si es posible para evitar un gráfico con desplazamiento horizontal.

Etiqueta tus ejes, proporciona una leyenda si es necesario y ofrece información emergente para una mejor comprensión de los datos.

Si tus datos son textuales y extensos en el eje X, puedes inclinar el texto para mejorar la legibilidad. Matplotlib ofrece gráficos en 3D si tus datos lo permiten. Se pueden producir visualizaciones de datos sofisticadas utilizando mpl_toolkits.mplot3d.

Animación y visualización de gráficos en 3D

Algunas de las mejores visualizaciones de datos hoy en día son animadas. Shirley Wu tiene ejemplos increíbles hechos con D3, como 'film flowers', donde cada flor es una visualización de una película. Otro ejemplo para el Guardian es 'bussed out', una experiencia interactiva que combina visualizaciones con Greensock y D3 más un formato de artículo narrativo para mostrar cómo Nueva York maneja su problema de personas sin hogar enviándolas fuera de la ciudad.

"Bussed Out: Cómo Estados Unidos mueve a sus personas sin hogar" del Guardian. Visualizaciones por Nadieh Bremer & Shirley Wu

Aunque esta lección no es suficiente para profundizar en estas poderosas bibliotecas de visualización, intenta usar D3 en una aplicación Vue.js utilizando una biblioteca para mostrar una visualización del libro "Las Amistades Peligrosas" como una red social animada.

"Les Liaisons Dangereuses" es una novela epistolar, o una novela presentada como una serie de cartas. Escrita en 1782 por Choderlos de Laclos, cuenta la historia de las maniobras sociales viciosas y moralmente corruptas de dos protagonistas enfrentados de la aristocracia francesa del siglo XVIII, el Vizconde de Valmont y la Marquesa de Merteuil. Ambos encuentran su final trágico, pero no sin causar un gran daño social. La novela se desarrolla como una serie de cartas escritas a varias personas en sus círculos, tramando venganzas o simplemente causando problemas. Crea una visualización de estas cartas para descubrir los principales personajes de la narrativa, de manera visual.

Completarás una aplicación web que mostrará una vista animada de esta red social. Utiliza una biblioteca creada para generar una visualización de una red usando Vue.js y D3. Cuando la aplicación esté funcionando, puedes mover los nodos en la pantalla para reorganizar los datos.

Proyecto: Construye un gráfico para mostrar una red usando D3.js

Esta carpeta de lección incluye una carpeta solution donde puedes encontrar el proyecto completo como referencia.

Sigue las instrucciones en el archivo README.md en la carpeta raíz del starter. Asegúrate de tener NPM y Node.js funcionando en tu máquina antes de instalar las dependencias de tu proyecto.
Abre la carpeta starter/src. Descubrirás una carpeta assets donde puedes encontrar un archivo .json con todas las cartas de la novela, numeradas, con una anotación de 'para' y 'de'.
Completa el código en components/Nodes.vue para habilitar la visualización. Busca el método llamado createLinks() y añade el siguiente bucle anidado.

Recorre el objeto .json para capturar los datos de 'para' y 'de' de las cartas y construye el objeto links para que la biblioteca de visualización pueda consumirlo:

//loop through letters
      let f = 0;
      let t = 0;
      for (var i = 0; i < letters.length; i++) {
          for (var j = 0; j < characters.length; j++) {
              
            if (characters[j] == letters[i].from) {
              f = j;
            }
            if (characters[j] == letters[i].to) {
              t = j;
            }
        }
        this.links.push({ sid: f, tid: t });
      }

Ejecuta tu aplicación desde la terminal (npm run serve) y disfruta de la visualización.

🚀 Desafío

Haz un recorrido por internet para descubrir visualizaciones engañosas. ¿Cómo engaña el autor al usuario y es intencional? Intenta corregir las visualizaciones para mostrar cómo deberían verse.

Cuestionario posterior a la lección

Revisión y autoestudio

Aquí hay algunos artículos para leer sobre visualización de datos engañosa:

https://gizmodo.com/how-to-lie-with-data-visualization-1563576606

http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/

Echa un vistazo a estas visualizaciones interesantes sobre activos y artefactos históricos:

https://handbook.pubpub.org/

Revisa este artículo sobre cómo la animación puede mejorar tus visualizaciones:

https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4

Tarea

Construye tu propia visualización personalizada

Descargo de responsabilidad:
Este documento ha sido traducido utilizando el servicio de traducción automática Co-op Translator. Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

13 KiB Raw Permalink Blame History