Visualización en javascript
•Télécharger en tant que PPTX, PDF•
3 j'aime•1,063 vues
Visualización en javascript con Protovis y Google visualization API. Realizada en CAMON Madrid.
Recommandé
Contenu connexe
Similaire à Visualización en javascript
Similaire à Visualización en javascript (20)
Dernier
Dernier (15)
Visualización en javascript
- 1. Un paseo por la Visualización en siete días JAVASCRIPT/ JAVA/ FLASH Ana Belén García Parra 1
- 2. Día 4 Un paseo por la Visualización en 7 días I N D I C E Visualización Redes Java / javascript Flash Google API Protovis Prefuse Ana Belén García Parra 2
- 3. ¿Por qué Javascript? • Desarrollo rápido • Pequeña curva de aprendizaje • Integración directa en páginas Web • Diversas librerías de visualización • Gran número de ejemplos 3Ana Belén García Parra
- 4. Google Visualization API Añadiendo gráficos interactivos a cualquier web Ana Belén García Parra 4
- 5. GVA. Visión general • Acceso a fuentes de datos externas • En continuo desarrollo • Gran selección de visualizaciones • Reutilización • Visualizaciones atractivas • Visualizaciones integrables en forma de Gadget Ana Belén García Parra 5
- 6. GVA. Galería http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery.html • HTML, Javascript, Flash, GWT • Visualizaciones propias de la librería • Visualizaciones de terceros • ¿Ninguna te satisface? Crea tu propia visualización Ana Belén García Parra 6
- 7. GVA. Uso: APIs y Librerías 1/3 Google AJAX API Third-party visulization Visualization API Visualization library Ana Belén García Parra 7
- 8. GVA. Uso: Preparar los datos 2/3 • DataTable: todas visualizaciones esperan este tipo de datos – DataView: versión de sólo lectura • Reordenar /ocultar/hacer cálculos sobre filas y columnas • Poblado a mano • Poblado a partir de un proveedor: DataSource – Ej. Google SpreadSheet Ana Belén García Parra 8
- 9. GVA. Uso: Dibujar la visualización 3/3 • Crear la instancia de la visualización – ¿Dónde se dibujará? • Dibujar – ¿Cómo se personaliza? Ana Belén García Parra 9
- 10. GVA. Crear una visualización • GWT (Google Web Toolkit). Desarrollo en java y traducción a Javascript • Javascript – Evitar conflictos de nombres – Evitar conflictos CSS – Implementar : • Un constructor. Parámetro: objeto DOM contendor • Un método draw. Parámetros: un DataTable y un map con opciones de visualización (opcional) – Añadir los eventos con google.visualization.events.trigger Ana Belén García Parra 10
- 11. GVA. Ejemplos: Motion Chart 1/3 • DataSet: Turkey2010_day_list-main_countries_day_list – País | Fecha | Menciones • ¿Qué recibe MotionChart? – String | Fecha | Número o String |… • ¿Qué buscamos? – Comparación de menciones frente a puntos anotados en el tiempo • ¿Qué utilizamos? – Consulta de datos a proveedor externo – Creación inline de DataTables – Combinación de DataTables Ana Belén García Parra 11
- 12. GVA. Ejemplos: Annotated Time Line 2/3 • DataSet: Turkey2010_hour_count-country_hour_count – Fecha | Hora | País1 | País2 | … • ¿Qué recibe Annotated Time Line? – Fecha o Fecha y hora | Número | [String | String ] |… • ¿Qué buscamos? – Comparación de menciones entre países y cuándo se habla de ellos • ¿Qué utilizamos? – Consulta de datos a proveedor externo – Uso de Formatters – Transformación de DataTables Ana Belén García Parra 12
- 13. GVA. Ejemplos: Treemap 3/3 • DataSet: Turkey2010_players-players_pais – País| # | Jugador | Nick | menciones | % | edad | altura|Posición | Equipo,liga local |… • ¿Qué recibe Treemap? – Nodo | Padre | Valor tamaño | [Valor color] |… • ¿Qué buscamos? – Comparación de número de menciones por diversos criterios • ¿Qué utilizamos? – Consulta de datos a proveedor externo – DataView: ocultar cols, cols calculadas – Creación inline de DataTables Ana Belén García Parra 13
- 14. GVA. Más información http://code.google.com/intl/es- ES/apis/visualization/interactive_charts.html http://code.google.com/p/camon/ Ana Belén García Parra 14
- 15. Protovis Una aproximación gráfica a la visualización Ana Belén García Parra 15
- 16. Protovis. Visión general 1/2 Ana Belén García Parra 16
- 17. Protovis. Visión general 2/2 • Liderado por Mike Bostock y Jeff Heer del Stanford Visualization Group con importante colaboración de Vadim Ogievetsky. • Licencia BSD • Versión actual: Protovis 3.2 • Javascript y SVG. Sin necesidad de plugins. Ana Belén García Parra 17
- 18. Protovis. Conceptos • Sintaxis declarativa • Encadenamiento de propiedades • Herencia de propiedades • Flujo dirigido por los datos Ana Belén García Parra 18
- 19. Protovis. Marcas 1/2 Area Bar Dot Ana Belén García Parra 19
- 20. Protovis. Marcas 2/2 Line Wedge Rule Label Image Ana Belén García Parra 20
- 21. Protovis. Paneles • Contenedor de marcas • Hace posible la repetición de marcas • Anidamiento de paneles Ana Belén García Parra 21
- 22. Protovis. Uso 1/6 http://vis.stanford.edu/protovis/ex/ Ana Belén García Parra 22
- 23. • Descargar Protovis http://protovis-js.googlecode.com/files/protovis-3.2.zip • Crear un fichero HTML • Declarar el script para la visualización • Implementar el código de la visualización apoyado en el API de Protovis – Estructuras de datos – Transformación de escalas – Paletas de colores – … Tu visualización Protovis. Cómo 2/6 Ana Belén García Parra 23
- 24. Protovis. Cómo 3/6 Comparando con una librería de más alto nivel… Year Austria Belgium Czech Rep. 2003 2004 2005 … Ana Belén García Parra 24
- 25. Protovis. Cómo 4/6 Paso 1: un diagrama de barras Ana Belén García Parra 25
- 26. Protovis. Cómo 5/6 Paso 2: replicar mediante un Panel para representar múltiples series Ana Belén García Parra 26
- 27. Protovis. Cómo 6/6 Paso 3: añadir Rules Ana Belén García Parra 27
- 28. Protovis. Layout 1/2 • Encapsula un diseño o técnica de visualización para facilitar su reutilización – Realizar visualizaciones complejas con bajo coste • Treemap, Grid, Network… – Extender visualizaciones para una mayor adopción • Especialización de Panel • Define un conjunto de prototipos de marca como propiedades • Exportan marcas para que sean extendidas en la reutilización Ana Belén García Parra 28
- 29. Protovis. Ejemplos • Turkey2010_hour_count-keywords_hour_count – Streamgraph • Turkey2010_players-players_pais – Treemap y BubbleChart Ana Belén García Parra 29
- 30. Protovis. Más información http://vis.stanford.edu/protovis http://code.google.com/p/camon/ Ana Belén García Parra 30
- 31. Día 4 Visualizar Muchas gracias por vuestra atención Ana Belén García Parra Contacto: anabelengp@gmail.com Ana Belén García Parra 31
Notes de l'éditeur
- …Javascript: lenguanje de scripting que no necesita ser compiladoPara diseñadores de aplicaciones Web no es necesario conocer otras tecnologías.Integrado en navegadores WebGoogle visualization Api, Protovis, ExtJS, Highcharts,Javascript ampliamente utilizado en la comunidad Web
- Ültima versión : agosto 2010
- Google Ajax APIGestión de peticiones asíncronasPermite cargar el restoGoogle Visualization APIGestión y manejo de datos y fuentesPintado de visualizacionesLibrerías de visualización
- las visualizaciones almacenan sus datos en tablas. Cada dato en una celda. Cada tipo de visualización espera sus datos en un formato. Por ejemplo un piechart espera una tabla con una col tipo string y otra numérica. Una linechart espera dos col numéricas.filas indexadas desde 0columnas indexadas desde 0 o un ID específico.Tipo de los datos de la columna [requerido]: boolean, string, number, dateID [opcional]: alfanuméricoEtiqueta: nombre de la columna. Las visualizaciones pueden usarla como leyenda del ejegoogle.visualization.DataTable es el datatableoriginal.Las celdas contienen los valores y pueden tener asociado un valor "formatted" para que sea mas friendly. P.ej. usar valores formatted "low" "medium", "high" para valores reales 1, 2 y 3.DataTable(). creador. luego se van rellenando los datos con addColumn(type,name), addRow([col1,col2]), addRows([[col1,col2],[..],..])DataTable(data, version). creador de una tabla a la que se le pasan los datos "data".data: puede ser un JSON (DataTable.ToJSON) o un objeto Javascript literal object (http://code.google.com/intl/es-ES/apis/visualization/documentation/reference.html#dataparam) version: versión del wireprotocolused. Ahora es la 0.6Si se cambian los datos después de llamar al draw() hay que volver a llamarlo.google.visualization.DataView es una clase de conveniencia para obtener una vista read-only del datatable donde ocultar o cambiar de orden las columnas o filas de una forma rápida sin modificar los datos. No es una vista estática de la datatable pero algunas modificaciones no se reflejan y hay que tratarlas.DataView(DataTable/DataView). constructor a partir de una tabla o vista.DataView.fromJSON(data, viewAsJSON). constructor a partir de un json (data). ViewAsJSON es lo que se ve cuando DataView.toJSON()
- Hace falta indicar eldivEn el draw se establecen los valores de las propiedades customizables.
- DataSet. Es un subconjunto de los datos obtenidos sobre las menciones de los paises en cada día. Se tratan los países que llegaron a semifinales y EspañaRecibe String para el nombre de la bola, Fecha para ver evolución en tiempo y varias columnas de int o String . Int para comparar valores y string para colorRelación entre cómo se le da un partido a un equipo y cuánto se habla de él teniendo en cuenta la importancia del partido (+ tiempo + cercano a la final)Vistazo general con colores únicos. Países que tienen puntos pero no se mencionan más. Esta visualización hace interpolación del movimiento entre dos puntos. Por lo tanto, si un día se juega y sale n 80 puntos y a los 2 días se vuelve a jugar y salen 120 no se verá escalón del 80 al 0 y al 120 sino una curva progresiva.De eeuu y españa se habla más que del resto nada más empezar el mundial y eso que españa perdió el partido.Color para gana y no gana.España tiene picos en partidosZoom11/9 y 12/9: Turquia es un caso curioso porque se habl más en la semifinal que en la finalSacar traza de estados unidos: se habla más al final aunque tengan menos puntos. El día que sacó 121 puntos era contra angola y todo el mundo se lo esperaba. El día que más se ha hablado fue un partido reñido contra lituania con poca diferencia de puntos. Pero fue interesante
- Quitamos los países que tenían menos de 500 menciones totalesValor, título y descripciónLas horas son GMTEspaña GMT+1Turquía GMT+3Sin zoom:Los picos morados son de cuando jugó españa. Usa tiene más actividad al finalZoom 1d:4 sept-9h. España-Grecia. Se habla de 5 (hablar sobre alineaciones) a 8 y el partido es a las 6. Cuando más se habla es a las 7 (mitad del partido)9Sept- EN el mundial los partidos de cuartos eran cada 3 horas -el partido de EEUU fue a las 3 y se habló de 2 a 5 y punto más alto a las 4 (mitad partido) -el de argentina fue a las 6 y hablaron de 5 a 8 y el punto más alto a las 7El picazo.Se habla mucho de Argentina y España. Coincide con partidos de ambos equipos y se habla también de sus respectivos contrarios (Brasil) pero hay mucha diferencia con el resto. Después hay un vacío con lo que se podría revelar un error en los datos.
- Pais-Jugador. color:edadVisualización de mayor fiabilidad porque se contabilizan menciones sobre jugadores y no sólo las de un hashtag. Durante el partido se suele hablar más de jugadores que de equipo.Navegar.Se ha hablado más de Durant que es jugador jóven. Iba de suplente pero debido a bajas ha jugado más y ha resultado ser revelaciónVolver paara atrásRojo –joven. Se habla mucho de ugadores jóvenes (revelación). Mayoría. Contrasta el caso de argentina que (me meto) tiene muchos jugadores todaví del equipo que ganó las olimpiadas 2004 (ObertoScola, delfino..)Entrar en españaSe habla más de jugadores que juegan han jugado o jugarán en la NBAEl que se haya hablado mucho de un país puede ser por: Haya llegado lejos, porque sus jugadores sean muy conocidos o revelación.Pasamos a Liga-Equipo-Jugador color: alturaLa NBA tiene casi el 50% de las menciones debido a que los jugadores más conocidos suelen estar en la nba. La ACB tiene bastante importancia a pesar de que sus principales jugadores estén en la NBA porque en la ACB también juegan jugadores importantes de otros países.Países importantes como Argentina o Brasil no tienen ligas importantesSe habla más de los altos. En la NBA por ejemplo. En europa los jugadores más importantes son más bajitos (quizá por que los altos están en la NBA) por lo que se puede decir que las ligas europeas son menos físicas y más técnicas.
- Dentro del espectro de librerías gráficas disponible, podemos encontrar librerías gráficas de bajo nivel que permiten manipular formas y píxeles pero resultan tediosas a la hora de usarlas para visualización y librerías de visualización que facilitan ciertas tareas pero renuncian al control directo de los componentes.El objetivo de Protovis es encontrar el punto medio para proporcionar el control detallado de las librerías de bajo nivel ofreciendo un nivel de abstracción que facilite el diseño de visualizaciones.
- Protovis 3.2 de mayo de 2010No necesita plugins porque utiliza tecnologías nativas del navegador.
- ** Sintaxis declarativa: la visualización se crea añadiendo componentes y declarando las propiedades de forma intuitiva.** Flujo dirigido por los datos: no es necesario iterar por el conjunto de datos, los propios componentes lo realizan de forma transparente, por lo que no es necesario programar bucles.-> Gracias a esto no es necesario tener grandes conocimientos de programación.** Herencia de propiedades: Al añadir un nuevo componente, éste hereda los valores de las propiedades ya declaradas para el componente anterior. P.ej, si se define tamaño o posición para el primero el segundo ya lo hereda.** Encadenamiento de propiedades: las propiedades se especifican en forma de función que devuelve el objeto
- Marca:junto con pv.Panel es el core del framework.propiedades: top-right-bottom-left, visible, data, cursor, title.Por cada dato se renderiza una mark. Así salen las charttipos:area: area sólida entre 2 polilineas (unión de los puntos representados por los datos)sólo se define el width o el height. Dependerá de si es horizontal o vertical.properties: position, width, height, interpolate, segmented, fillSyle, strokeStyle, lineWidthvisualización normal: (1variable): bottom: 0, left equidistante, height en f de datausado para: Area Charts,Stacked Charts,Streamgraphsbar:properties: position, width, height, fillStyle, strokeStyle, lineWidthvisualización normal: (1 variable):bottom 0, left equidistante, height en f de data, width constanteusado para : bar charts, grouped bar charts, stacked bar charts and histogramsdot:properties: position (distancia al centro del punto), fillStyle, strokeStyle, lineWeight, size (default = 20), shape ("circle", "square", "triangle", "cross", "diamond")usado para: Scatterplots,Anderson’sFlowers,Bubble Chartsvisualización normal: (2variables) left, bottom
- image: añadir una img a un panelproperties: position, width, height, url, title, style (fill, stroke, line)label:propertiesposition,textAlign - horizontal alignment. def = lefttextBaseline - vertical alignment. def=bottomtextMargin - marginto offset fromthetextanchor. def=3textAngle - rotationangle, in radians. def=0 (radianes). Ej (-Math.PI / 2)font -CSS2 font.: def= “10px sans-serif”textStyle - text color. def=blacktext: the default behaviorforthetextpropertysimplydisplaysthe data elementassociatedwiththemarkinstance. line: conjunto de segmenos conectados (polilinea)usado para: line, step chartsvisualizacion normal: (1variable) left equidistante y bottom en f de dataproperties: position, segmented, interpolate, strokeStyle, linewidth, fillstyle si se forma una figura cerrada.Rule:properties:position, width, height, strokeStyle = black, lineWidth=1regla vertical: especificar el left / regla horizontal: especificar el bottomWedge: representa un arco sólido o una barra en coordenadas polarespie o donut chart, polar clockpropiedades: prosition: distancias al centro del arco.startAngle - thestartangle of thewedge in radians.endAngle - theendangle of thewedge in radians.angle - theangle subtended bythewedge in radians.innerRadius - theinnerradius of thewedge. def= 0 para piechartsouterRadius - theouterradius of thewedge.visualizacion normal: leftbotom constantes porque todos los arcos comparten centro, angle en f de data (d *2*PI).Si solo se especifica el ángulo los arcos se dibujan pegados.los valores tienen que ser de 0 a 1. Usar
- Unlike normal marks, when you add a mark to a panel, that mark does not inherit the properties of the panel. However, the position of the mark will be offset by the panel’s margins.
- <script type="text/javascript+protovis"> use expression closures in browsers other than Firefoxexpression closure (Firefox 3+): [5,1,3,2,4].sort( function(a,b) b > a );
- Componente abstracto completo en el que sólo se personalizan algunas propiedades
- En este caso cada fila o octo de datos representa los valores de el cto de barras definido por un color50 = 15*3 + 5px
- Funciona como contenedor, no hace falta añadirlo a un panelLos prototipos de marca definen la implementación del layoutAlgunos prototipos de marca se exportan, como el node en Treemap y el cell en Grid. Esta marca es un prototipo y hay que añadirle una marca concreta (bar, dot) pudiendo obtener distintas visualizaciones añadiendo distintas marcas.
- Streamgraph:stacked chart en el que se cambia la linea base desde donde se empiezan a apilar las capas.Offset: wiggle. Es un algoritmo para streamgraph que minimiza el cambio en la pendiente ponderada por el espesor de la capa