Llamarada | Visualización de datos para la web

Flare facilita la creación de visualizaciones interactivas de datos

Para comenzar a hacer sus propias visualizaciones, descargar bengala y trabaje en el tutorial a continuación. Necesitas más ayuda? Visita el foro de ayuda (necesitarás un SourceForge iniciar sesión para publicar).

Flare es un software de código abierto lanzado bajo una licencia BSD, lo que significa que puede implementarse y modificarse libremente (e incluso venderse por $$). El diseño de Flare fue adaptado de su predecesor, un kit de herramientas de visualización para Java.

Aplicaciones

Anuncios

• 2010.10.07: El desarrollo de Flare se ha abierto a la comunidad y la fuente se ha trasladado de SourceForge a un nuevo hogar en GitHub. llamarada 2009.01.24 todavía es el último lanzamiento oficial y (al menos por ahora) los tutoriales y la documentación lo reflejan. La versión de desarrollo en GitHub ahora contiene un mejor soporte para Flash Player 10, así como muchas otras pequeñas correcciones y cambios.
• 2009.01.24: llamarada 2009.01.24 ha sido liberado. Esta es una versión de mantenimiento con una serie de correcciones de errores y actualizaciones. Ver el notas de la versión para más detalles. Este es el último lanzamiento planeado para Flash Player 9: las versiones futuras migrarán a la versión 10.
• 2008.07.30: llamarada 2008.07.29 ha sido liberado. Esta es una versión importante que presenta muchas características nuevas y mejoras arquitectónicas. Ver el notas de la versión para más información.
• 2008.07.30: llamarada 2008.08.08 ha sido liberado. Esta versión incluye un soporte mejorado de leyenda, transiciones con nombre, correcciones de errores y una refactorización para reducir el acoplamiento y consolidar las clases de utilidad. Ver el notas de la versión para más información.

Tutorial

Un tutorial paso a paso para aprender ActionScript y Flare.

Cómo Empezar

El primer paso es configurar sus herramientas de desarrollo.

1. Configure un entorno de desarrollo flash que funcione. Hay dos enfoques. Recomendamos el primero por simplicidad, pero los usuarios más avanzados pueden usar el segundo enfoque.
   • Opción 1 (más simple): Instale Adobe Flex Builder.
     • Este es un entorno de desarrollo completo para aplicaciones ActionScript / Flex. Está disponible para todas las plataformas principales (Windows, Mac, Unix). Los usuarios que ya usan el IDE de Eclipse también pueden instalar Flex Builder como un complemento de Eclipse.
     • La advertencia para usar Flex Builder es que es un software comercial y solo funcionará durante un período de prueba limitado. Sin embargo, Adobe proporciona licencias gratuitas de Flex Builder a estudiantes universitarios, profesores y personal.
   • Opción 2 (más complicada): Instale el SDK Flex gratuito
     • Esto instalará los compiladores básicos de ActionScript / Flex: mxmlc y compc. Luego puede configurar su propio entorno de compilación, por ejemplo, utilizando make or ant construir sistemas. Flare está empaquetado con un build.xml archivo para usar con el Hormiga Apache sistema de construcción Una vez que se instala la hormiga, simplemente abra el build.xml archivo en un editor de texto, cambie las dos primeras líneas para apuntar a su Flex SDK instalación, y luego usar ant para compilar las bibliotecas. Hacemos uso de las tareas ant de Adobe Labs para el desarrollo de Flex.
     • La ventaja de este enfoque es que todo el software es gratuito y no caducará en usted. Sin embargo, pierde características como compilación automática, gestión de proyectos y autocompletado proporcionadas por Flex Builder.
2. Descargue las bibliotecas de destellos de prefuse.
   • La descarga es un archivo zip que contiene un conjunto de proyectos de biblioteca de ActionScript. Descomprima los archivos en su directorio de espacio de trabajo primario si está utilizando Flex Builder. ¡Durante el tutorial los importaremos a Flex Builder y los usaremos para crear visualizaciones!
   • El software es actualmente una versión alfa, por lo que cabe esperar algunos errores y limitaciones. Solucionaremos los problemas lo antes posible, y el enlace de arriba siempre apuntará a la versión más reciente.

Introducción a Flash y ActionScript 3

Flash es un excelente entorno para gráficos interactivos y con la reciente incorporación del lenguaje de programación ActionScript 3, se volvió mucho más potente y eficiente. Si bien una introducción completa a AS3 está más allá del alcance de este tutorial, aquí hay algunos recursos que le resultarán útiles:

• Adobe proporciona una descripción general de AS3, con enlaces a recursos adicionales.
• ActionScript 3 esencial por Colin Moock de O'Reilly publishing es un gran libro para ayudarlo a comenzar. Usted puede Acceda en línea aquí (Algunas instituciones, como las universidades, proporcionan acceso gratuito).
• La referencia de Adobe Flex API es invaluable para comprender las diferentes clases y métodos disponibles. Nos centraremos solo en las clases en el flash.* paquetes

