Pequeños Múltiples

Había una vez una empresa llamada CitiSent, donde una de las primeras ideas que tuvimos para ofrecer servicios de visualización se refería a comprender y comparar la calidad de vida de las distintas ciudades del país1.

Para construir esta visualización desarrollamos un tesauro2 de 6 grandes temas urbanos que generaban un indicador de percepción a partir del análisis de texto (sentiment analysis) en redes sociales. Cada uno de estos indicadores determina el tamaño de un pétalo, debidamente codificado con un color. La idea es que este sistema de representar (y condensar) la imformación permite comparar muy eficientemente las diferencias y contrastes entre los datos (las disparidades). Esta modalidad se denomina pequenos múltiples (small multiples). Esto es similar a las caras de Chernoff.

show code

<br />
CitiPulse model;<br />
Petal current;</p>
<p>color[] c = {<br />
#D63F09,<br />
#FFA94D,<br />
#FAE203,<br />
#8FCB35,<br />
#00828E,<br />
#00426E,<br />
#A64DFF,<br />
#EB12EB,<br />
#AE1D04,<br />
#FF8408,<br />
#DECC02,<br />
#7EB331,<br />
#0F8CA5,<br />
#135589,<br />
#8A27EC,<br />
#CA0DCA,<br />
#870101,<br />
#C46200,<br />
#B8AE01,<br />
#6C9A2E,<br />
#2096C0,<br />
#2D6EAD,<br />
#6C00D7,<br />
#A809A8,<br />
#690808,<br />
#984805,<br />
#929100,<br />
#59802A,<br />
#31A1DA,<br />
#4688D1,<br />
#4C0098,<br />
#860486<br />
};<br />
String file;</p>
<p>float MAX = 120; // radio máximo del pétalo<br />
float offset = 5;<br />
color currentCol = color(255);</p>
<p>void setup() {<br />
int side = 350;<br />
size(350, 350);<br />
smooth();<br />
noStroke();<br />
model = new CitiPulse(width/2, height/2);<br />
populateCitiPulse(model);<br />
current = new Petal();<br />
file = ""+year()+month()+day()+hour()+minute()+".mov";<br />
}</p>
<p>/**<br />
*<br />
* alfa + PI<br />
* beta = ––––------<br />
* 2<br />
*<br />
*<br />
*<br />
* MAX * sin(alfa/2)<br />
* radio = -----------------<br />
* sin(alfa/2) + 1<br />
*<br />
*/</p>
<p>void draw() {<br />
background(255);<br />
noFill();<br />
stroke(#E3E3E3);<br />
strokeWeight(1);<br />
ellipse(width/2, height/2, MAX*2 + offset*2, MAX*2 + offset*2);<br />
model.draw();<br />
}</p>
<p>void keyPressed() {<br />
if (key == 'v') {<br />
for (int i = 0; i &lt; model.petal.length; i++) {<br />
println("petal["+i+"].value = "+model.petal[i].value);<br />
}<br />
println("---------------------------------------------");<br />
}<br />
if (key == ' ') {<br />
populateCitiPulse(model);<br />
}<br />
if (key == 'x') {<br />
exit();<br />
}<br />
if (key == 's') {<br />
saveFrame("img/citipulse-#####.png");<br />
}<br />
}</p>
<p>void mouseMoved() {<br />
currentCol = get(mouseX, mouseY);<br />
}</p>
<p>void mousePressed() {<br />
println(current.name+", cuyo valor es "+current.value);<br />
}</p>
<p>class CitiPulse {</p>
<p>float x, y;<br />
Petal[] petal;</p>
<p>CitiPulse(float x, float y) {<br />
this.x = x;<br />
this.y = y;<br />
}</p>
<p>void draw() {<br />
float offset = 5;<br />
for (int i = 0; i &lt; petal.length; i++) {<br />
pushMatrix();<br />
{<br />
translate(x, y);<br />
rotate(petal[i].alfa * (float)i);<br />
petal[i].be();<br />
}<br />
popMatrix();<br />
}<br />
}<br />
}</p>
<p>void populateCitiPulse(CitiPulse mod) {</p>
<p>int num = round(random(3, 10)); // número de pétalos o términos de primer nivel</p>
<p>float alfa = TWO_PI / (float)num;<br />
float beta = (alfa + PI) / 2;</p>
<p>float radio = (MAX * sin(alfa/2))/(1 + sin(alfa/2));<br />
float ac = MAX - radio;</p>
<p>println(" num = "+num);<br />
println(" alfa = "+alfa+"\t ("+degrees(alfa)+" grados)");<br />
println(" beta = "+beta);<br />
println("radio = "+radio);<br />
float result = radio + ac;<br />
println(" AC = "+ac+"\t radio + AC = "+result);<br />
println("---------------------------------------------");</p>
<p>mod.petal = new Petal[num];</p>
<p>for (int i = 0; i &lt; mod.petal.length; i++) {<br />
mod.petal[i] = new Petal();<br />
mod.petal[i].alfa = alfa;<br />
mod.petal[i].beta = beta;<br />
mod.petal[i].r = radio;<br />
mod.petal[i].ac = ac;<br />
mod.petal[i].x = mod.x;<br />
mod.petal[i].y = mod.y;</p>
<p>// lo único de cada pétalo<br />
mod.petal[i].value = random(.2, 1);<br />
mod.petal[i].name = "Elemento "+i;<br />
mod.petal[i].c = c[i];<br />
}<br />
}</p>
<p>class Petal {<br />
float x, y;<br />
color c, co; // color &amp; color over<br />
float value;<br />
String name;<br />
int seed;</p>
<p>/* los valores a continuación son comunes para todos los pétalos */<br />
float alfa, beta;<br />
float r; // radio<br />
float ac; // distancia desde el centro de la flor al centro del círculo</p>
<p>Petal() {<br />
seed = round(random(99999));<br />
}</p>
<p>Petal(float x, float y, float value, color col, String name) {<br />
this.x = x;<br />
this.y = y;<br />
this.value = value;<br />
this.name = name;<br />
c = col;<br />
}</p>
<p>void be() {<br />
noiseSeed(seed);<br />
value = noise(seed + (float)millis()/6000);</p>
<p>if (over(currentCol)) {<br />
current = this;<br />
co = color(red(c)-25, green(c)-25, blue(c)-25);<br />
draw(0, 0, r + offset, co);<br />
}</p>
<p>draw(offset, 0, r, c);</p>
<p>}</p>
<p>boolean over(color col) {<br />
if (c == col) {<br />
return true;<br />
}<br />
else {<br />
return false;<br />
}<br />
}</p>
<p>void draw(float ox, float oy, float radio, color col) {<br />
fill(col);<br />
noStroke();<br />
pushMatrix();<br />
{<br />
translate(ox, oy);<br />
beginShape();<br />
vertex(0, 0);</p>
<p>for (float t = -beta; t &lt;= beta; t+=.1) {</p>
<p>float xpos = value*cos(t)*radio;<br />
float ypos = value*sin(t)*radio;</p>
<p>vertex(ac*value + abs(r-radio) + xpos, ypos);<br />
}<br />
endShape(CLOSE);<br />
}<br />
popMatrix();<br />
}<br />
}</p>
<p>

Este ejemplo de la unidad de visualización puede ser regenerado al presionar ESPACIO, pero es preciso ganar foco sobre el elemento haciendo click sobre él

Notas
  1. a este servicio lo llamamos CitiPulse []
  2. Un tesaurio es un diccionario jerárquico de palabras. En el caso de Citipulse definimos 6 grandes categorías: Medioambiente, Movilidad, Entorno Urbano, Sociabilidad, Gobernanza y Economía Local y Oportunidades. Cada una de ella dividias, a su vez, en otras sub-categorías, hasta completar un vocabulario de alrededor de 500 palabras. []

El arte de saber preguntar

En CitiSent estamos permanentemente investigando cómo mejorar nuestro servicio. Uno de los temas centrales para nosotros, en términos de diseño de interacción, es cómo se deben formular las preguntas para configurar los estudios dentro de CitiSent.

Si entendemos que el servicio se divide en 3 fases: (1) formulación de la pregunta, (2) obtención de resultados y (3) visualización y síntesis; este primer segmento resulta ser crítico, especialmente en el contexto de los grandes datos, o big data. Hoy, hablar de big data ya forma parte del léxico común, muchas compañías han incorporado el análisis de grandes volúmenes de información, especialmente los producidos en redes sociales, para poder dar respuesta a los mercados cambiantes o atender mejor a sus clientes. En definitiva, el análisis de grandes datos por medio del software, ya forma parte de la estrategia de supervivencia de las instituciones modernas.

Para los investigadores que usan CitiSent (periodistas, sociólogos, urbanistas y planificadores, políticos, etc.) resulta fundamental poder escanear y filtrar grandes cantidades de información, pero más importante que eso es darle respuesta a sus interrogantes sin estar necesariamente delegando en el software la definición de los resultados (como la priorización y relevancia de los datos). Dicho de otro modo, es necesario poder dar mayor flexibilidad a la formulación de la query para que el investigador pueda expresar en sus propios términos sus preguntas y no en los términos de la máquina.

El modo de formulación de preguntas y la representación de sus resultados (que aspiran a representar conocimiento) son actualmente una dualidad asimétrica, donde la fuerza argumental de los resultados (desde la data –lo dado– a la información) es superior y definitivo en su fuerza argumental; los datos aparentan ser una expresión de la realidad incuestionable cuando en realidad son sólo el reflejo de las herramientas con los que fueron recolectados. Johana Drucker, en su publicación Humanities Approaches to Graphical Display argumenta que debemos pensar en los datos como captos.  El dato (del latín datum), no es algo dado sino algo captado. El “capto”, por otro lado, está “tomado” de forma activa mientras que los datos se suponen que son un “dado”, al poder ser registrados y observados. A partir de esta distinción surge un mundo de diferencias. Toda investigación humanista (ya sea historiográfica, periodística o política) reconoce su carácter situado, parcial y constructivista de la producción de conocimiento, donde el conocimiento se construye, es tomado a partir de una indagación creativa (smart query) y no es una representación objetiva de una realidad preexistente (por eso nuestro lema en CitiSent es “tú inventas la forma de mirar”, atentiendo a las destrezas propias de los investigadores que se apropian de la herramienta y la pueden usar bajo sus propios términos).
El espacio del problema corresponde entonces al diálogo de indagación entre la persona y el sistema, definido éste por la interfaz que presenta en formas tipográficas y de visualizaciones, los objetos de información. La manipulación de estos objetos hacia la reformulación de la pregunta (feedback loop) define el tono y la forma de este diálogo o el diseño de una conversación.

Es a partir de estas ideas, de la invensión de la mirada y del poder de las preguntas,  que abordamos el problema de la formulación de la query informática que el usuario somete como entrada en un sistema de búsqueda o mineríaa de datos. Consideramos que esta formulación es creativa y que el diálogo entre el sistema que retorna (y representa) resultados y el investigador que contrapregunta consiste el verdadero diálogo que es posible formalizar mediante el diseño de interacción.

En el caso de CitiSent, el feedforward por parte del usuario es el query que se formula en la configuración de un estudio. Éste consiste en la definición de temas, fuentes y lugares, que corresponden, a su vez, a facetas semánticas.

  • faceta de tópicos, que define una proximidad semántica en la relación de términos
  • faceta social (entidades animadas y su correspondiente grafo, distinguiendo personas e instituciones)
  • faceta geográfica, como proximidad a puntos o fuguras de recorte (máscaras obturadoras)
  • y una cuarta faceta tiemporal, implícita al modelo de extracción y análisis longitudinal en el tiempo
Configuración de un Estudio

Esta investigación busca conciliar el modelo cognitivo humanista de inquisición por un lado, con la respuesta del sistema de búsqueda y representación por otro. Buscamos establecer directrices de interacción para el diseño de sistemas (entendidos como servicios o agentes) que sean capaces de reconocer los talentos y destrezas del usuario-investigador, comprendiendo la interacción humano-computador como una conversación natural y simétrica.

Son preguntas como ésta la que nos motivan a estar mejorando permanentemente nuestro servicio.

¿Tienes algo que comentar? Nos interesa mucho conocer tu opinión, tal vez nos puedas ayudar.

The post El arte de saber preguntar appeared first on CitiSent Blog.