visualization

Retrospectiva del curso “Introduction to Infographics and Data Visualization”

Ya he terminado con mi primero MOOC. Durante seis semanas he estado aprendiendo un poquito sobre infografía y visualización de datos. Sin duda, las experiencia ha sido muy positiva. Noo creo que pudiese ponerme a trabajar en un medio haciendo infografías, pero si que he aprendido bastantes cosas que ya me están ayudando en mi trabajo. Entre ellas como mejorar la organización de un dashboard o que tipo de gráfica elegir en cada momento.

No he colgado ninguno de los dos últimos gráficos que he diseñado. En el primero, medio en serio medio en broma, animo a nuestros ricos a abandonar el país. Como trabajo fin de curso he analizado los indultos concedidos durante los últimos 15 años en España. Los datos los he sacado del github de el indultometro y los he procesado según las necesidades con PHP y JS. Sin duda la parte más floja es la presentación, por mucho que uno quiera los técnicos no somos los tíos con más toque para el diseño.

Como resumen final una lista de cosas que me han gustado y que no me han gustado del MOOC.

Cosas que SI me gustan del MOOC

  • He aprendido con uno de las personas más expertas en infografía/visualización de datos (@albertocairo) del mundo totalmente gratis.
  • Aprender online me permite marcarme la agenda como yo quiera.
  • Voy a pagar 30$ por el certificado.
  • No me hubiera importado pagar un fee por el curso al finalizar.

Cosas que NO me gustan del MOOC

  • El interfaz que teníamos para ver las lecturas, artículos o comentar nuestros trabajos era HORRRIBLE. He perdido muchísimo tiempo buscando donde había puesto mis trabajos.
  • Esto es más un lloro que una queja….Si quieres sacar partido al curso hay que echarle horas.

Solo puedo recomendar que os apuntéis a este tipo de cursos. Coursera, Udacity o EdX están repletos de cursos muy potentes que además te harán mejorar tu ingles

Standard
visualization

Tercera semana del curso “Introduction to Infographics and Data Visualization”

En el ejercicio de esta semana nos proponían la lectura de unos cuantos artículos (1 2 3 4) relacionados con el mundo de la universidad. Concretamente con el concepto de Tenure. Además se nos proporcionaba un dataset con porcentajes y números que debería valernos para validar o refutar las hipótesis formuladas en dichos artículos.

My idea for this visualization is to make an interactive graph that lets the user to navigate through the different levels of information that are provided by the data. The first level shows the aggregated data of the tenured faculties in percentage and numbers. These graphics shows an overview of our story. As we can see it looks like there isn’t a serious problem. At the end the % decrease of tenured faculties is small although the total numbers of tenured is growing during this period of time. We’ve to remember that the tenure is something for the whole life.

Graphic 1: Perfect Distribution of Tenured Faculty
Graphic 2: Number of Tenured Faculties by Rank

The second level of information that I want to show is related to the rank of the faculties. We’ve data for six types of faculties (professor, associate, assistant, instructor, lecturer and other). My idea is to let the user the freedom to navigate through this information. In the visualization you could have a select menu with these types that will change the graphics. I’ve attached the graphics for the professor rank

Graphic 3: Perfect Distribution of Tenured Professors
Graphic 4: Number of Tenured Professors

If in the previous level the user can filter by rank in this level my idea is to user the type of track (tenured, on track, non tenured) to configure the graph. I’ve included two graphics one for tenured and other for tenured track

Graphic 5: % of Tenured Faculties by Rank
Graphic 6: % on tenured track by rank
Graphic 7: % of non-tenured by rank

Most of the articles put the emphasis in the point that the university is changing the tenured with the non-tenured. If we look at these graphics we can see very clear that this hypothesis is incorrect. We can see that the % of non-tenured faculties is mostly the same during the period analyzed.

Standard
visualization

Segunda semana del curso “Introduction to Infographics and Data Visualization”