Este tutorial asume una familiaridad básica con la sintaxis y los tipos de ActionScript, así como los conceptos de programación orientada a objetos.

Parte 1: objetos de visualización

Introducción

Flash modela una escena visual 2D utilizando un Scenegraph. Los objetos visuales se organizan en una jerarquía, con objetos secundarios definidos en el espacio de coordenadas del elemento primario. A menudo verás este scenegraph conocido como el mostrar lista tanto en la documentación de Adobe como en libros sobre programación Flash.
El nodo en la parte superior de la lista de visualización siempre es el Stage objeto. El escenario siempre tiene un solo hijo. Esto se llama el root, y todos los elementos visuales están debajo de la raíz. Por lo general, la raíz es su aplicación Flash real. Volveremos a esto pronto.
Todos los elementos visuales que se pueden agregar a la lista de visualización son instancias de DisplayObject clase. Subclases de DisplayObject incluir Bitmap (para imágenes), TextField (para áreas de texto interactivo), y Video (Piensa en YouTube). Los casos más comunes, sin embargo, son los Sprite y Shape clases Como referencia, la mayoría de estas clases se pueden encontrar en flash.display paquete (aunque eventualmente encontrarás el flash.text paquete de uso, también).
El Sprite La clase es el objeto visual general más útil utilizado por Flash Player. Los sprites son objetos visuales que contienen contenido de dibujo y pueden servir como contenedor para subnodos en la lista de visualización (el Sprite las subclases de clase flash.display.DisplayObjectContainer clase). En contraste, el Shape La clase puede contener contenido de dibujo, pero no puede contener subnodos. Como resultado, las formas usan menos memoria, pero son mucho menos flexibles. Para simplificar, nos centraremos en Sprites en este tutorial.

Crear una nueva aplicación

Primero, creemos una nueva aplicación Flash. Para hacer esto, abra Flex Builder y asegúrese de estar en la perspectiva de "Desarrollo de Flex" (a menudo se accede haciendo clic en el icono "Fx" en blanco y negro en la esquina superior derecha).
En el panel "Navegador" de la izquierda, haga clic con el botón derecho en la pantalla y seleccione "Nuevo> Proyecto ActionScript". En el cuadro de diálogo resultante, escriba "Tutorial" como nombre del proyecto, luego haga clic en "Finalizar". Esto creará un nuevo proyecto para ti.
Ahora debería ver una carpeta "Tutorial" en el panel "Navegador". Dentro de esta carpeta, debería ver un archivo llamado "Tutorial.as". Este es su archivo de aplicación principal. Ábralo, si aún no está abierto.
Dentro del archivo, verá el andamiaje básico para esta clase:

paquete {import flash.display.Sprite; Public class Tutorial extiende Sprite {public function Tutorial () {}}}

Tenga en cuenta que esta clase extiende el Sprite clase. Debido a que esta es nuestra clase de aplicación principal, cuando ejecutamos la aplicación, una instancia de Tutorial la clase se agregará automáticamente a la lista de visualización como su root (el único hijo de la Stage).
Observe también que se ha creado automáticamente un constructor. Se llamará a este constructor cuando se inicie la aplicación. Para aquellos familiarizados con lenguajes de programación como C, C ++ o Java, el constructor de la clase de aplicación actúa de manera muy similar a main funcionan en esos otros idiomas.
Con esta nueva aplicación de andamios en su lugar, podemos comenzar a jugar con objetos visuales. Sin embargo, hay una cosa que queremos hacer primero. Agregue una nueva línea directamente encima de la declaración de clase ("public class Tutorial…") Línea que dice:

[SWF (ancho = "800", altura = "600", backgroundColor = "# ffffff", frameRate = "30")]

Esta línea define la configuración predeterminada para su aplicación (que se compila y guarda como un archivo .swf en el directorio "bin" de su proyecto). Arriba, establecemos el tamaño, el color de fondo y la velocidad de fotogramas objetivo (en fotogramas por segundo) para nuestra aplicación.

Sprites

Al igual que todos DisplayObjects, Sprite admite una serie de propiedades visuales desde el primer momento. Esto incluye el x, y, scaleX, scaleY, rotationy alpha propiedades. Estos cambian respectivamente la posición, el tamaño, la orientación y la transparencia de un sprite (¡y todos sus elementos secundarios! Recuerde, estamos usando una escena aquí).
Sin embargo, estos valores aún no significan mucho, ya que los sprites no contienen nada por defecto. Comenzaremos dibujando nuestro propio contenido.
Cada Sprite también tiene un graphics propiedad. Podemos usar esto para dibujar gráficos para Sprite. graphics la propiedad es una instancia de flash.display.Graphics clase, que proporciona una serie de comandos de dibujo vectorial.
En el siguiente ejemplo, hacemos varias cosas.

