Visualizando: Estadísticas de navegadores (I)

El origen: Browser Market Share

Michael Van Daniker publicaba en su blog un gráfico sobre las estadísticas de navegadores como ejemplo de utilización de Axiis.  El gráfico me despertó el interés por su enfoque novedoso y por su combinación entre los conceptos de proporciones y serie temporal.

Observando el gráfico, se puede encontrar una analogía con los anillos de un tronco de árbol.  Los datos que muestra se refieren a las estadísticas de navegadores de w3schools.com (W3S) desde Enero de 2002 hasta finales del 2009. Empezando desde el centro, cada anillo representa el porcentaje de un intervalo de tiempo determinado.  Navegando por la versión Flash se puede ver el mes/año, el navegador de cada arco y su porcentaje de penetración.

Sin embargo, hay una serie de cuestiones que me interesaron en aras a mejorar el resultado final:

• El gráfico se muestra "abierto", ya que las estadísticas de W3S no suman el 100% (los navegadores con un uso por debajo del 0,5% quedan fuera).
• Los periodos de cada anillo no son rítmicos: En el 2002 pueden ser trimestrales o semestrales, mientras que en el 2009 los datos son mensuales.
• Los anillos tienen un tamaño idéntico, lo cual no representa de forma fidedigna el crecimiento de los usuarios de Internet.

A partir de estas observaciones, he definido una serie de criterios:

• "Cerrar" el círculo, aunque sean recalculando los porcentajes existentes.
• Aplicar tamaños de cada anillo proporcionales al crecimiento de usuarios de internet a lo largo de ese periodo.
• Establecer un ritmo fijo en los intervalos de tiempo, estimando el crecimiento de usuarios si faltan datos. De este modo, cada línea se refiere a un ciclo de tiempo fijo, y su anchura representa el incremento de usuarios.

Las fuentes de datos

Antes de entrar en los detalles sobre los datos, tengo que decir que mi objetivo principal no ha sido encontrar la serie más fiable desde 2002 hasta la actualidad.  Actualmente es posible encontrar algunas fuentes con datos mensuales bastante fiables, pero muchas no se extienden hasta ocho años atrás.

Los datos de W3S no incluyen el volumen (ni real ni estimado) de usuarios conectados a Internet.  Por lo tanto, hay que buscar fuentes complementarias.  Sin entrar en criterios estrictos de veracidad ni fiabilidad, he seleccionado la fuente Internet Growth Statistics del Internet World Stats.  Para el objetivo que me ocupa, es suficiente.

Como se puede comprobar en el enlace, los datos distan de ser concretos.  Para acabar de arreglarlo, las series de datos no concuerdan con las del W3S.  En este punto tenemos dos opciones: seguir buscando, o echar mano de la hoja de cálculo y algunas fórmulas matemáticas. Opto por la segunda.

Unificación de las series de datos

Esta fase es quizá la más larga (y seguro que la más ardua) de todo el proceso.  Importar los datos, eliminar el formato, convertir el texto en información tratable... Todo lo que no esté en una fuente estructurada requiere ese peaje.

Una vez organizados los datos, queda unificar las series. ¿Cómo podemos llevarlo a cabo? Por interpolación. La ventaja es que es un proceso relativamente sencillo, y el inconveniente es que sacrificamos algunos datos (pocos) de la serie.

En este caso he escogido la interpolación lineal.  Muy probablemente no sea la mejor (¿lo será la cúbica?): en este caso es útil y suficiente.

Para realizar interpolación entre fechas, éstas se convierten en valores numéricos (por ejemplo, días transcurridos desde el 1/1/1970). Otros dos detalles que considero son:

• Asumo que las estadísticas de "Marzo de 2005" se refieren a los datos "hasta el 31/5/2005". Es lo habitual pero no se especifica en la fuente.
• Decido que la serie sea bimensual.  Podría ser trimestral o semestral, pero lo hago para aprovechar más los datos (y no echar de menos los sacrificados).