En el trabajo de esta semana nos han vuelto a pedir que analicemos una visualización e intentemos mejorarla con nuestras aportaciones. Este vez he decidido hacer los sketchs a boli.

Citation Patterns Visualization

The purpose of the chart is to show the relationship between the various scientific publications and the citation to make between each other. At first glance the visualization is very cool. You can select the data at a journal level and at a category level. The journals are divided in four categories levels, the first problem that arise is that we don’t know what are the name of this categories and what are the reasons for this grouping.

The display shows two types of data for each publication:

- EigenFactor of each journal. How this value is calculated isn’t disclosed neither the visualization page neither a link with information about the EigenFactor. We understand that is a value that must be known by the scientific community. If we want to reach a bigger audience we should explain exactly how this value is calculated. In the visualization the value of this factor is represented by the surface of the circle. With this type of representation is difficult to calculate the relations with the rest of the journals. Without doubt it will be more clear you use a simple bar char to compare this value.

Week2_BarChart

- IN/OUT citation: This factor make a relation between the number of citations that comes from a journal and go to another. In the visualization don’t appear exactly how is calculated this value so it’s difficult to extract information about this point.

The interaction with the display occurs at two levels: You can select the sector of a journal and it appear highlighted all the journals of that sector and the relations with the journals that send / receive a citation with that journals. The other option is to select a journal and the appears all the journals that send / receive a citation with it. As the size of the journal in the visualization depends of the Eigenfactor it’s hard to select journals with a small Eigenfactor. The citation relation between the journals is made with the thickness of the lines. This is another point that make the comparison very difficult. It’s practically impossible to look for correlations and patterns in the visualization.

To improve this part of the visualization I propose to include a scatter plot chart. The idea is to select first a journal to analyze. The new chart will include the IN / OUT data in the X / Y Axis. The size of the bubble associated will be represented by the EigenFactor. I believe that this kind of graphic will show more easily the patterns that we’re looking for.

Week2_ScatterPlot

I’m not a user related to the world of scientific publications. With the visualization shown I can’t draw any conclusion or story. As a reader the questions that I ask me are: What are the most prestigious journals? Are the same journals cited between them? are there more important factors that the EigenFactor, maybe the numbers of articles, the age of the publication or the country where the journal is published?

Standard
visualization

Mi primer MOOC

Esta semana he comenzado con mi primer MOOC. La materia en la cual me he matriculado es “Introduction to Infographics and Data Visualization”. La razón principal por la que he elegido este curso es porque durante las charlas de Hacks & Hackers ya han aparecido varios proyectos de visualización que me han resultado muy interesantes y segundo como buen programador el gusto que tengo en el diseño es nulo y tengo la esperanza de aprender algo de diseño que pueda aplicar a mi vida de técnico.

Para la primera semana de trabajo hemos tenido que analizar la siguiente infografía que muestra cuando es el mejor momento para publicar en twitter / facebook. Nuestro trabajo ha consistido en criticarla y proponer un diseño alternativo. A continuación incluyo mis comentarios y propuestas.

The objective of the infographic is to show when we should have more impact publishing on two social networks (twitter and facebook). The 3D graphic is difficult for the interpretation and analysis. If you don’t read the text that surrounds the graphics it is difficult to know what is exactly the optimum time for publishing. The infographic presents different analysis for the networks too. The data from twitter is more useful and includes the best time period and the avoid time period. With facebook the data presented is different: best time of the week and best time period.

For both networks, the infographic includes when the networks gets the most traffic. Because this information isn’t put together with the click-through (CTR) graphics it’s difficult to analyze if exists correlation between both. Although the text included don’t facilitate the interpretation: “more traffic more competition”. I don’t know if it’s good or bad to publish on high traffic periods.

The headline I’ve got for the infographic is related more with the use of the networks than for the impact of the publishing of the networks. Twitter is a network mostly used during workdays, the use goes down during the weekend (a lot of companies stops working Fridays at 3:00 P;). Facebook has a more anarchic use during the week. What we can see is that effectiveness of publishing increase around the lunch time: 1-3PM for twitter and 1-4PM for Facebook.