• Primero, creamos un nuevo Sprite.
• Segundo, usamos los sprites graphics para dibujar un círculo con relleno gris y contorno negro.
  • beginFill establece el color y el estilo de relleno actual. El primer argumento es el color, en notación hexadecimal, y el segundo argumento es el valor alfa, que varía de 0 para completamente transparente a 1 para completamente opaco.
  • lineStyle establece el color y estilo de trazo actual. El primer argumento es el ancho de línea, el segundo argumento es el color.
  • drawCircle dibuja un círculo de radio 10 en el punto 0,0 en el espacio de coordenadas de nuestro sprite.
• Tercero, agregamos el sprite como hijo de nuestra aplicación principal (un Tutorial duende).
• Cuarto, establecemos el x y y posición de nuestro sprite.
• Quinto, agregamos algunos resultados de depuración. trace imprime una cadena en la consola. Este resultado solo aparece cuando se ejecuta la aplicación en modo "depuración".

Aquí está el código:

paquete {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] clase pública Tutorial extiende Sprite {public function Tutorial () {var sprite: Sprite = new Sprite () ; sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); this.addChild (sprite); sprite.x = 50; sprite.y = 50; trace ("nuestro sprite está en:" + sprite.x + "," + sprite.y); }}}

Ejecute la aplicación (haga clic derecho en "Tutorial.as" y seleccione "Ejecutar como> Aplicación Flex"). Debería ver un círculo gris con un contorno negro en la esquina superior izquierda, centrado en el punto 50, 50. Si ejecuta la aplicación en modo de depuración (seleccione "Depurar como> Aplicación flexible"), también debería ver la cadena "nuestro sprite está en: 50, 50 ”en la consola de salida.

Sprites anidados

Ahora hagamos nuestra escena un poco más interesante. Comencemos moviendo nuestro código de generación Sprite a un nuevo método. Agregaremos este método a nuestra clase:

 función privada createCircle (x: Number, y: Number): Sprite {var sprite: Sprite = new Sprite (); sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); sprite.x = x; sprite.y = y; sprite de regreso; }

A continuación, reemplazamos el código en nuestro constructor. Primero, creamos un nuevo sprite llamado contenedor que usaremos para mantener una colección de círculos. Lo colocamos en el centro de nuestro escenario. En segundo lugar, usamos un bucle para crear un montón de círculos. Aquí, alineamos los círculos simétricamente alrededor del punto 0,0 del contenedor principal. Nuestro nuevo constructor ahora se ve así:

 función pública Tutorial () {contenedor var: Sprite = new Sprite (); contenedor.x = 400; contenedor.y = 300; this.addChild (contenedor); para (var i: int = 0; i <10; ++ i) {var x: Number = (i / 5 <1? 1: -1) * (13 + 26 * (i% 5)); container.addChild (createCircle (x, 0)); }}

Ejecute la nueva versión de la aplicación. Debería ver una línea de diez círculos en el medio de la aplicación.
Ahora podemos modificar el contenedor para actualizar todos los círculos dentro de él. Intenta jugar con diferentes variables visuales en el sprite contenedor. Por ejemplo, modifique el x, y, scaleX, scaleY, rotationy alpha propiedades.

Otros temas

Hay mucho más que puede hacer con las opciones básicas que ofrece Flash. Desafortunadamente, están un poco más allá de lo que tenemos tiempo para aquí. Algunas cosas para explorar incluyen filtros de imagen (vea el flash.filters paquete), que le permiten agregar efectos visuales para mostrar objetos usando su filters propiedad y las diferentes opciones disponibles en el flash.display.Graphics clase, incluidos los estilos de relleno y línea, y muchas más rutinas de dibujo 2D.

Parte 2: animaciones

Ahora que podemos crear objetos visuales, es hora de comenzar a darles vida. Flare incluye el flare.animate paquete para ayudar a facilitar esto. Primero, necesitamos importar las bibliotecas de bengalas para usarlas en Flex Builder.

Importando Bibliotecas

Antes de continuar, asegúrese de tener las bibliotecas de reflejos cargadas como proyectos dentro de Flex Builder. Ya debería haber descomprimido los archivos de reflejos en el directorio principal del espacio de trabajo de Flex Builder. El siguiente paso es importarlos al entorno de Flex Builder:

• Asegúrese de estar en la perspectiva de "Desarrollo Flex".
• Haga clic derecho en el panel del navegador a la izquierda.
• Seleccione "Importar ..." en el menú emergente.
• En el cuadro de diálogo, seleccione "General> Proyectos existentes en el espacio de trabajo" y haga clic en el botón "Siguiente".
• Use los widgets "Seleccionar directorio raíz" para navegar a su directorio de espacio de trabajo de Flex Builder
• Ahora debería ver los proyectos acampanados enumerados en el panel "Proyectos:".
• Seleccione los proyectos "flare" y "flare.demos" y luego haga clic en el botón "Finish".

Ahora debería ver los proyectos de bengalas en el panel Navegador. Ahora puede examinar el código fuente de cada una de las bibliotecas y las demostraciones.

Descripción general de la biblioteca de bengalas

Aquí hay una descripción rápida del kit de herramientas de bengalas. Dentro de flare proyecto, mire dentro de la carpeta "src / flare". Encontrará una serie de paquetes que ofrecen diferentes características:

• analytics: operadores para calcular estadísticas y analizar datos
• animate: herramientas para crear animaciones
• data: métodos para leer y escribir conjuntos de datos
• display: DisplayObject tipos que amplían los proporcionados por flash.display
• flex: un contenedor para incrustar visualizaciones Flare en aplicaciones Flex
• physics: un motor de física para efectos físicos o diseño dirigido a la fuerza
• query: un procesador de consultas para objetos ActionScript
• scale: clases para manejar escalas de datos, como escalas lineales, de registro y de tiempo
• util: un conjunto de clases de utilidad que proporcionan funciones comúnmente necesarias
• vis: los componentes y operadores de visualización de destellos

También está el flare.demos proyecto, que proporciona una serie de ejemplos de cómo crear componentes Flare.

Importar una biblioteca dentro de otro proyecto

Para utilizar la llamarada en sus propios proyectos, deberá actualizar la configuración de su proyecto. Aquí se explica cómo hacerlo:

1. En el panel Navegador, haga clic con el botón derecho en la carpeta superior del proyecto "Tutorial"
2. Haga clic en "Propiedades" en el menú contextual.
3. En el cuadro de diálogo resultante, haga clic en "Ruta de compilación de ActionScript" en el panel izquierdo (debe ser el tercer elemento desde la parte superior)
4. Haga clic en la pestaña "Ruta de la biblioteca" en el panel derecho
5. Haga clic en el botón "Agregar proyecto"
6. Ahora debería ver una lista de proyectos, incluida la llamarada.
7. Seleccione "bengala" y luego haga clic en "Aceptar"

Ahora ha agregado las bibliotecas de destellos a su proyecto, y puede usar cualquiera de las clases que proporciona.
Una cosa a tener en cuenta sobre el compilador Flex: de manera predeterminada, solo incluye las clases que realmente usa en su aplicación. Entonces, incluso si importa una biblioteca muy grande, el tamaño de su archivo .swf final puede ser bastante pequeño. Sin embargo, tenga en cuenta que esto puede causar problemas si utiliza la reflexión para realizar una carga de clase dinámica en su aplicación (una característica más avanzada que no se trata en este tutorial).

Animación básica: interpolación, secuencia y paralela

Ok, ahora vamos a animar! los flare.animate.Transition La clase es la clase base para todas las animaciones. Subclases importantes de Transition son el Tween, Sequencey Parallel transiciones Las interpolaciones se utilizan para animar las propiedades de un solo objeto. Las secuencias se utilizan para ejecutar una serie de animaciones en orden. Las transiciones paralelas ejecutan una colección de transiciones simultáneamente. Comencemos con Tween.

Propiedades de objeto de interpolación

Los conceptos básicos de la clase Tween son simples: tomamos un objeto, le damos un conjunto de valores de propiedad que nos gustaría cambiar con el tiempo y especificamos la duración del tiempo para ese cambio. Usando la aplicación Tutorial de la Parte 1, rotemos el objeto contenedor. Agregue la siguiente línea al final del constructor de la clase Tutorial:

 interpolación var: interpolación = interpolación nueva (contenedor, 3, {rotación: 360}); tween.play ();

Además, asegúrese de tener una nueva declaración de importación en la parte superior de su clase, para que el compilador sepa de qué está hablando. Agregue esto a la lista de importaciones:

 importar llamarada.animar.Interpolación;

(NOTA: a veces Flex Builder agregará automáticamente una declaración de importación para usted a medida que escribe un nuevo nombre de clase. Si no, otra técnica es colocar el cursor de texto en el fin del nuevo nombre de clase y escriba "Ctrl-Space"; esto debería crear una nueva importación para la clase).
Ahora ejecute su aplicación: los puntos deben rotar en círculo durante un período de 3 segundos.
Esto es lo que está haciendo el constructor Tween:

• El primer argumento es el objeto cuyos valores deben ser interpolados.
• El segundo argumento es la duración de la animación, en segundos.
• El tercer argumento es una instancia de Object que enumera las propiedades para animar y sus valores objetivo.
  • Los nombres de las propiedades deben coincidir exactamente con las propiedades del objeto de entrada.
  • Las propiedades anidadas están permitidas, pero deben estar entre comillas. Por ejemplo, {“data.profit”:50} es una entrada legal si el objeto de entrada tiene una propiedad llamada datos que a su vez tiene una propiedad llamada ganancia.

El play Luego, el método ejecuta la animación. los play El método también se puede invocar con un único parámetro booleano que indica si ejecutar o no la animación en reversa.
Es posible que haya notado que la animación de rotación exhibe cierta aceleración. Esto se debe a que la configuración predeterminada para Tween instancias es usar animación de "ralentización lenta". Puede controlar estos comportamientos usando Easing funciones Estas funciones toman como entrada el progreso de la animación actual como una fracción entre 0 y 1. Luego devuelven una fracción de progreso manipulada para cambiar el ritmo de la animación, a menudo de manera no lineal.
Para eliminar la aceleración (es decir, utilizar una función de aceleración lineal) puede escribir: tween.easing = Easing.none. Solo asegúrate de importar el flare.animate.Easing clase en la parte superior del archivo.
Siéntase libre de experimentar con otras funciones de relajación. Por ejemplo, las funciones de flexibilización pueden implicar flexibilizar (manipular solo el inicio de la animación), flexibilizar (manipular solo el final de la animación) o ambas. Por ejemplo, intente esto: tween.easing = Easing.easeOutBounce. Esto debería hacer que la rotación rebote al final.
Antes de continuar, intente animar otras propiedades del contenedor, como la posición, la escala o los valores alfa.

