Flare | Visualização de dados para a Web

O Flare facilita a criação de visualizações de dados interativas

Para começar a fazer suas próprias visualizações, baixar flare e siga o tutorial abaixo. Precisa de mais ajuda? Visite a fórum de ajuda (você precisará de um SourceForge faça login para postar).

Flare é um software de código aberto lançado sob uma licença BSD, o que significa que pode ser implementado e modificado gratuitamente (e até vendido por $$). O design do Flare foi adaptado de seu prefuso predecessor, um kit de ferramentas de visualização para Java.

Aplicações

Anúncios

• 2010.10.07/XNUMX/XNUMX: O desenvolvimento do Flare foi aberto para a comunidade e a fonte mudou do SourceForge para uma nova casa no GitHub. chama 2009.01.24 ainda é o último lançamento oficial e (pelo menos por agora) os tutoriais e documentação refletem isso. A versão de desenvolvimento no GitHub agora contém melhor suporte para Flash Player 10, bem como muitas outras pequenas correções e alterações.
• 2009.01.24: alargamento 2009.01.24 foi lançado. Esta é uma versão de manutenção com uma série de correções de bugs e atualizações. Veja o notas de lançamento para mais detalhes. Este é o último lançamento planejado para o Flash Player 9 - versões futuras migrarão para a versão 10.
• 2008.07.30: alargamento 2008.07.29 foi lançado. Esta é uma versão importante que apresenta muitos novos recursos e melhorias arquitetônicas. Veja o notas de lançamento para mais detalhes.
• 2008.07.30: alargamento 2008.08.08 foi lançado. Esta versão inclui suporte de legenda aprimorado, transições nomeadas, correções de bugs e uma refatoração para reduzir o acoplamento e consolidar classes de utilitário. Veja o notas de lançamento para mais detalhes.

Tutorial

Um tutorial passo a passo para aprender ActionScript e Flare.

Iniciando

A primeira etapa é configurar suas ferramentas de desenvolvimento.

1. Configure um ambiente de desenvolvimento de flash funcional. Existem duas abordagens. Recomendamos a primeira pela simplicidade, mas usuários mais avançados podem usar a segunda abordagem.
   • Opção 1 (mais simples): Instale o Adobe Flex Builder.
     • Este é um ambiente de desenvolvimento completo para aplicativos ActionScript / Flex. Ele está disponível para todas as principais plataformas (Windows, Mac, Unix). Os usuários que já usam o Eclipse IDE também podem instalar o Flex Builder como um plug-in do Eclipse.
     • A ressalva de usar o Flex Builder é que ele é um software comercial e só funcionará por um período de teste limitado. No entanto, a Adobe oferece licenças gratuitas do Flex Builder para estudantes universitários, professores e funcionários.
   • Opção 2 (mais complicado): Instale o Flex SDK grátis
     • Isso instalará os compiladores ActionScript / Flex básicos: mxmlc e compc. Você pode então configurar seu próprio ambiente de construção, por exemplo, usando o make or ant construir sistemas. O Flare é embalado com um build.xml arquivo para uso com o Formiga Apache sistema de construção. Assim que a formiga estiver instalada, basta abrir o build.xml arquivo em um editor de texto, altere as primeiras linhas para apontar para o seu Flex SDK instalação e, em seguida, use ant para compilar as bibliotecas. Fazemos uso das tarefas de formigas do Adobe Labs para o desenvolvimento do Flex.
     • A vantagem dessa abordagem é que todo o software é gratuito e não irá expirar para você. No entanto, você perde recursos como compilação automática, gerenciamento de projeto e preenchimento automático fornecidos pelo Flex Builder.
2. Baixe as bibliotecas de flare prefuse.
   • O download é um arquivo zip que contém um conjunto de projetos de biblioteca do ActionScript. Descompacte os arquivos em seu diretório de espaço de trabalho principal se estiver usando o Flex Builder. Durante o tutorial, iremos importá-los para o Flex Builder e usá-los para construir visualizações!
   • O software é atualmente uma versão alfa, portanto, alguns bugs e limitações são esperados. Resolveremos os problemas o mais rápido possível e o link acima sempre apontará para a versão mais recente.

Introdução ao Flash e ActionScript 3

Flash é um ótimo ambiente para gráficos interativos e, com a recente adição da linguagem de programação ActionScript 3, ele se tornou muito mais poderoso e eficiente. Embora uma introdução completa ao AS3 esteja além do escopo deste tutorial, aqui estão alguns recursos que você achará úteis:

• A Adobe fornece uma Visão geral do AS3, com links para recursos adicionais.
• ActionScript 3 essencial de Colin Moock da publicação O'Reilly é um ótimo livro para ajudá-lo a começar. Você pode acesse online aqui (algumas instituições, como universidades, fornecem acesso gratuitamente).
• O Adobe Flex API Reference é inestimável para a compreensão das diferentes classes e métodos disponíveis. Estaremos focados apenas nas aulas do flash.* pacotes.