Dado que la interpolación requiere una fecha anterior y otra posterior a la  intermedia que queremos calcular, pierdo al menos dos datos de la serie: el primero y el último. La alternativa a esto es empezar justo en la misma fecha que empieza la serie.  Obteniendo la distancia entre los dos puntos puedo calcular la parte proporcional (suponiendo incremento constante = lineal) del crecimiento de usuarios.  Por lo tanto, para cada fecha concreta de mi serie unificada, tengo el número estimado de crecimiento de usuarios.

Para obtener esta diferencia, sacrifico otro dato del inicio de la serie. (ya van tres)  Al precisar la diferencia respecto al anterior, el primero (que se supone que no tiene anterior) se cae de la lista.

Podría solucionar este detalle utilizando la cifra absoluta (el número de usuarios al iniciar ese periodo) para dibujar el círculo más interior del gráfico,. Sin embargo, lo descarto porque eso supone perder un espacio considerable. Se puede comprobar que el primer círculo sería proporcional a unos 500 millones de usuarios, mientras que el resto de anillos tienen un crecimiento mucho inferior (una décima parte en los mejores casos).

Cálculo del tamaño de los anillos

El siguiente paso es decidir qué proporción sigue el radio del anillo.  Existían dos opciones:

• Radio proporcional al crecimiento: El radio se calcula de forma directamente propocional al crecimiento de usuarios (un usuario aumenta el mismo radio tanto en los anillos interiores como en los más exteriores). El radio total del gráfico es equivalente al total de usuarios, y  el radio de cada anillo se corresponde con la proporción de nuevos usuarios de cada periodo.
• área proporcional a crecimiento: el radio se calcula teniendo en cuenta que el incremento de usuarios es proporcional al área del anillo.

¿Qué diferencia hay?  Visualmente, mucha. Basándonos sólo en el radio, tenemos un gráfico bastante representativo si miramos por evolución (centro->exterior), pero sesgado como conjunto (visión del tronco).  10 píxeles de radio en el segundo anillo inferior ocupan mucha menos área que 10 píxeles en el anillo más externo.  Por lo tanto, el color del primer anillo ocupa mucho más espacio visual del que su volumen de usuarios representa.

Hay otra razón para escoger el criterio de la proporción por área: representar el crecimiento actual en relación al pasado.  Esto es algo interesante porque el grueso del tronco nos muestra la velocidad de crecimiento. Si este mismo gráfico se realizara con barras o columnas relativas (ocupando una misma altura, ajustando la anchura al crecimiento de usuarios, y repartiendo el área proporcionalmente), el efecto visual de las columnas "anchas" sería mucho más acusado.

En cambio, al repartirse por un área concéntrica que aumenta de radio, lo visualmente constante (anillos de un mismo grueso) es el crecimiento respecto al anillo anterior, que no el crecimiento en sí.  Por ejemplo, revisando los datos se puede comprobar que los anillos interiores crecen a un ritmo de 15-20 millones de usuarios, a pesar que se ven gruesos. En cambio, los anillos más exteriores, que parecen normalitos están creciendo a un ritmo de 40 millones de usuarios. Esto quiere decir que requiere más esfuerzo aumentar el radio en cada anillo más exterior. Es un comportamiento habitual, por ejemplo, al analizar las tasas de crecimiento de las empresas. Y es algo directamente relacionado con la viralidad de este medio (el efecto red una teoría algo criticada).

La pregunta es: ¿Se está engañando? No: se está centrando el mensaje en la tasa de crecimiento.  Volviendo a la analogía de los anillos del árbol, podemos suponer que el tronco parezca mantener un crecimiento gradual.  Pero lo que está sucediendo es que el tronco crece proporcionalmente un poco más rápido... ocupando el mínimo espacio posible.  En el gráfico sucede lo mismo: si utilizáramos barras, el espacio de representación sería mucho mayor y quitaría importancia a los primeros datos de la serie.

