hacks and hackers 2016

Más que mil palabrasVíctor Pascual Cid

Más que mil palabrasVíctor Pascual Cid

Victor Pascual [email protected]@vpascual - www.vpascual.org

2

Visualización¿Qué es?

http://www.vpascual.org

Victor Pascual [email protected]@vpascual - www.vpascual.org ¿Qué es? 3

a graphical representation of data or concepts, which is either an internal construct of the mind

or an external artifact supporting decision making

C. Ware, 2000.

Visualization



a visual representation of information or data, e.g. as a chart or diagram.

Oxford Dictionary of English

Infographic



➡ visualizaciones estáticas➡ comunicar datos

➡ detectar patrones y outliers➡ utilizadas en formatos físicos

El País



the use of computer-supported, interactive, visual representations of abstract data to

amplify cognition

Card et al., 1999

Information Visualization



➡ visualizaciones interactivas➡ comunicar datos➡ detectar patrones y outliers

➡ explorar datos➡ personalizar la información➡ analizar en profundidad


Victor Pascual [email protected]@vpascual - www.vpascual.org El proceso 8

IntroducciónEl proceso


Victor Pascual [email protected]@vpascual - www.vpascual.org El proceso 9

el diagrama de la Visualización de Información - Dürsteler & Engelhardt (adaptado por Jaume Pérez)

º


Victor Pascual [email protected]@vpascual - www.vpascual.org Reglas 10

IntroducciónReglas básicas


Victor Pascual [email protected]@vpascual - www.vpascual.org Reglas

empezar con preguntas

11


Victor Pascual [email protected]@vpascual - www.vpascual.org Text

water consumption - epcor

gráficos auto-explicativos

12



“the purpose of visualization is insight, not pictures”

ben shneiderman (1999)

13



funcionalidad debe prevalecer frente a la estética!!

14



do’s and don’ts of infog. design - smashing magazine

15




hay valor en lo bonitotratar de hacer gráficos bellos



wind map - hint.fm





http://www.zeit.de/politik/deutschland/electionland

Victor Pascual [email protected]@vpascual - www.vpascual.org Text 20

facilita la lectura: resalta lo importante


Victor Pascual [email protected]@vpascual - www.vpascual.org Text 23Reglas

Data Points: Visualizations that means Something - nathan yaw



reglas de infovis

27

forma sigue a la necesidad


reglas de infovisreglas de infovis

“The functional Art”Alberto Cairo, 2012


➡ Mostrar varias variables➡ Presupuesto en defensa➡ Efectivos en ejército➡ Población del país

➡ Comparar variables entre paises

➡ Ordenar los paises en función de las variables

➡ Encontrar correlaciones

Objetivos




➡ Mucho espacio dedicado al mapa

Problemas



➡ Dificultad para comparar los datos➡ ¿Qué país es el más poblado?➡ ¿Qué país tiene un mayor

presupuesto?➡ ¿Qué país tiene menos efectivos?

Problemas

Victor Pascual [email protected]@vpascual - www.vpascual.orgprepara bien tus datos 33




➡ Brasil sigue siendo el país predominante en todas las variables!!!➡ ES EL PAÍS MÁS GRANDE!

Problemas

Reglas

“The functional Art” Alberto Cairo, 2012


37

IMDB ratings of my favorite series - víctor pascual


http://www.vpascual.org/blog/visualization/analyzing-the-imdb-ratings-of-my-favorite-series/


38

http://bit.ly/domestika_vis



añadir interacción(cuando sea posible)

“I hear and I forget. I see and I remember. I do and I understand”

confucious

39



➡ Data Journalism ➡ (periodismo digital)➡ democratización de las

visualizaciones

40

how different groups spend their day - new york times


http://www.nytimes.com/interactive/2009/07/31/business/20080801-metrics-graphic.html?_r=0


how different groups spend their day - new york times

Interacción con el “scroll” para contar historias

Scrollytelling



How the Recession Reshaped the Economy, in 255 Charts - new york times


http://www.nytimes.com/interactive/2014/06/05/upshot/how-the-recession-reshaped-the-economy-in-255-charts.html


A visual introduction to machin learning - http://www.r2d3.us/visual-intro-to-machine-learning-part-1/


http://www.r2d3.us/visual-intro-to-machine-learning-part-1/


44Truthful: Tratar de contar la verdad(aquella en la que creamos de la forma más objetiva posible)

alberto cairo, tapestry 2014



45

VisualizaciónAlgunos consejos


Victor Pascual [email protected]@vpascual - www.vpascual.org Aspect Ratio

➡ Aspect ratio: ratio entre altura y anchura

46



➡ Aspect ratio: ratio entre altura y anchura

47



➡ No existe un aspect ratio “ideal”➡ Tufte: evitar ratios que➡ dejen el gráfico demasiado “plano” ➡ creen picos muy pronunciados

48


Victor Pascual [email protected]@vpascual - www.vpascual.org Aspect Ratio 49

02

46

810

12

Años

Ta

sa

de

de

se

mp

leo

(%

)1948 1952 1956 1960 1964 1968 1972 1976 1980 1984 1988 1992 1996 2000 2004 2008

0246

81012

Años

Tasa de desempleo (%

)

1948 1952 1956 1960 1964 1968 1972 1976 1980 1984 1988 1992 1996 2000 2004 2008

02

46

810

12

Años

Tasa

de

dese

mpl

eo (%

)

1948 1952 1956 1960 1964 1968 1972 1976 1980 1984 1988 1992 1996 2000 2004 2008

Mala práctica!

Mala práctica!

No aplicar un aspect ratio “natural”



50



51

Mala práctica!

Utilizar áreas en lugar de distancias


Victor Pascual [email protected]@vpascual - vpascual.org/blog

Visualización de Información Master en Comunicación y Marketing Online

Objetivos 52

otro gráfico para la historia - malaprensa.com

http://www.vpascual.org/bloh

http://malaprensa.com



Objetivos 53


7394

61421





Objetivos 54


Mala práctica!

Ocultar los ejes y modificar posiciones




Modificar la secuencia de valores de un eje

Mala práctica!



portada - el mundo 04-02-2009

57




58



+47%




+194%

60



Victor Pascual [email protected]@vpascual - www.vpascual.org Manipular 61





No centrar gráficos de barrasen el 0

Mala práctica!

Mala práctica!

Mala práctica!

Mala práctica!

Mala práctica!

Mala práctica!



64

¿Por qué?



65

the macroscope - joel de rosnay (1979)



66

moritz stefaner“worlds, not stories”



Muchas gracias!


hacks and hackers 2016

Data & Analytics