Este tutorial pressupõe uma familiaridade básica com a sintaxe e os tipos do ActionScript, bem como com os conceitos de programação orientada a objetos.

Parte 1: DisplayObjects

Introdução

O Flash modela uma cena visual 2D usando um cenário. Os objetos visuais são organizados em uma hierarquia, com os objetos filhos definidos no espaço de coordenadas do pai. Freqüentemente, você verá este gráfico de cenário conhecido como lista de exibição na documentação da Adobe e em livros sobre programação Flash.
O nó no topo da lista de exibição é sempre o Stage objeto. O palco sempre tem um e apenas um filho. Isso é chamado de root, e todos os itens visuais estão abaixo da raiz. Normalmente, a raiz é o seu aplicativo Flash real. Voltaremos a isso em breve.
Todos os itens visuais que podem ser adicionados à lista de exibição são instâncias do DisplayObject classe. Subclasses de DisplayObject incluir Bitmap (para imagens), TextField (para áreas de texto interativas), e Video (pense no YouTube). Os casos mais comuns, no entanto, são os Sprite e Shape Aulas. Para referência, a maioria dessas classes pode ser encontrada no flash.display pacote (embora eventualmente você provavelmente encontre o flash.text pacote de uso também).
A Sprite classe é o objeto visual geral mais útil usado pelo Flash Player. Sprites são objetos visuais que contêm conteúdo de desenho e podem servir como um contêiner para sub-nós na lista de exibição (o Sprite classe subclasses o flash.display.DisplayObjectContainer classe). Em contraste, o Shape classe pode conter conteúdo de desenho, mas não pode conter subnós. Como resultado, os Shapes usam menos memória, mas são muito menos flexíveis. Para simplificar, vamos nos concentrar em Sprites neste tutorial.

Criar uma nova aplicação

Primeiro, vamos criar um novo aplicativo Flash. Para fazer isso, abra o Flex Builder e certifique-se de estar na perspectiva “Flex Development” (geralmente alcançada clicando no ícone preto e branco “Fx” no canto superior direito).
No painel “Navigator” à esquerda, clique com o botão direito do mouse na tela e selecione “New> ActionScript Project”. Na caixa de diálogo resultante, digite “Tutorial” como o nome do projeto e clique em “Concluir”. Isso criará um novo projeto para você.
Agora você deve ver uma pasta “Tutorial” no painel “Navigator”. Dentro desta pasta, você deve ver um arquivo chamado “Tutorial.as”. Este é o arquivo principal do seu aplicativo. Abra-o, se ainda não estiver aberto.
Dentro do arquivo, você verá a estrutura básica para esta classe:

pacote {import flash.display.Sprite; public class Tutorial extends Sprite {public function Tutorial () {}}}

Observe que esta classe estende o Sprite classe. Como esta é a nossa principal classe de aplicativo, quando executamos o aplicativo, uma instância do Tutorial classe será automaticamente adicionada à lista de exibição como seu root (o único filho do Stage).
Observe também que um construtor foi criado automaticamente. Este construtor será chamado quando o aplicativo for iniciado. Para aqueles familiarizados com linguagens de programação como C, C ++ ou Java, o construtor da classe do aplicativo funciona como um main funcionar nessas outras línguas.
Com este novo scaffolding de aplicativo no lugar, podemos começar a brincar com objetos visuais. No entanto, há uma coisa que queremos fazer primeiro. Adicione uma nova linha diretamente acima da declaração da classe (”public class Tutorial…”) Linha que diz:

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

Esta linha define as configurações padrão para seu aplicativo (que é compilado e salvo como um arquivo .swf no diretório “bin” do seu projeto). Acima, definimos o tamanho, cor de fundo e taxa de quadros alvo (em quadros por segundo) para nosso aplicativo.

Sprites

Como todos DisplayObjects, Sprite suporta uma série de propriedades visuais prontas para usar. Isso inclui o x, y, scaleX, scaleY, rotation e alpha propriedades. Eles respectivamente mudam a posição, tamanho, orientação e transparência de um sprite (e todos os seus filhos! Lembre-se, estamos usando um gráfico de cenário aqui).
No entanto, esses valores não significam muito ainda, pois os sprites não contêm nada por padrão. Começaremos desenhando nosso próprio conteúdo.
Cada Sprite também tem um graphics propriedade. Podemos usar isso para desenhar gráficos para o Sprite. O graphics propriedade é uma instância do flash.display.Graphics classe, que fornece vários comandos de desenho vetorial.
No exemplo abaixo, fazemos várias coisas.