Como efecto derivado, en este gráfico podemos ver el efecto de la "viralidad" de los navegadores. Siguiendo la analogía del tronco, el gráfico muestra el cambio de nutrientes del substrato que es el mercado de los navegadores.

El cálculo

Para acabar esta primera parte, comento las ideas esenciales para el cálculo de los radios.  Para empezar, tenemos lo siguiente:

• El espacio en el que se va a mostrar el gráfico varía según el tamaño de pantalla que tengas, por lo que debemos calcular los radios de los anillos en cantidades relativas (tanto por uno, o porcentajes).
• Hay que establecer una relación directa entre el total de usuarios de cada anillo, y el área del propio anillo. Es decir, que esté donde esté, un nuevo usuario ocupa los mismos píxeles de superficie.
• Hay que tener en cuenta un radio inicial para el primer anillo (el nudo central). En mi caso supondré que es 0 (el primer dato empieza en el centro del tronco).

Lo que hago es considerar el área completa del anillo, que se corresponde con los 1.146 millones de usuarios de crecimiento entre Enero de 2002 hasta Julio de 2009 (datos ya interpolados).  Lo primero que hago es dividir el incremento de cada periodo por este total. Con ello tengo un valor proporcional al área de cada anillo (si el gráfico ocupara un área de 1 unidad). Es decir, obtengo la proporción de área por usuario que le correspondería a cada anillo.

Ahora debo deducir el radio para que el círculo ocupe este área.  Para ello, tengo que invertir la fórmula del área del círculo: A = π·r². Pero ojo, tengo que restar siempre el área de los anillos interiores.  Por lo tanto, calculo los radios de dentro hacia a fuera.

Para saber el radio del nuevo anillo debo:

• Calcular el àrea de todos los anillos interiores (sumo los radios interiores y calculo el área del círculo correspondiente).

Luego resuelvo el cálculo:

r = sqrt(a+A), donde:

• sqrt(a+A) es la raíz cuadrada de (a+A).
• r = radio absoluto (distancia desde el centro hasta la parte exterior de este anillo).
• a = área que debe ocupar el anillo.
• A = área de los anillos inferiores.

Una vez obtengo r, le resto los radios de los anillos interiores y ya tengo el ancho (radio relativo al anillo). Se podría tratar el gráfico directamente con los radios absolutos, pero requeriría empezar a dibujar desde fuera hacia dentro y por lo tanto invertir la serie. Mi opción es no retocar la serie, para no manipular la hoja de cálculo más de lo necesario.

Dado que hemos supuesto que el área del círculo es 1, la suma de los radios no equivaldrá a uno (en realidad es de unos 0,564...). Esto es correcto: lo podemos comprobar calculando el área del círculo con radio 0,564... y nos dará como resultado 1.

Y finalmente, el último paso: debemos estirar los radios para que el total sea 1.  ¿Por qué? Pues para poder calcular con más facilidad los radios del gráfico en la pantalla. Esto es sencillo: basta dividir cada fragmento de radio por 0,564..., y ya tenemos los radios proporcionados a 1. Lo que estoy haciendo aquí no es más que normalizar: ajustar una serie de valores a una medida global concreta. (la norma) Es importante no confundir con estandarizar (convertir un valor de una distribución normal a la normal estándar de media 0 y desviación 1).

Con este cálculo y algunas manipulaciones de texto en la hoja de cálculo, ya tenemos un archivo XML similar al original.  Sólo he añadido los valores del radio interno (la suma de radios interiores) y externo (interiores + radio del anillo). También muestro en la etiqueta de cada sector (navegador del periodo concreto) el número total de usuarios que aumentan en cada anillo, para que sea más fácil comprobar las diferencias entre las cifras y el efecto visual.

El siguiente paso es modificar el código del ejemplo original (para adaptar los radios y cambiar algunas etiquetas) y ya podremos compilar. En el siguiente artículo comento las modificaciones y el resultado.