Animaciones compuestas

El Sequence y Parallel Las clases te permiten agrupar animaciones. Sequence ejecuta un conjunto de animaciones una tras otra. Por ejemplo, intente esto:

 var t1: Tween = nueva Tween (contenedor, 1, {y: 100}); var t2: Tween = nueva Tween (contenedor, 1, {scaleX: 2}); var t3: Tween = nueva Tween (contenedor, 1, {y: 300}); var t4: Tween = nueva Tween (contenedor, 1, {scaleX: 1}); var seq: Sequence = new Sequence (new Parallel (t1, t2), new Parallel (t3, t4)); seq.play ();

También deberá agregar algunas nuevas declaraciones de importación en la parte superior del archivo:

 importar flare.animate.Parallel; importar flare.animate.Sequence;

Esto crea cuatro interpolaciones: t1, t2, t3y t4. Luego crea dos transiciones paralelas que se ejecutan t1 y t2 juntos y correr t3 y t4 juntos. Las transiciones paralelas se ejecutan una tras otra en una secuencia. De esta manera, es fácil construir animaciones más complicadas.
Para animaciones compuestas más avanzadas, eche un vistazo a FlareLogo y flare.demos.Animation clases en el flare.demos proyecto.

Animación Batch con Transitioners

Usando el Tween, Parallely Sequence clases, puedes hacer cualquier cantidad de transiciones animadas. Sin embargo, cuando se trata de grandes colecciones de objetos (comunes en la visualización) puede ser difícil manejar manualmente un conjunto de interpolaciones similarmente grande. Además, debería ser fácil ejecutar rutinas separadas para codificar propiedades visuales como diseño, color, tamaño, forma y no tener que preocuparse por manejar la animación. Quizás desee animar cambios o quizás desee una actualización estática. De cualquier manera, debería poder reutilizar el mismo código para asignar valores.
Para abordar estas preocupaciones, Flare proporciona Transitioner clase. Los transitorios simplifican el proceso de creación de animaciones para colecciones de objetos. Simplemente tome un objeto y establezca las propiedades deseadas una por una. Detrás de escena, el transductor generará y reutilizará automáticamente las interpolaciones necesarias para modelar la animación completa. Además, si no se desea la animación, el transitor se puede configurar para que establezca los valores de las propiedades inmediatamente. En resumen, el transistor proporciona una capa de indirección para actualizar las propiedades de los objetos: estas actualizaciones se pueden recopilar y luego animar o aplicar de inmediato.
Aquí hay un ejemplo simple de uso de un transición en nuestra aplicación tutorial.

 var t: Transitioner = new Transitioner (2); para (var j: int = 0; j

Este ejemplo anima a todos los sprites en container a un nuevo azar y posición y factor de escala vertical aleatorio. Primero creamos un nuevo Transitioner eso debería crear una animación de 2 segundos. Luego, recorremos cada sprite secundario y usamos el transductor para establecer las propiedades en Tween.
El transitorio $ El operador indica que queremos establecer un valor objetivo para el objeto de entrada. Por defecto, ya sea un nuevo Tween es creado, o un existente Tween se encuentra para el artículo actual. los $ El operador luego devuelve un objeto sobre el cual establecer la propiedad de destino de la interpolación.
Además, los transitorios se pueden usar para crear transiciones estáticas (no animadas). Si un transeúnte immediate La propiedad se establece en verdadero, no creará nuevas interpolaciones. En cambio, el operador $ simplemente devolverá el valor de entrada. Esto significa que puede crear métodos que actualicen los valores utilizando un transitor, y luego controlar si desea o no esos valores actualizados. El "modo inmediato" estándar Transitioner se recupera utilizando la estática Transitioner.DEFAULT propiedad. De esa manera no necesita asignar un nuevo Transitioner al realizar actualizaciones inmediatas.
Los transicionadores se utilizan ampliamente en todo el flare.vis paquete, lo que permite a los diseñadores de visualización controlar qué actualizaciones deben animarse y cómo.

Parte 3: visualizaciones

Cargando datos

La representación de datos básica para Flare simplemente usa los tipos de datos Flash incorporados: Object y Array. Por ejemplo, una tabla de datos solo puede representarse como una matriz de objetos, cada objeto que contiene los nombres y valores de cada campo de datos. Si bien son posibles representaciones más eficientes, este enfoque proporciona la mayor flexibilidad al tiempo que aprovecha las convenciones de desarrollo de Flash existentes.
Para cargar datos en el reproductor Flash, hay varios enfoques. Un enfoque simple es incrustar sus datos en la aplicación misma. De esa manera, los datos se descargan junto con la aplicación, lo cual está bien para conjuntos de datos estáticos. Por ejemplo, puede usar la notación de objetos de ActionScript para definir el conjunto de datos directamente como una variable:

datos var: matriz = [{id: "Q1", ventas: 10000, beneficio: 2400}, {id: "Q2", ventas: 12000, beneficio: 2900}, {id: "Q3", ventas: 15000, beneficio : 3800}, {id: "Q4", ventas: 15500, beneficio: 3900}];

Sin embargo, en muchos casos querrá cargar sus datos dinámicamente, ya sea desde una página web (puede usar JavaScript en el navegador para pasar valores a Flash) o desde un servidor en Internet. Hay muchos enfoques para hacer esto y debe elegir lo que funcione mejor para su aplicación en particular. Por ejemplo, ActionScript proporciona tipos de datos y sintaxis adicionales para trabajar con XML datos utilizando el ECMAScript para XML (E4X) estándar.
Flare también proporciona algunas utilidades para cargar conjuntos de datos externos. Admite cargar datos desde cualquier servidor en Internet y convertir esos datos en objetos internos de ActionScript. Los formatos de archivo admitidos actualmente son texto delimitado por tabulaciones ("tab", un formato de archivo estándar para exportar datos desde herramientas como Excel), Notación de objetos JavaScript ("Json", un formato de datos común para aplicaciones web), y GrafoML ("Graphml", un XML formato para representar redes con nodos y aristas).
Los datos remotos se cargan por bengala usando el flare.data.DataSource clase. Aquí hay un ejemplo de cómo usarlo para cargar un archivo de datos delimitado por tabulaciones:

var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); cargador de var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// la función para manejar los datos una vez que se completa la carga var ds: DataSet = loader.data como DataSet; // ahora haga algo con los datos ...} );