• Primeiro, criamos um novo Sprite.
• Em segundo lugar, usamos o sprite graphics para desenhar um círculo com preenchimento cinza e contorno preto.
  • beginFill define a cor e o estilo de preenchimento atuais. O primeiro argumento é a cor, em notação hexadecimal, e o segundo argumento é o valor alfa, que varia de 0 para totalmente transparente a 1 para totalmente opaco.
  • lineStyle define a cor e o estilo do traço atual. O primeiro argumento é a largura da linha, o segundo argumento é a cor.
  • drawCircle desenha um círculo de raio 10 no ponto 0,0 no espaço de coordenadas do nosso sprite.
• Terceiro, adicionamos o sprite como filho de nosso aplicativo principal (um Tutorial duende).
• Quarto, definimos o x e y posição do nosso sprite.
• Quinto, adicionamos alguma saída de depuração. trace imprime uma string no console. Esta saída só é exibida ao executar o aplicativo no modo “depurar”.

Aqui está o código:

pacote {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] public class Tutorial extends 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 ("nosso sprite está em:" + sprite.x + "," + sprite.y); }}}

Execute o aplicativo (clique com o botão direito em “Tutorial.as” e selecione “Executar como> Aplicativo Flex”). Você deve ver um círculo cinza com contorno preto no canto superior esquerdo, centralizado no ponto 50, 50. Se você executar o aplicativo no modo de depuração (selecione “Depurar como> Aplicativo Flex”), você também deverá ver a string “nosso sprite está em: 50, 50 ”no console de saída.

Sprites aninhados

Agora vamos deixar nossa cena um pouco mais interessante. Vamos começar movendo nosso código de geração de Sprite para um novo método. Vamos adicionar este método à nossa classe:

 função 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 retorno; }

Em seguida, substituímos o código em nosso construtor. Primeiro, criamos um novo sprite chamado container que usaremos para manter uma coleção de círculos. Nós o colocamos no centro do nosso palco. Em segundo lugar, usamos um loop para criar um monte de círculos. Aqui, alinhamos os círculos simetricamente em torno do ponto 0,0 do contêiner pai. Nosso novo construtor agora se parece com isto:

 função pública Tutorial () {var container: Sprite = new Sprite (); container.x = 400; container.y = 300; this.addChild (contêiner); para (var i: int = 0; i <10; ++ i) {var x: Número = (i / 5 <1? 1: -1) * (13 + 26 * (i% 5)); container.addChild (createCircle (x, 0)); }}

Execute a nova versão do aplicativo. Você deve ver uma linha de dez círculos no meio do aplicativo.
Agora podemos modificar o contêiner para atualizar todos os círculos dentro dele. Experimente brincar com a configuração de diferentes variáveis ​​visuais no sprite de contêiner. Por exemplo, modifique o x, y, scaleX, scaleY, rotation e alpha propriedades.

outros tópicos

Há muito mais que você pode fazer com as opções básicas que o Flash oferece. Infelizmente, eles estão um pouco além do que temos tempo para aqui. Algumas coisas a explorar incluem filtros de imagem (consulte o flash.filters pacote), que permitem adicionar efeitos visuais para exibir objetos usando seus filters propriedade, e as diferentes opções disponíveis no flash.display.Graphics classe, incluindo preenchimento e estilos de linha e muitas outras rotinas de desenho 2D.

Parte 2: Animações

Agora que podemos criar objetos visuais, é hora de começar a dar-lhes um pouco de vida. Flare inclui o flare.animate pacote para ajudar a tornar isso mais fácil. Primeiro, precisamos importar as bibliotecas de flare para uso no Flex Builder.

Importando Bibliotecas

Antes de continuar, certifique-se de ter as bibliotecas flare carregadas como projetos no Flex Builder. Você já deve ter descompactado os arquivos flare no diretório principal do espaço de trabalho do Flex Builder. A próxima etapa é importá-los para o ambiente Flex Builder:

• Certifique-se de estar na perspectiva “Flex Development”.
• Clique com o botão direito no painel do navegador à esquerda.
• Selecione “Importar…” no menu pop-up.
• Na caixa de diálogo, selecione “Geral> Projetos existentes no espaço de trabalho” e clique no botão “Avançar”.
• Use os widgets “Selecionar diretório raiz” para navegar até o diretório do espaço de trabalho do Flex Builder
• Agora você deve ver os projetos de flare listados no painel “Projetos:”.
• Selecione os projetos “flare” e “flare.demos” e clique no botão “Concluir”.

Agora você deve ver os projetos de flare no painel do Navegador. Agora você pode navegar pelo código-fonte de cada biblioteca e demos.

Visão geral da biblioteca do flare

Aqui está uma visão geral rápida do kit de ferramentas do flare. Dentro de flare projeto, olhe dentro da pasta “src / flare”. Você encontrará vários pacotes com recursos diferentes:

• analytics: operadores para computar estatísticas e analisar dados
• animate: ferramentas para criar animações
• data: métodos para ler e escrever conjuntos de dados
• display: DisplayObject tipos que estendem aqueles fornecidos por flash.display
• flex: um wrapper para incorporar visualizações Flare em aplicativos Flex
• physics: um motor de física para efeitos físicos ou layout dirigido por força
• query: um processador de consulta para objetos ActionScript
• scale: classes para lidar com escalas de dados, como escalas lineares, log e de tempo
• util: um conjunto de classes utilitárias que fornecem funções comumente necessárias
• vis: os componentes e operadores de visualização do flare

Há também o flare.demos projeto, que fornece vários exemplos de como criar componentes Flare.

Importar uma biblioteca dentro de outro projeto

Para usar o flare em seus próprios projetos, você precisará atualizar as configurações do projeto. Veja como fazer isso:

1. No painel do Navegador, clique com o botão direito na pasta superior do projeto “Tutorial”
2. Clique em “Propriedades” no menu de contexto
3. Na caixa de diálogo resultante, clique em “ActionScript Build Path” no painel esquerdo (deve ser o terceiro item a partir do topo)
4. Clique na guia “Caminho da biblioteca” no painel direito
5. Clique no botão “Adicionar Projeto”
6. Agora você deve ver uma lista de projetos, incluindo flare.
7. Selecione “flare” e clique em “OK”

Agora você adicionou as bibliotecas flare ao seu projeto e pode usar qualquer uma das classes que ele fornece.
Uma coisa a ser observada sobre o compilador Flex - por padrão, ele inclui apenas as classes que você realmente usa em seu aplicativo. Portanto, mesmo que você importe uma biblioteca muito grande, o tamanho do arquivo .swf final ainda pode ser bem pequeno. No entanto, esteja ciente de que isso pode causar problemas se você usar a reflexão para executar o carregamento dinâmico de classes em seu aplicativo (um recurso mais avançado não coberto neste tutorial).

Animação Básica: Tween, Sequence e Parallel

Ok, agora vamos animar! o flare.animate.Transition class é a classe base para todas as animações. Subclasses importantes de Transition são o Tween, Sequence e Parallel transições. Interpolações são usadas para animar propriedades de um único objeto. As sequências são usadas para executar uma série de animações em ordem. As transições paralelas executam uma coleção de transições simultaneamente. Vamos começar com Tween.

Propriedades do objeto de interpolação

Os princípios básicos da classe Tween são simples: pegamos um objeto, fornecemos um conjunto de valores de propriedade que gostaríamos de alterar ao longo do tempo e especificamos a duração de tempo para essa alteração. Usando o aplicativo Tutorial da Parte 1, vamos girar o objeto contêiner. Adicione a seguinte linha ao final do construtor da classe Tutorial:

 var tween: Tween = novo Tween (recipiente, 3, {rotação: 360}); tween.play ();

Além disso, certifique-se de ter uma nova instrução import no início da classe, para que o compilador saiba do que você está falando. Adicione isso à lista de importações:

 importar flare.animate.Tween;

(NOTA: às vezes, o Flex Builder adiciona automaticamente uma instrução de importação para você conforme você digita um novo nome de classe. Caso contrário, outra técnica é colocar o cursor de texto em o fim do nome da nova classe e digite “Ctrl-Espaço” - isso deve criar uma nova importação para você para a classe.)
Agora execute seu aplicativo - os pontos devem girar em um círculo por um período de 3 segundos.
Aqui está o que o construtor Tween está fazendo:

• O primeiro argumento é o objeto cujos valores devem ser interpolados
• O segundo argumento é a duração da animação, em segundos
• O terceiro argumento é uma instância de Object que lista as propriedades a serem animadas e seus valores de destino.
  • Os nomes das propriedades devem corresponder exatamente às propriedades do objeto de entrada.
  • Propriedades aninhadas são permitidas, mas devem ser colocadas entre aspas. Por exemplo, {“data.profit”:50} é uma entrada válida se o objeto de entrada tiver uma propriedade denominada data que, por sua vez, possui uma propriedade denominada lucro.

A play método então executa a animação. o play O método também pode ser chamado com um único parâmetro booleano indicando se deve ou não executar a animação ao contrário.
Você deve ter notado que a animação de rotação exibe alguma aceleração. Isso ocorre porque a configuração padrão para Tween instâncias é usar animação “slow-in slow-out”. Você pode controlar esses comportamentos usando Easing funções. Essas funções tomam como entrada o progresso da animação atual como uma fração entre 0 e 1. Elas então retornam uma fração de progresso manipulada para alterar o ritmo da animação, geralmente de uma forma não linear.
Para remover o easing (ou seja, usar uma função de easing linear), você pode escrever: tween.easing = Easing.none. Apenas certifique-se de importar o flare.animate.Easing classe no início do arquivo.
Sinta-se à vontade para experimentar outras funções de atenuação. Por exemplo, as funções de atenuação podem envolver atenuar (manipular apenas o início da animação), atenuar (manipular apenas o final da animação) ou ambos. Por exemplo, tente isto: tween.easing = Easing.easeOutBounce. Isso deve fazer a rotação saltar no final.
Antes de prosseguir, experimente animar outras propriedades do contêiner, como posição, escala ou valores alfa.