There are two variables that will improve the analysis  One is the number of users connected at a time to the network and the other is the reach of the publications. The CTR takes the numbers of users that see your post and divides by the numbers of users that click or read the post. A 50% CTR looks good but maybe only one person read the post. Although the active users on Facebook (800M) and twitter (200M) are very different. Sometimes the CTR isn’t a very good indicator.

I’ve tried to rewrite the infographic with two different charts. I couldn’t find the exact data so I’ve tried to guess the correct values.

Gráfica que compara el % de CTR por horas del día entre facebook y twitter.

Grafica que compara el % de CTR por horas del día entre facebook y twitter.

Gráfica de barras que compara el % CTR medio entre las redes sociales twitter y facebookk

Gráfica de barras que compara el % CTR medio entre las redes sociales twitter y facebookk

 

 

Standard
arduino

Proyecto I: Encendiendo un LED

Antes de empezar con los proyectos es necesario la instalación de nuestro Kit. El paquete viene con un soporte de madera que facilita la realización de los proyectos. Basta con atornillar nuestro Arduino Uno y nuestra placa de pruebas para tenerlo todo listo.

Arduino Uno

Arduino Uno y placa de pruebas

Instalar el entorno de desarrollo también es muy sencillo. En mi caso tanto en casa como en el trabajo utilizo Ubuntu. Los paquetes necesarios están incluidos dentro de Ubuntu Center con lo que basta con ejecutar el siguiente comando sudo apt-get install arduino.

Para comprobar que todo esta funcionando correctamente conectaremos el cable USB que viene en el paquete con nuestra placa. Si no hay problemas se encenderá un LED de color verde con la etiqueta ON y comenzará a parpadear otro de color naranja con la etiqueta L.

El siguiente paso es enviar un programa a nuestra placa. El IDE se arranca mediante el comando arduino. Primero hay que configurar el modelo de placa que utilizamos en el menú Tools->Board y luego el puerto al cual está conectada la placa Tools->Serial Port. Es posible que a la hora de configurar el puerto no nos aparezca ninguna opción disponible. Esto puede ser debido a que el usuario con el que estamos trabajando no tenga permisos de lectura sobre este dispositivo. Para arreglarlo basta con ejecutar el comando chmod a+rw /dev/ttyACM0. Es importante tener en cuenta que no necesariamente el puerto USB de tu equipo corresponderá con /dev/ttyACM0. Para averiguar que puerto debes utilizar puedes recurrir al comando dmesg | tail. Dentro de la salida que se muestra aparecerá el nombre del puerto.

Dentro del IDE vienen bastantes ejemplos que nos pueden ayudar a aprender sobre el funcionamiento de nuestra placa. De hecho la placa viene con un programa precargado que hace que se parpadeé el LED L. Para ver como es este programa ejecuta la opción File->Examples->Basics->Blink. Para comprobar que está funcionando correctamente vamos a hacer una pequeña modificación en el programa alterando la velocidad de parpadeo. Para ello basta con modificar las funcionas delay a nuestro gusto tal como se muestra en el programa que aparece a continuación.

[crayon]
void setup() {
// Inicializamos el LED que viene conectado al arduino uno
pinMode(13, OUTPUT);
}

void loop() {
digitalWrite(13, HIGH); // Encedemos el LED
delay(500); // Esperamos medio segundo
digitalWrite(13, LOW); // Apagamos el LED
delay(2000); // Esperamos dos segundos
}
[/crayon]

Si todo funciona correctamente veremos como se carga correctamente el programa dentro de la placa y como se altera la velocidad de parpadeo.