El DataSource El constructor tiene dos argumentos obligatorios: la url del conjunto de datos y una cadena que indica el formato del archivo. En este momento, los formatos admitidos son "tabulación" (delimitado por tabulaciones), "json" (notación de objetos JavaScript) y "graphml" (GraphML).
Para los conjuntos de datos cuyo esquema (los nombres y tipos de datos de los campos) pueden no estar claros, también hay un tercer argumento de constructor opcional que toma un DataSchema tipo. Ver el flare.data.DataSchema y flare.data.DataField clases para más. El esquema puede ser útil para garantizar que los valores de los datos se nombren correctamente (por ejemplo, para un archivo delimitado por tabulaciones que no tenga una fila de encabezado) y se conviertan en los tipos de datos adecuados (por ejemplo, para datos JSON en los que los valores numéricos se envuelven entre comillas).
Para cargar realmente los datos, se llama al método de carga DataSource, que devuelve un flash.net.URLLoader ejemplo. El cargador se puede usar para rastrear el progreso de la descarga (por ejemplo, si desea proporcionar una barra de progreso) y proporciona un evento de notificación cuando se completa la descarga. En el ejemplo anterior, agregamos un detector de eventos para recibir una notificación cuando se complete la descarga. los DataSource analizará automáticamente los datos de entrada, los asignará a objetos de ActionScript y almacenará los resultados en un flare.data.DataSet objeto. los DataSet La clase puede representar tanto datos de tabla como de red (nodo / borde).

Crear y gestionar objetos visuales

Ahora nos gustaría visualizar un conjunto de datos. Para hacer esto, asignamos registros de datos individuales en elementos visuales. Flare proporciona un conjunto de objetos visuales para representar los datos. Aquí hay una descripción general de las clases básicas proporcionadas por flare.vis.data paquete.

• DataSprite: Clase base para sprites que representan datos visualmente. DataSprite es una subclase de Flash Player Sprite clase. DataSprite incluye una data propiedad donde se almacena la tupla de datos (un objeto ActionScript) y también proporciona variables visuales adicionales más allá de las admitidas por sprites básicos, incluidos los campos de color, forma y tamaño, y soporte para establecer posiciones en coordenadas polares.
• NodeSprite: DataSprite instancia que representa un nodo. Este es el tipo predeterminado utilizado para visualizar datos. NodeSprite las instancias pueden conectarse dentro de la red o estructuras de árbol mediante EdgeSprite instancias.
• EdgeSprite: DataSprite instancia que representa un borde. Un EdgeSprite conecta dos NodeSprites. Los nodos son accesibles a través de source y target propiedades. EdgeSprites se usan para crear gráficos y árboles, así como para representar líneas, como en los gráficos de series de tiempo.