Animações compostas

A Sequence e Parallel as classes permitem agrupar animações. Sequence executa um conjunto de animações uma após a outra. Por exemplo, tente isto:

 var t1: Tween = novo Tween (contêiner, 1, {y: 100}); var t2: Tween = novo Tween (contêiner, 1, {scaleX: 2}); var t3: Tween = novo Tween (contêiner, 1, {y: 300}); var t4: Tween = novo Tween (contêiner, 1, {scaleX: 1}); var seq: Sequência = nova Sequência (novo Paralelo (t1, t2), novo Paralelo (t3, t4)); seq.play ();

Você também precisará adicionar algumas novas instruções de importação na parte superior do arquivo:

 import flare.animate.Paralelo; import flare.animate.Sequence;

Isso cria quatro interpolações: t1, t2, t3 e t4. Em seguida, ele cria duas transições paralelas que funcionam t1 e t2 juntos e corram t3 e t4 juntos. As transições paralelas são executadas uma após a outra em uma sequência. Desta forma, é fácil construir animações mais complicadas.
Para animações compostas mais avançadas, dê uma olhada no FlareLogo e flare.demos.Animation aulas no flare.demos projeto.

Animação em lote com Transitioners

Com o Tween, Parallel e Sequence classes, você pode fazer qualquer número de transições animadas. No entanto, ao lidar com grandes coleções de objetos (comum na visualização), pode ser difícil lidar manualmente com um conjunto igualmente grande de interpolações. Além disso, deve ser fácil executar rotinas separadas para codificar propriedades visuais como layout, cor, tamanho, forma e não precisar se preocupar com o manuseio da animação. Talvez você queira animar as mudanças ou talvez queira uma atualização estática. De qualquer maneira, você deve ser capaz de reutilizar o mesmo código para atribuir valores.
Para resolver essas questões, Flare fornece o Transitioner classe. Os transicionadores simplificam o processo de criação de animações para coleções de objetos. Você simplesmente pega um objeto e define as propriedades desejadas, uma a uma. Nos bastidores, o transicionador irá gerar e reutilizar automaticamente as interpolações necessárias para modelar a animação completa. Além disso, se a animação não for desejada, o transicionador pode ser configurado para definir os valores da propriedade imediatamente. Resumindo, a transição fornece uma camada de indireção para atualizar as propriedades do objeto - essas atualizações podem ser coletadas e animadas ou aplicadas imediatamente.
Aqui está um exemplo simples de como usar um transicionador em nosso aplicativo tutorial.

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

Este exemplo anima todos os sprites em container para um novo aleatório y posição e fator de escala vertical aleatório. Primeiro criamos um novo Transitioner que deve criar uma animação de 2 segundos. Em seguida, percorremos cada sprite filho e usamos a transição para definir as propriedades como Tween.
The Transitioner's $ operador indica que queremos definir um valor de destino para o objeto de entrada. Por padrão, um novo Tween é criado, ou um existente Tween é encontrado para o item atual. o $ operador então retorna um objeto sobre o qual definir a propriedade de destino da interpolação.
Além disso, as transições podem ser usadas para criar transições estáticas (não animadas). Se uma transição é immediate for definida como true, não criará novas interpolações. Em vez disso, o operador $ simplesmente retornará o valor de entrada. Isso significa que você pode criar métodos que atualizam valores usando uma transição e, posteriormente, controlar se deseja ou não que esses valores sejam atualizados. O “modo imediato” padrão Transitioner é recuperado usando o estático Transitioner.DEFAULT propriedade. Dessa forma, você não precisa alocar um novo Transitioner ao realizar atualizações imediatas.
Transicionadores são usados ​​extensivamente em todo o flare.vis pacote, permitindo que os designers de visualização controlem quais atualizações devem ser animadas e como.

Parte 3: Visualizações

Carregando dados

A representação de dados básicos para Flare simplesmente usa os tipos de dados Flash integrados: Object e Array. Por exemplo, uma tabela de dados pode ser representada apenas como uma matriz de objetos, em que cada objeto contém os nomes e valores de cada campo de dados. Embora representações mais eficientes sejam possíveis, essa abordagem fornece a maior flexibilidade, ao mesmo tempo em que aproveita as vantagens das convenções de desenvolvimento do Flash existentes.
Para carregar dados no Flash Player, existem várias abordagens. Uma abordagem simples é incorporar seus dados ao próprio aplicativo. Dessa forma, os dados são baixados junto com o aplicativo, o que é bom para conjuntos de dados estáticos. Por exemplo, você pode usar a notação de objeto do ActionScript para definir o conjunto de dados diretamente como uma variável:

var data: Array = [{id: "Q1", vendas: 10000, lucro: 2400}, {id: "Q2", vendas: 12000, lucro: 2900}, {id: "Q3", vendas: 15000, lucro : 3800}, {id: "Q4", vendas: 15500, lucro: 3900}];

No entanto, em muitos casos, você desejará carregar seus dados dinamicamente, seja de uma página da web (você pode usar JavaScript no navegador para passar valores para o Flash) ou de um servidor na Internet. Existem muitas abordagens para fazer isso e você deve escolher a que funciona melhor para seu aplicativo específico. Por exemplo, o ActionScript fornece tipos de dados adicionais e sintaxe para trabalhar com XML dados usando o ECMAScript para XML (E4X) padrão.
O Flare também fornece alguns utilitários para carregar conjuntos de dados externos. Ele suporta o carregamento de dados de qualquer servidor na Internet e a conversão desses dados em objetos ActionScript internos. Os formatos de arquivo atualmente suportados são texto delimitado por tabulação (“tab”, um formato de arquivo padrão para exportar dados de ferramentas como o Excel), Notação de Objeto JavaScript (“Json”, um formato de dados comum para aplicativos da web), e GráficoML (“Graphml”, um XML formato para representar redes com nós e arestas).
Os dados remotos são carregados pelo flare usando o flare.data.DataSource classe. Aqui está um exemplo de como usá-lo para carregar um arquivo de dados delimitado por tabulação:

var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// função para lidar com os dados quando o carregamento estiver completo var ds: DataSet = loader.data as DataSet; // agora faça algo com os dados ...} );

A DataSource o construtor tem dois argumentos obrigatórios: o url do conjunto de dados e uma string que indica o formato do arquivo. No momento, os formatos suportados são “tab” (delimitado por tabulação), “json” (JavaScript Object Notation) e “graphml” (GraphML).
Para conjuntos de dados cujo esquema (os nomes e tipos de dados dos campos) pode não ser claro, há também um terceiro argumento de construtor opcional que leva um DataSchema tipo. Veja o flare.data.DataSchema e flare.data.DataField aulas para mais. O esquema pode ser útil para garantir que os valores dos dados sejam nomeados corretamente (por exemplo, para um arquivo delimitado por tabulação sem uma linha de cabeçalho) e convertidos nos tipos de dados adequados (por exemplo, para dados JSON nos quais os valores numéricos foram colocados entre aspas).
Para realmente carregar os dados, o método de carregamento DataSource é chamado, retornando um flash.net.URLLoader instância. O carregador pode ser usado para rastrear o progresso do download (por exemplo, se você quiser fornecer uma barra de progresso) e fornece um evento de notificação quando o download é concluído. No exemplo acima, adicionamos um ouvinte de evento para ser notificado quando o download for concluído. o DataSource irá analisar automaticamente os dados de entrada, mapeá-los em objetos ActionScript e armazenar os resultados em um flare.data.DataSet objeto. o DataSet classe pode representar dados da tabela e da rede (nó / borda).

Criação e gerenciamento de objetos visuais

Agora gostaríamos de visualizar um conjunto de dados. Para fazer isso, mapeamos registros de dados individuais em itens visuais. O Flare fornece um conjunto de objetos visuais para representar os dados. Aqui está uma visão geral das classes básicas fornecidas pelo flare.vis.data pacote.

• DataSprite: Classe base para sprites que representam dados visualmente. DataSprite é uma subclasse do Flash Player Sprite classe. DataSprite inclui um data onde a tupla de dados (um objeto ActionScript) é armazenada e também fornece variáveis ​​visuais adicionais além daquelas suportadas por sprites básicos, incluindo campos de cor, forma e tamanho e suporte para definir posições em coordenadas polares.
• NodeSprite: DataSprite instância que representa um nó. Este é o tipo padrão usado para visualizar dados. NodeSprite instâncias podem ser conectadas dentro da rede ou estruturas de árvore por EdgeSprite instâncias.
• EdgeSprite: DataSprite instância que representa uma borda. A EdgeSprite conecta dois NodeSprites. Os nós são acessíveis por meio do source e target propriedades. EdgeSprites são usados ​​para criar gráficos e árvores, bem como para representar linhas, como em gráficos de séries temporais.