Con el entorno en funcionamiento el primer proyecto que vamos a realizar encender un LED a partir de la energía que proporciona la placa. Para que sea un “poco” más complejo vamos a introducir un botón en el montaje que nos permita encender / apagar nuestro LED. Básicamente lo  único que tenemos que hacer es conectar un cable que envíe la corriente a nuestra placa de pruebas y otro que reciba la toma de tierra. Para evitar que el LED se funda con los 5V con los que trabajamos hay que incluir una resistencia de 220Ω. Posteriormente conectamos en nuestra placa el interruptor y el LED. Por último unimos por un cable la pata más corta de nuestro LED (cátodo) a la toma de tierra. Si está todo conectado correctamente nuestro LED se encenderá cuando mantengamos pulsado el botón en nuestra placa.

Encendiendo un LED con un botón

Encendiendo un LED con un botón

Standard
arduino, art, processing

No quiero que me digas como usarlo

Uno de los temas que mas me interesan sobre la tecnología últimamente es la capacidad que tienen los hackers para decidir cual es la verdadera función de un objeto. Uno lo de los ejemplos más claros son los múltiples usos que se han hecho del controlador de videojuegos Kinect. Su misión inicial era para jugar con tu consola, la realidad es que artistas y creadores le están sacando muchísimo más partido que el originalmente pensado mediante sus hacks.

Uno de los proyectos que he visto que más me ha gustado ha sido Firewall de Aaron Sherwood. La instalación que hace uso de Processing, Max/MSP, Arduino y del mencionado controlador Kinect.

Standard
arduino, processing, programacion

Unboxing del Arduino Starter Kit

Llevaba bastante tiempo intentando que cayera en mis manos algún microcontrollador de Arduino. Desde hace meses estoy trasteando con Processing y en muchos de los libros de arte interactivo/generativo que he estado leyendo incluyen capítulos donde hablan de esta tecnología.


unboxing 1

Para quien no sepa que es Arduino decir que a grandes rasgos que es una plataforma hardware open source que permite de manera muy sencilla crear prototipos de proyectos electrónicos. A cada microcontrollador se le pueden conectar sensores (de luz, de movimiento, etc) a modo de entrada que producen salidas sobre operadores (un led, un motor, un LCD). Para programar sobre Arduino se utiliza un lenguaje de programación llamado Wiring. Con Processing comparte el IDE y la filosofía, aunque Processing esta basado en Java y Wiring en C++.


unboxing 3
 

Una de las primeras cosas que nos llama la atención del Arduino Starter Kit es lo bien que está presentado todo. El libro de proyectos, las cajitas de los componentes o los accesorios en papel de los prototipos que puedes desarrollar dan miedo abrirlos por miedo a romperlo con tus manazas. El diseño está realizado por la agencia de interacción italiana Todo. Otra ventaja con respecto de este kit a otros disponibles como el Getting Started with Arduino Kit v3.0 de MakerShed es que incluye todo el material y las explicaciones para realizar 15 proyectos! Esto hace que sea el pack perfecto para empezar a trastear y pensar en aplicaciones mucho más potentes.


unboxing 4

unboxing 5

De momento el reto es hacer los 15 proyectos que incluye el paquete. Si todo va bien iré retrasmitiendo por aquí mis avances.

Standard
hacks & hackers

Hacks & Hackers presentan…Innovación en comunicación visual: vídeo e infografía interactiva

En los últimos años se ha multiplicado el contenido audiovisual en la red.  El auge del marketing de contenidos y la velocidad a la que los usuarios consumimos información han provocado una explosión de vídeo e infografías.

La interactividad es el siguiente paso. La visualización de datos otorga a los usuarios la posibilidad de analizar grandes cantidades de información y comprenderlas muy rápido de forma visual. En vídeo, la interactividad puede enriquecer las imágenes con información de contexto como ¿dónde está filmado? ¿quién es el protagonista? ¿dónde se puede  adquirir el traje que lleva?

El X Hacks & Hackers pretende analizar qué oportunidades brinda la interactividad para los contenidos audiovisuales. Se celebrará el jueves 13 de diciembre en el Centro de Innovación BBVA (Plaza de Santa Bárbara 2, Madrid), a las 19.30 h.

Para más información puedes visitar nuestra blog Hacks Hackers Madrid.

 

Standard