Normalmente, NodeSprites y EdgeSprites se crean y almacenan en flare.vis.data.Data clase, que gestiona todos los elementos visuales para una sola visualización. los Data La clase proporciona métodos para crear nuevos objetos visuales para tuplas de datos y para representar una estructura gráfica.
El Data La clase también proporciona métodos para atravesar y actualizar los elementos de datos contenidos. los nodes y edges las propiedades devuelven listas de los nodos y bordes contenidos en los datos. Cada una de estas listas incluye un visit Método que le permite pasar una función que luego se llamará con cada nodo o borde. También el setProperty y setProperties Los métodos le permiten establecer valores de propiedad para todos los nodos o aristas a la vez. Estos métodos opcionalmente toman un Transitioner como argumento, para que pueda animar la actualización de la propiedad.
Por ejemplo, el siguiente código da como resultado una animación de un segundo en la que el color de línea para todos los nodos se establece en azul. (Tenga en cuenta que la notación hexadecimal para DataSprite los valores de color incluyen los canales alfa y rojo, verde y azul).

data.nodes.setProperty ("lineColor", 0xff0000bb, nuevo Transitioner (1)). play ();

Las listas de nodos y bordes también admiten valores de propiedad predeterminados, utilizando el setDefault, setDefaults, removeDefaulty clearDefaults métodos. Los valores predeterminados se establecerán en un nodo o borde recién creado utilizando la clase de datos ' addNode or addEdgeFor métodos.
El Tree clase es una subclase de Data, especializado para representar un árbol en lugar de un gráfico general. los Data clase soporta la creación automática de un Tree instancia calculando árboles de expansión de un gráfico general. Se pueden pasar como parámetros una serie de métodos de creación de árbol de expansión, incluidos los algoritmos de amplitud, profundidad y mínima del árbol de expansión. Estos cálculos se realizan utilizando el flare.analytics.graph.SpanningTree clase.
Para crear realmente objetos de nodo y aristas, usamos el addNode y addEdgeFor métodos.

• addNode toma una tupla de datos de entrada (un Object) y crea un nuevo NodeSprite para visualizar esos datos.
• addEdgeFor toma dos existentes NodeSprites y agrega un EdgeSprite conectándolos. El método también opcionalmente exceptúa una tupla de datos (de nuevo, un Object representando cualquier campo de datos) para el borde.

Aquí hay un ejemplo simple para crear NodeSprites para un conjunto de datos tabulares, suponiendo que tengamos una matriz de objetos de datos:

lista var: matriz; // una matriz de objetos de datos que ya hemos cargado var data: Data = new Data (); // un nuevo contenedor de datos para cada (var o: Object in list) {data.addNode (o); }

El resultado es un Data objeto poblado con visual DataSprite (nodos o aristas) instancias.
En la práctica, no siempre necesita llenar los datos visualizados manualmente. Para crear un Data objeto para visualizar un conjunto de datos cargado, a menudo puede utilizar un método conveniente en su lugar. los Data.fromArray() la función crea un Data instancia para datos tabulares almacenados como una matriz de objetos ActionScript, mientras que Data.fromDataSet() método de manera similar crea un Data instancia de un cargado DataSet objeto.

Construyendo una visualización

Ahora juntemos todo esto para comenzar a hacer visualizaciones. los Visualization La clase representa una visualización única, incluidas las marcas visuales (almacenadas en un Data instancia) y ejes. Para crear una visualización, cargamos un conjunto de datos, agregamos los datos a una visualización y configuramos operadores que determinan cómo visualizar los datos. Aquí hay un ejemplo. Primero revise el código, luego siga leyendo para comprender qué está haciendo cada parte.