Normalmente, NodeSprites e EdgeSprites são criados e armazenados no flare.vis.data.Data classe, que gerencia todos os itens visuais para uma única visualização. o Data classe fornece métodos para criar novos objetos visuais para tuplas de dados e para representar uma estrutura de gráfico.
A Data A classe também fornece métodos para percorrer e atualizar os itens de dados contidos. o nodes e edges as propriedades retornam listas de nós e arestas contidas nos dados. Cada uma dessas listas inclui um visit método que permite passar uma função que será chamada com cada nó ou aresta. Também o setProperty e setProperties métodos permitem que você defina valores de propriedade para todos os nós ou arestas de uma vez. Esses métodos opcionalmente levam um Transitioner como um argumento, para que você possa animar a atualização da propriedade.
Por exemplo, o código a seguir resulta em uma animação de um segundo em que a cor da linha de todos os nós é definida como azul. (Observe que a notação hexadecimal para DataSprite os valores das cores incluem os canais alfa e também vermelho, verde e azul).

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

Listas de nós e arestas também suportam valores de propriedade padrão, usando o setDefault, setDefaults, removeDefault e clearDefaults métodos. Os valores padrão serão definidos em um nó ou borda recém-criado usando a classe de dados ' addNode or addEdgeFor métodos.
A Tree classe é uma subclasse de Data, especializado em representar uma árvore em vez de um gráfico geral. o Data classe suporta a criação automática de um Tree por exemplo, computando árvores geradoras de um gráfico geral Vários métodos de criação de spanning tree - incluindo amplitude, profundidade primeiro e algoritmos de spanning tree mínimo - podem ser passados ​​como um parâmetro. Esses cálculos são realizados usando o flare.analytics.graph.SpanningTree classe.
Para criar objetos de nós e bordas, usamos o addNode e addEdgeFor métodos.

• addNode pega uma tupla de dados de entrada (um Object) e cria um novo NodeSprite para visualizar esses dados.
• addEdgeFor leva dois existentes NodeSprites e adiciona um EdgeSprite conectando-os. O método também exclui opcionalmente uma tupla de dados (novamente, um Object representando quaisquer campos de dados) para a borda.

Aqui está um exemplo simples para criar NodeSprites para um conjunto de dados tabular, assumindo que temos uma matriz de objetos de dados:

lista de var: Array; // um array de objetos de dados que já carregamos var data: Data = new Data (); // um novo contêiner de dados para cada (var o: Objeto na lista) {data.addNode (o); }

O resultado é um Data objeto preenchido com visual DataSprite (nós ou arestas) instâncias.
Na prática, você nem sempre precisa preencher os dados visualizados manualmente. Para criar um Data objeto para visualizar um conjunto de dados carregado, você geralmente pode usar um método de conveniência. o Data.fromArray() função cria um Data instância de dados tabulares armazenados como uma matriz de objetos ActionScript, enquanto o Data.fromDataSet() método cria similarmente um Data instância de um carregado DataSet objeto.

Construindo uma Visualização

Agora vamos juntar tudo isso para começar a fazer visualizações. o Visualization classe representa uma única visualização, incluindo marcas visuais (armazenadas em um Data exemplo) e eixos. Para criar uma visualização, carregamos um conjunto de dados, adicionamos os dados a uma visualização e configuramos os operadores que determinam como visualizar os dados. Aqui está um exemplo. Examine o código primeiro e, em seguida, continue lendo para entender o que cada parte está fazendo.