paquete {import flare.data.DataSet; import flare.data.DataSource; import flare.scale.ScaleType; import flare.vis.Visualization; import flare.vis.data.Data; import flare.vis.operator.encoder.ColorEncoder; import flare.vis.operator.encoder.ShapeEncoder; import flare.vis.operator.layout.AxisLayout; importar flash.display.Sprite; import flash.events.Event; import flash.geom.Rectangle; importar flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] clase pública Tutorial extiende Sprite {private var vis: Visualization; función pública Tutorial () {loadData (); } función privada loadData (): void {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); cargador de var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {var ds: DataSet = loader.data as DataSet; visualize (Data.fromDataSet (ds));}); } función privada visualizar (datos: datos): void {vis = nueva visualización (datos); vis.bounds = nuevo rectángulo (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (nuevo AxisLayout ("data.date", "data.age")); vis.operators.add (nuevo ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (nuevo ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Veamos cada método.
El constructor es simple: solo llama al loadData método.
El loadData El método crea un nuevo origen de datos y lo carga utilizando los métodos descritos anteriormente. En este caso, el conjunto de datos se informa de homicidios en el condado de Los Ángeles en 2007, almacenados en formato delimitado por tabuladores. Cuando se completa la carga, las tuplas de datos cargados se agregan a un Data instancia utilizando el fromDataSet método de conveniencia Debajo del capó, esto resulta en la creación de NodeSprites para visualizar cada elemento de datos. Finalmente, el visualize método se llama.
El visualize El método configura la visualización. Esto es lo que está sucediendo en cada paso:

• Parte 1: Inicialización
  • Se crea una nueva visualización para los datos.
  • Establecemos los límites para la visualización. Esto determina el área de diseño.
  • Establecemos el x y y posición de nuestra visualización y agregar la visualización a la lista de visualización.
• Parte 2: Especificar codificaciones visuales
  • Usamos un diseño de eje, colocando "fecha" en el eje xy "edad" en el eje y. los AxisLayout El operador también configura automáticamente los ejes para la visualización. Utilizamos la sintaxis "data.date" para denotar las variables de datos, ya que se encuentran dentro de NodeSpritees data propiedad.
  • Agregamos una codificación de color, de modo que el color de línea de un nodo represente la variable "causa" (causa de muerte). También le decimos al codificador de color que los valores de la variable "causa" representan categorías (ScaleType.CATEGORIES) El codificador de color utilizará esta información para elegir automáticamente una paleta de colores adecuada. Como veremos en breve, también puede proporcionar su propia paleta de colores.
  • Agregamos una codificación de forma, para que la forma de un objeto represente la "raza" de una víctima.
  • Establecemos propiedades predeterminadas: establecemos el color de relleno de los nodos en transparente completo y establecemos el ancho de línea en 2 píxeles.
  • Finalmente, llamamos al update método. Esto ejecuta todos los operadores en orden.

Actualización de una visualización

Una vez que se ha creado una visualización, es posible que queramos actualizarla. Por ejemplo, tal vez nos gustaría cambiar la codificación del color para visualizar el género de las personas.
Primero, agreguemos un nuevo método a la clase:

 función privada colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = new ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (nuevo Transitioner (2)). play (); }

Este método:

1. Recupera el segundo operador (el operador en el índice 1) y lo convierte en un ColorEncoder
2. Cambia el source propiedad para que el codificador de color use la variable "data.sex"
3. Establece una nueva paleta de colores (en este caso, rojo para las mujeres, azul para los hombres: el orden de los colores coincide con el orden alfabético de las etiquetas)
4. Anima el cambio llamando a actualizar con un Transitioner establecido para una animación de dos segundos. los vis.update El método devuelve el Transitioner, por lo que podemos llamar a play en el valor de retorno de la actualización. (Nota: también puede omitir el Transitioner y solo pasa el número 2 como argumento para update. Un nuevo Transitioner será creado automáticamente y devuelto.)

Ahora necesitamos conectar la aplicación para que podamos activar la actualización de forma interactiva. Para hacerlo, agregue el siguiente código al constructor:

 // agregue un botón var de etiqueta en el que se pueda hacer clic: TextSprite = new TextSprite ("Color by Gender"); addChild (botón); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): void {colorByGender ();});

Este código:

1. Crea una nueva etiqueta de texto (TextSprite es una clase auxiliar de la flare.display paquete)
2. Agrega la etiqueta a la aplicación y establece su posición.
3. Sets buttonMode a verdadero (esto hace que aparezca un cursor de mano cuando pasa el mouse sobre la etiqueta)
4. Agrega un detector de eventos que se activa cuando se hace clic en la etiqueta. Agregamos una función de devolución de llamada que llama al colorByGender método.

Para que el código anterior funcione, necesitaremos incluir estas declaraciones de importación adicionales en la parte superior del archivo:

 import flash.events.MouseEvent; importar flare.animate.Transitioner; import flare.display.TextSprite; import flare.util.palette.ColorPalette;

Ahora debería poder compilar y ejecutar la aplicación. Al hacer clic en la etiqueta "Color por género", debería animar el cambio en la codificación de color.

Siguientes Pasos

Los ejemplos anteriores muestran los conceptos básicos de Flash y la biblioteca Flare, pero hay muchas más características que aún no se han cubierto. En adelante, recomendamos (a) inspeccionar Flash y Flare API documentación para tener una idea de todas las clases disponibles, y (b) profundizar en las demostraciones de Flare para ver cómo los mismos principios mostrados aquí pueden usarse para construir una serie de otras visualizaciones. O, mejor aún, busque en el código fuente de Flare para saber qué sucede debajo del capó.
Para ayudar en este proceso, aquí hay una descripción general de los subpaquetes en flare.vis:

• flare.vis.axis: proporciona ejes, etiquetas y líneas de cuadrícula
• flare.vis.controls: controladores de interacción para selección, zoom y más
• flare.vis.data: objetos visuales que representan elementos de datos
• flare.vis.data.render: renderizadores conectables que dibujan DataSprites
• flare.vis.events: tipos de eventos utilizados en el marco de bengalas
• flare.vis.legend: representa leyendas para describir codificaciones visuales
• flare.vis.operator: bloques de construcción para definir visualizaciones
• flare.vis.palette: paletas para valores de color, forma y tamaño
• flare.vis.util: clases de utilidad general

Ahora debería saber lo suficiente para dar sentido a las demostraciones en el flare.demos paquete. Siéntase libre de jugar, modificar, copiar, pegar y construir sobre las demostraciones para obtener una mejor comprensión de cómo funcionan Flash y Flare.

Enlaces

Descargas

Herramientas

Otras guías tecnológicas

Soporte

Fuente: https://blokt.com/tool/prefuse-flare