pacote {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; import flash.display.Sprite; import flash.events.Event; import flash.geom.Rectangle; import flash.net.URLLoader; [SWF (largura = "800", altura = "600", backgroundColor = "# ffffff", frameRate = "30")] classe pública Tutorial estende Sprite {private var vis: Visualização; função pública Tutorial () {loadData (); } função privada loadData (): void {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {var ds: DataSet = loader.data as DataSet; visualize (Data.fromDataSet (ds));}); } função privada visualizar (data: Data): void {vis = new Visualization (data); vis.bounds = novo retângulo (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (new AxisLayout ("data.date", "data.age")); vis.operators.add (new ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (new ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Vejamos cada método.
O construtor é simples: ele apenas chama o loadData método.
A loadData método cria uma nova fonte de dados e a carrega usando os métodos descritos anteriormente. Nesse caso, o conjunto de dados é de homicídios relatados no condado de Los Angeles em 2007, armazenado em formato delimitado por tabulação. Quando o carregamento é concluído, as tuplas de dados carregadas são adicionadas a um Data instância usando o fromDataSet método de conveniência. Nos bastidores, isso resulta na criação de NodeSprites para visualizar cada item de dados. finalmente, o visualize método é chamado.
A visualize método configura a visualização. Aqui está o que está acontecendo em cada etapa:

• Parte 1: inicialização
  • Uma nova visualização é criada para os dados
  • Definimos os limites da visualização. Isso determina a área de layout.
  • Nós definimos o x e y posição de nossa visualização e adicionar a visualização à lista de exibição.
• Parte 2: Especificando Codificações Visuais
  • Usamos um layout de eixo, colocando “data” no eixo xe “idade” no eixo y. o AxisLayout o operador também configura automaticamente os eixos para a visualização. Usamos a sintaxe “data.date” para denotar as variáveis ​​de dados, uma vez que estão localizadas dentro do NodeSprite's data propriedade.
  • Adicionamos uma codificação de cores, de forma que a cor da linha de um nó represente a variável “causa” (causa da morte). Também informamos ao codificador de cores que os valores da variável "causa" representam categorias (ScaleType.CATEGORIES) O codificador de cores usará essas informações para escolher automaticamente uma paleta de cores apropriada. Como veremos em breve, você também pode fornecer sua própria paleta de cores.
  • Adicionamos uma codificação de forma, para que a forma de um objeto represente a “raça” de uma vítima.
  • Definimos as propriedades padrão - definimos a cor de preenchimento dos nós como totalmente transparente e definimos a largura da linha em 2 pixels.
  • Finalmente, chamamos o update método. Isso executa todos os operadores em ordem.

Atualizando uma visualização

Depois de criar uma visualização, podemos atualizá-la. Por exemplo, talvez gostaríamos de alterar a codificação de cores para visualizar o sexo das pessoas.
Primeiro, vamos adicionar um novo método à classe:

 função privada colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = new ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (novo Transitioner (2)). play (); }

Este método:

1. Recupera o segundo operador (o operador no índice 1) e o converte em um ColorEncoder
2. Muda o source propriedade do codificador de cor para usar a variável “data.sex”
3. Define uma nova paleta de cores (neste caso, vermelho para mulheres, azul para homens - a ordem das cores corresponde à ordem alfabética dos rótulos)
4. Anima a mudança chamando update com um Transitioner definido para uma animação de dois segundos. o vis.update método retorna o Transitioner, para que possamos chamar play no valor de retorno da atualização. (Observação: você também pode omitir o Transitioner e apenas passe o número 2 como um argumento para update. Um novo Transitioner será criado automaticamente e devolvido.)

Agora precisamos conectar o aplicativo para que possamos acionar a atualização de forma interativa. Para fazer isso, adicione o seguinte código ao construtor:

 // adicionar um rótulo clicável botão var: TextSprite = new TextSprite ("Color by Gender"); addChild (botão); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, função (evt: MouseEvent): void {colorByGender ();});

Este código:

1. Cria um novo rótulo de texto (TextSprite é uma classe auxiliar do flare.display pacote)
2. Adiciona o rótulo ao aplicativo e define sua posição
3. Conjuntos buttonMode para verdadeiro (isso faz com que um cursor de mão apareça quando você passa o mouse sobre o rótulo)
4. Adiciona um ouvinte de evento que é acionado quando o rótulo é clicado. Adicionamos uma função de retorno de chamada que chama o colorByGender método.

Para que o código acima funcione, precisaremos incluir essas instruções adicionais de importação na parte superior do arquivo:

 import flash.events.MouseEvent; import flare.animate.Transitioner; importação flare.display.TextSprite; importação flare.util.palette.ColorPalette;

Agora você deve ser capaz de compilar e executar o aplicativo. Clicar no rótulo “Cor por gênero” deve animar a mudança na codificação de cores.

Próximos Passos

Os exemplos acima mostram os fundamentos do Flash e da biblioteca Flare, mas há muitos outros recursos que ainda precisam ser cobertos. No futuro, recomendamos (a) inspecionar o Flash e o Flare API documentação para ter uma noção de todas as classes disponíveis, e (b) cavar nas demos do Flare para ver como os mesmos princípios mostrados aqui podem ser usados ​​para construir uma série de outras visualizações. Ou, melhor ainda, vasculhe o código-fonte do Flare para saber o que está acontecendo nos bastidores.
Para ajudar neste processo, aqui está uma visão geral dos subpacotes em flare.vis:

• flare.vis.axis: fornece eixos, rótulos e linhas de grade
• flare.vis.controls: manipuladores de interação para seleção, zoom e muito mais
• flare.vis.data: objetos visuais que representam elementos de dados
• flare.vis.data.render: renderizadores plugáveis ​​que desenham DataSprites
• flare.vis.events: tipos de eventos usados ​​na estrutura do flare
• flare.vis.legend: representa legendas para descrever codificações visuais
• flare.vis.operator: blocos de construção para definir visualizações
• flare.vis.palette: paletas para valores de cor, forma e tamanho
• flare.vis.util: classes de utilidades gerais

Agora você deve saber o suficiente para entender as demonstrações no flare.demos pacote. Sinta-se à vontade para brincar, modificar, copiar, colar e desenvolver as demos para entender melhor como o Flash e o Flare funcionam.

Ligações Úteis

Downloads

Ferramentas

Outros guias técnicos

Suporte

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