Flare | Visualisation des données pour le Web

Flare facilite la création de visualisations de données interactives

Pour commencer à créer vos propres visualisations, télécharger flare et suivez le didacticiel ci-dessous. Besoin d'aide? Visiter le forum d'aide (vous aurez besoin d'un SourceForge Connectez-vous pour publier).

Flare est un logiciel open source publié sous une licence BSD, ce qui signifie qu'il peut être librement déployé et modifié (et même vendu pour $$). La conception de Flare a été adaptée de son prédécesseur prefuse, une boîte à outils de visualisation pour Java.

Applications

Nombre d'annonces

• 2010.10.07: Le développement de Flare a été ouvert à la communauté et la source a été déplacée de SourceForge vers une nouvelle maison sur GitHub. éclater 2009.01.24 est toujours la dernière version officielle et (du moins pour le moment) les tutoriels et la documentation le reflètent. La version de développement sur GitHub contient désormais une meilleure prise en charge de Flash Player 10 ainsi que de nombreux autres petits correctifs et modifications.
• 2009.01.24: éclater 2009.01.24 est sorti. Il s'agit d'une version de maintenance avec un certain nombre de corrections de bogues et de mises à jour. Voir le notes de version pour plus de détails. Il s'agit de la dernière sortie prévue pour Flash Player 9 - les futures versions migreront vers la version 10.
• 2008.07.30: éclater 2008.07.29 est sorti. Il s'agit d'une version majeure présentant de nombreuses nouvelles fonctionnalités et améliorations architecturales. Voir le notes de version pour plus de détails.
• 2008.07.30: éclater 2008.08.08 est sorti. Cette version comprend une prise en charge améliorée des légendes, des transitions nommées, des corrections de bogues et une refactorisation pour réduire le couplage et consolider les classes d'utilitaires. Voir le notes de version pour plus de détails.

Tutorial

Un didacticiel pas à pas pour apprendre ActionScript et Flare.

Pour commencer

La première étape consiste à configurer vos outils de développement.

1. Configurez un environnement de développement flash fonctionnel. Il existe deux approches. Nous recommandons la première pour plus de simplicité, mais les utilisateurs plus avancés sont invités à utiliser la deuxième approche.
   • Option 1 (plus simple): Installez Adobe Flex Builder.
     • Il s'agit d'un environnement de développement complet pour les applications ActionScript / Flex. Il est disponible pour toutes les principales plates-formes (Windows, Mac, Unix). Les utilisateurs qui utilisent déjà l'EDI Eclipse peuvent également installer Flex Builder en tant que plug-in Eclipse.
     • La mise en garde à l'utilisation de Flex Builder est qu'il s'agit d'un logiciel commercial et ne fonctionnera que pendant une période d'essai limitée. Cependant, Adobe fournit des licences Flex Builder gratuites aux étudiants universitaires, aux professeurs et au personnel.
   • Option 2 (plus compliquée): Installez le SDK Flex gratuit
     • Cela installera les compilateurs ActionScript / Flex de base: mxmlc ainsi que compc. Vous pouvez ensuite configurer votre propre environnement de construction, par exemple en utilisant le make or ant construire des systèmes. Flare est emballé avec un build.xml fichier à utiliser avec le Fourmi Apache système de construction. Une fois la fourmi installée, ouvrez simplement le build.xml fichier dans un éditeur de texte, modifiez les deux premières lignes pour qu'elles pointent vers votre Flex SDK installation, puis utilisez ant pour compiler les bibliothèques. Nous utilisons les tâches fourmis d'Adobe Labs pour le développement Flex.
     • L'avantage de cette approche est que tous les logiciels sont gratuits et n'expireront pas avec vous. Cependant, vous perdez des fonctionnalités telles que la compilation automatique, la gestion de projet et la saisie semi-automatique fournies par Flex Builder.
2. Téléchargez les bibliothèques de flare prefuse.
   • Le téléchargement est un fichier zip contenant un ensemble de projets de bibliothèque ActionScript. Décompressez les fichiers dans le répertoire de votre espace de travail principal si vous utilisez Flex Builder. Au cours du didacticiel, nous les importerons dans Flex Builder et les utiliserons pour créer des visualisations!
   • Le logiciel est actuellement une version alpha, et donc quelques bugs et limitations sont à prévoir. Nous réglerons les problèmes dès que possible et le lien ci-dessus pointera toujours vers la version la plus récente.

Introduction à Flash et ActionScript 3

Flash est un excellent environnement pour les graphiques interactifs et avec l'ajout récent du langage de programmation ActionScript 3, il est devenu beaucoup plus puissant et efficace. Bien qu'une introduction complète à AS3 dépasse le cadre de ce didacticiel, voici quelques ressources que vous trouverez utiles:

• Adobe fournit un aperçu d'AS3, avec des liens vers des ressources supplémentaires.
• ActionScript 3 essentiel par Colin Moock de O'Reilly Publishing est un excellent livre pour vous aider à démarrer. Vous pouvez accédez-y en ligne ici (certaines institutions, telles que les universités, offrent un accès gratuit).
• La référence de l'API Adobe Flex est inestimable pour comprendre les différentes classes et méthodes disponibles. Nous nous concentrerons uniquement sur les classes du flash.* packages.

Ce didacticiel suppose une connaissance de base de la syntaxe et des types ActionScript, ainsi que des concepts de la programmation orientée objet.

Partie 1: DisplayObjects

Introduction

Flash modélise une scène visuelle 2D à l'aide d'un scénographie. Les objets visuels sont organisés en hiérarchie, les objets enfants étant définis dans l'espace de coordonnées du parent. Vous verrez souvent ce scénario appelé le afficher la liste dans la documentation d'Adobe et dans les livres sur la programmation Flash.
Le nœud en haut de la liste d'affichage est toujours le Stage objet. La scène a toujours un et un seul enfant. C'est ce qu'on appelle le rootet tous les éléments visuels se trouvent sous la racine. En règle générale, la racine est votre application Flash réelle. Nous y reviendrons bientôt.
Tous les éléments visuels qui peuvent être ajoutés à la liste d'affichage sont des instances du DisplayObject classe. Sous-classes de DisplayObject comprendre Bitmap (pour les images), TextField (pour les zones de texte interactives), et Video (pensez YouTube). Les exemples les plus courants, cependant, sont les Sprite ainsi que Shape Des classes. Pour référence, la plupart de ces classes se trouvent dans le flash.display package (bien que finalement vous trouverez probablement le flash.text paquet d'utilisation, aussi).
Les Sprite class est l'objet visuel général le plus utile utilisé par Flash Player. Les sprites sont des objets visuels qui contiennent à la fois du contenu de dessin et peuvent servir de conteneur pour les sous-nœuds dans la liste d'affichage (le Sprite classe sous-classe le flash.display.DisplayObjectContainer classe). En revanche, le Shape La classe peut contenir du contenu de dessin, mais ne peut pas contenir de sous-nœuds. En conséquence, les formes utilisent moins de mémoire, mais sont beaucoup moins flexibles. Pour plus de simplicité, nous nous concentrerons sur les sprites dans ce didacticiel.

Créer une nouvelle application

Commençons par créer une nouvelle application Flash. Pour ce faire, ouvrez Flex Builder et assurez-vous que vous êtes dans la perspective «Flex Development» (souvent accessible en cliquant sur l'icône «Fx» noir et blanc en haut à droite).
Dans le volet «Navigateur» à gauche, cliquez avec le bouton droit sur l'affichage et sélectionnez «Nouveau> Projet ActionScript». Dans la boîte de dialogue qui s'affiche, saisissez «Tutorial» comme nom de projet, puis cliquez sur «Terminer». Cela créera un nouveau projet pour vous.
Vous devriez maintenant voir un dossier «Tutoriel» dans le volet «Navigateur». Dans ce dossier, vous devriez voir un fichier nommé «Tutorial.as». Ceci est votre principal fichier d'application. Ouvrez-le s'il n'est pas déjà ouvert.
À l'intérieur du fichier, vous verrez l'échafaudage de base pour cette classe:

package {import flash.display.Sprite; Le didacticiel de classe publique étend Sprite {Didacticiel de fonction publique () {}}}

Notez que cette classe étend le Sprite classe. Comme il s'agit de notre classe d'application principale, lorsque nous exécutons l'application, une instance de Tutorial la classe sera automatiquement ajoutée à la liste d'affichage en tant que root (le seul et unique enfant du Stage).
Notez également qu'un constructeur a été créé automatiquement. Ce constructeur sera appelé au lancement de l'application. Pour ceux qui sont familiarisés avec les langages de programmation tels que C, C ++ ou Java, le constructeur de la classe d'application se comporte comme un main fonctionner dans ces autres langues.
Avec ce nouvel échafaudage d'application en place, nous pouvons commencer à jouer avec des objets visuels. Cependant, il y a une chose que nous voulons faire en premier. Ajoutez une nouvelle ligne directement au-dessus de la déclaration de classe ("public class Tutorial…”) Ligne qui dit:

[SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")]

Cette ligne définit les paramètres par défaut de votre application (qui est compilée et enregistrée sous forme de fichier .swf dans le répertoire «bin» de votre projet). Ci-dessus, nous définissons la taille, la couleur d'arrière-plan et la fréquence d'images cible (en images par seconde) pour notre application.

Sprites

Comme tous les DisplayObjects, Sprite prend en charge un certain nombre de propriétés visuelles dès la sortie de la boîte. Cela inclut le x, y, scaleX, scaleY, rotationet alpha Propriétés. Ceux-ci modifient respectivement la position, la taille, l'orientation et la transparence d'un sprite (et de tous ses enfants! N'oubliez pas que nous utilisons ici un graphe de scénario).
Cependant, ces valeurs ne signifient pas encore grand-chose, car les sprites ne contiennent rien par défaut. Nous allons commencer par dessiner notre propre contenu.
Chaque Sprite a également un graphics propriété. Nous pouvons l'utiliser pour dessiner des graphiques pour le SpriteL’ graphics property est une instance de flash.display.Graphics class, qui fournit un certain nombre de commandes de dessin vectoriel.
Dans l'exemple ci-dessous, nous faisons un certain nombre de choses.

• Tout d'abord, nous créons un nouveau Sprite.
• Deuxièmement, nous utilisons le sprite graphics pour dessiner un cercle avec un remplissage gris et un contour noir.
  • beginFill définit la couleur et le style de remplissage actuels. Le premier argument est la couleur, en notation hexadécimale, et le second argument est la valeur alpha, qui va de 0 pour totalement transparent à 1 pour totalement opaque.
  • lineStyle définit la couleur et le style de trait actuels. Le premier argument est la largeur de la ligne, le second argument est la couleur.
  • drawCircle dessine un cercle de rayon 10 au point 0,0 dans l'espace de coordonnées de notre sprite.
• Troisièmement, nous ajoutons le sprite en tant qu'enfant de notre application principale (un Tutorial lutin).
• Quatrièmement, nous définissons le x ainsi que y position de notre sprite.
• Cinquièmement, nous ajoutons une sortie de débogage. trace imprime une chaîne sur la console. Cette sortie n'apparaît que lors de l'exécution de l'application en mode «débogage».

Voici le code:

package {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] Le didacticiel de classe publique étend le Sprite {Didacticiel de fonction publique () {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 ("notre sprite est à:" + sprite.x + "," + sprite.y); }}}

Exécutez l'application (cliquez avec le bouton droit sur «Tutorial.as» et sélectionnez «Exécuter en tant que> Application Flex»). Vous devriez voir un cercle gris avec un contour noir dans le coin supérieur gauche, centré sur le point 50, 50. Si vous exécutez l'application en mode débogage (sélectionnez "Déboguer en tant que> Application Flex"), vous devriez également voir la chaîne "notre sprite est à: 50, 50 ”dans la console de sortie.

Sprites imbriqués

Rendons maintenant notre scène un peu plus intéressante. Commençons par déplacer notre code de génération Sprite vers une nouvelle méthode. Nous ajouterons cette méthode à notre classe:

 fonction privée 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; retourne le sprite; }

Ensuite, nous remplaçons le code dans notre constructeur. Tout d'abord, nous créons un nouveau sprite appelé conteneur que nous utiliserons pour contenir une collection de cercles. Nous le plaçons au centre de notre scène. Deuxièmement, nous utilisons une boucle pour créer un groupe de cercles. Ici, nous alignons les cercles symétriquement autour du point 0,0 du conteneur parent. Notre nouveau constructeur ressemble maintenant à ceci:

 public function Tutorial () {var container: Sprite = new Sprite (); container.x = 400; container.y = 300; this.addChild (conteneur); pour (var i: int = 0; i <10; ++ i) {var x: Number = (i / 5 <1? 1: -1) * (13 + 26 * (i% 5)); container.addChild (createCircle (x, 0)); }}

Exécutez la nouvelle version de l'application. Vous devriez voir une ligne de dix cercles au milieu de l'application.
Nous pouvons maintenant modifier le conteneur pour mettre à jour tous les cercles qu'il contient. Essayez de jouer avec la définition de différentes variables visuelles sur le sprite du conteneur. Par exemple, modifiez le x, y, scaleX, scaleY, rotationet alpha .

autres sujets

Vous pouvez faire beaucoup plus avec les options de base fournies par Flash. Malheureusement, ils dépassent un peu ce que nous avons le temps ici. Certaines choses à explorer incluent les filtres d'image (voir le flash.filters package), qui vous permettent d'ajouter des effets visuels pour afficher des objets à l'aide de leur filters propriété, et les différentes options disponibles dans le flash.display.Graphics classe, y compris les styles de remplissage et de ligne, et bien d'autres routines de dessin 2D.

Partie 2: Animations

Maintenant que nous pouvons créer des objets visuels, il est temps de commencer à leur donner un peu de vie. Flare comprend le flare.animate package pour vous faciliter la tâche. Tout d'abord, nous devons importer les bibliothèques de fusées éclairantes à utiliser dans Flex Builder.

Importation de bibliothèques

Avant de continuer, assurez-vous que les bibliothèques de flare sont chargées en tant que projets dans Flex Builder. Vous devriez avoir déjà décompressé les fichiers flare dans le répertoire principal de votre espace de travail Flex Builder. L'étape suivante consiste à les importer dans l'environnement Flex Builder:

• Assurez-vous que vous êtes dans la perspective «Flex Development».
• Cliquez avec le bouton droit sur le volet du navigateur à gauche.
• Sélectionnez «Importer…» dans le menu contextuel.
• Dans la boîte de dialogue, sélectionnez «Général> Projets existants dans l'espace de travail» et cliquez sur le bouton «Suivant».
• Utilisez les widgets «Sélectionner le répertoire racine» pour accéder au répertoire de votre espace de travail Flex Builder
• Vous devriez maintenant voir les projets de flare répertoriés dans le panneau «Projets:».
• Sélectionnez les projets «flare» et «flare.demos» puis cliquez sur le bouton «Terminer».

Vous devriez maintenant voir les projets de flare dans le volet Navigateur. Vous pouvez maintenant parcourir le code source de la bibliothèque et des démos.

Vue d'ensemble de la bibliothèque de fusées éclairantes

Voici un bref aperçu de la boîte à outils Flare. À l'intérieur de flare projet, regardez dans le dossier «src / flare». Vous trouverez un certain nombre de packages offrant différentes fonctionnalités:

• analytics: opérateurs pour le calcul des statistiques et l'analyse des données
• animate: outils de création d'animations
• data: méthodes de lecture et d'écriture des ensembles de données
• display: DisplayObject types qui étendent ceux fournis par flash.display
• flex: un wrapper pour intégrer des visualisations Flare dans les applications Flex
• physics: un moteur physique pour les effets physiques ou la mise en page dirigée par la force
• query: un processeur de requêtes pour les objets ActionScript
• scale: classes pour la gestion des échelles de données, telles que les échelles linéaires, logarithmiques et temporelles
• util: un ensemble de classes d'utilité fournissant des fonctions couramment nécessaires
• vis: les composants et les opérateurs de la visualisation des reflets

Il y a aussi flare.demos project, qui fournit un certain nombre d'exemples de création de composants Flare.

Importer une bibliothèque dans un autre projet

Pour utiliser Flare dans vos propres projets, vous devrez mettre à jour les paramètres de votre projet. Voici comment procéder:

1. Dans le volet Navigateur, cliquez avec le bouton droit de la souris sur le dossier supérieur du projet «Tutorial»
2. Cliquez sur «Propriétés» dans le menu contextuel
3. Dans la boîte de dialogue qui s'affiche, cliquez sur "Chemin de génération ActionScript" dans le panneau de gauche (il doit s'agir du troisième élément en partant du haut)
4. Cliquez sur l'onglet "Chemin de la bibliothèque" dans le panneau de droite
5. Cliquez sur le bouton "Ajouter un projet"
6. Vous devriez maintenant voir une liste de projets, y compris flare.
7. Sélectionnez «flare», puis cliquez sur «OK»

Vous avez maintenant ajouté les bibliothèques de flare à votre projet et pouvez utiliser l'une des classes qu'il fournit.
Une chose à noter à propos du compilateur Flex: par défaut, il n'inclut que les classes que vous utilisez réellement dans votre application. Ainsi, même si vous importez une très grande bibliothèque, la taille de votre fichier .swf final peut encore être assez petite. Cependant, sachez que cela peut entraîner des problèmes si vous utilisez la réflexion pour effectuer un chargement de classe dynamique dans votre application (une fonctionnalité plus avancée non couverte dans ce didacticiel).

Animation de base: interpolation, séquence et parallèle

Ok, maintenant animons! le flare.animate.Transition class est la classe de base pour toutes les animations. Sous-classes importantes de Transition sont le Tween, Sequenceet Parallel transitions. Les tweens sont utilisés pour animer les propriétés d'un seul objet. Les séquences sont utilisées pour exécuter une série d'animations dans l'ordre. Les transitions parallèles exécutent une collection de transitions simultanément. Commençons par Tween.

Propriétés des objets d'interpolation

Les bases de la classe Tween sont simples: nous prenons un objet, donnons un ensemble de valeurs de propriété que nous aimerions changer au fil du temps et spécifions la durée de ce changement. À l'aide de l'application Tutorial de la partie 1, faisons pivoter l'objet conteneur. Ajoutez la ligne suivante à la fin du constructeur de classe Tutorial:

 var tween: Tween = new Tween (conteneur, 3, {rotation: 360}); tween.play ();

Assurez-vous également que vous avez une nouvelle instruction d'importation en haut de votre classe, afin que le compilateur sache de quoi vous parlez. Ajoutez ceci à la liste des importations:

 importer flare.animate.Tween;

(REMARQUE: Parfois, Flex Builder ajoute automatiquement une instruction d'importation pour vous lorsque vous tapez un nouveau nom de classe. Sinon, une autre technique consiste à placer le curseur de texte sur l'extrémité du nouveau nom de classe et tapez «Ctrl-Space» - cela devrait créer une nouvelle importation pour vous pour la classe.)
Maintenant, exécutez votre application - les points doivent tourner en cercle sur une période de 3 secondes.
Voici ce que fait le constructeur Tween:

• Le premier argument est l'objet dont les valeurs doivent être interpolées
• Le deuxième argument est la durée de l'animation, en secondes
• Le troisième argument est une instance d'objet répertoriant les propriétés à animer et leurs valeurs cibles.
  • Les noms de propriété doivent correspondre exactement aux propriétés de l'objet d'entrée.
  • Les propriétés imbriquées sont autorisées, mais doivent être placées entre guillemets. Par exemple, {“data.profit”:50} est une entrée légale si l'objet d'entrée a une propriété nommée data qui à son tour a une propriété nommée profit.

Les play La méthode exécute ensuite l'animation. le play La méthode peut également être appelée avec un seul paramètre booléen indiquant s'il faut ou non exécuter l'animation en sens inverse.
Vous avez peut-être remarqué que l'animation de rotation présente une certaine accélération. En effet, le paramètre par défaut pour Tween instances consiste à utiliser une animation «slow-in slow-out». Vous pouvez contrôler ces comportements en utilisant Easing les fonctions. Ces fonctions prennent en entrée la progression de l'animation actuelle sous forme de fraction comprise entre 0 et 1. Elles renvoient ensuite une fraction de progression manipulée pour changer le rythme de l'animation, souvent de manière non linéaire.
Pour supprimer l'accélération (c'est-à-dire utiliser une fonction d'accélération linéaire), vous pouvez écrire: tween.easing = Easing.none. Assurez-vous simplement d'importer le flare.animate.Easing classe en haut du fichier.
N'hésitez pas à expérimenter avec d'autres fonctions d'accélération. Par exemple, les fonctions d'accélération peuvent impliquer une accélération (manipuler le début de l'animation uniquement), une accélération (manipuler la fin de l'animation uniquement) ou les deux. Par exemple, essayez ceci: tween.easing = Easing.easeOutBounce. Cela devrait faire rebondir la rotation à la fin.
Avant de continuer, essayez d'animer d'autres propriétés du conteneur, telles que la position, l'échelle ou les valeurs alpha.

Animations composites

Les Sequence ainsi que Parallel les classes vous permettent de regrouper les animations. La séquence exécute un ensemble d'animations les unes après les autres. Par exemple, essayez ceci:

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

Vous devrez également ajouter de nouvelles instructions d'importation en haut du fichier:

 importer flare.animate.Parallel; importer flare.animate.Sequence;

Cela crée quatre préadolescents: t1, t2, t3et t4. Il crée ensuite deux transitions parallèles qui s'exécutent t1 ainsi que t2 ensemble et courir t3 ainsi que t4 ensemble. Les transitions parallèles sont ensuite exécutées les unes après les autres dans une séquence. De cette façon, il est facile de créer des animations plus compliquées.
Pour des animations composites plus avancées, jetez un œil à la FlareLogo ainsi que flare.demos.Animation classes dans le flare.demos .

Animation par lots avec des transitions

Le Tween, Parallelet Sequence classes, vous pouvez effectuer un nombre illimité de transitions animées. Cependant, lorsqu'il s'agit de grandes collections d'objets (courant dans la visualisation), il peut être pénible de gérer manuellement un ensemble similaire d'interpolations. En outre, il devrait être facile d'exécuter des routines séparées pour l'encodage des propriétés visuelles telles que la disposition, la couleur, la taille, la forme et ne pas avoir à se soucier de la gestion de l'animation. Vous souhaitez peut-être animer des modifications ou peut-être une mise à jour statique. Dans tous les cas, vous devriez pouvoir réutiliser le même code pour attribuer des valeurs.
Pour répondre à ces préoccupations, Flare fournit le Transitioner classe. Les transitions simplifient le processus de création d'animations pour des collections d'objets. Vous prenez simplement un objet et définissez les propriétés souhaitées une par une. Dans les coulisses, le transitioner générera et réutilisera automatiquement les interpolations nécessaires pour modéliser l'animation complète. En outre, si l'animation n'est pas souhaitée, le transitioner peut être configuré pour définir à la place les valeurs de propriété immédiatement. En bref, le transitioner fournit une couche d'indirection pour la mise à jour des propriétés des objets - ces mises à jour peuvent être collectées puis animées ou appliquées immédiatement.
Voici un exemple simple d'utilisation d'un transitioner dans notre application de didacticiel.

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

Cet exemple anime tous les sprites dans container à un nouveau hasard y position et facteur d'échelle verticale aléatoire. Nous créons d'abord un nouveau Transitioner cela devrait créer une animation de 2 secondes. Nous bouclons ensuite sur chaque sprite enfant et utilisons le transitioner pour définir les propriétés sur Tween.
Le Transitionnaire $ L'opérateur indique que nous voulons définir une valeur cible pour l'objet d'entrée. Par défaut, soit un nouveau Tween est créé, ou un Tween est trouvé pour l'élément actuel. le $ L'opérateur retourne ensuite un objet sur lequel définir la propriété cible de l'interpolation.
De plus, les transitions peuvent être utilisées pour créer des transitions statiques (non animées). Si un transition immediate est définie sur true, elle ne créera pas de Tweens. Au lieu de cela, l'opérateur $ renverra simplement la valeur d'entrée. Cela signifie que vous pouvez créer des méthodes qui mettent à jour les valeurs à l'aide d'un transitioner, puis contrôler ultérieurement si vous souhaitez ou non mettre à jour ces valeurs. Le «mode immédiat» standard Transitioner est récupéré en utilisant le static Transitioner.DEFAULT propriété. De cette façon, vous n'avez pas besoin d'allouer un nouveau Transitioner lors de l'exécution de mises à jour immédiates.
Les transitions sont largement utilisés tout au long du flare.vis package, permettant aux concepteurs de visualisation de contrôler quelles mises à jour doivent être animées et comment.

Partie 3: Visualisations

Chargement de données

La représentation des données de base pour Flare utilise simplement les types de données Flash intégrés: Object ainsi que Array. Par exemple, une table de données peut simplement être représentée comme un tableau d'objets, dont chaque objet contient les noms et les valeurs de chaque champ de données. Bien que des représentations plus efficaces soient possibles, cette approche offre la plus grande flexibilité tout en tirant parti des conventions de développement Flash existantes.
Pour charger des données dans le lecteur Flash, il existe plusieurs approches. Une approche simple consiste à intégrer vos données dans l'application elle-même. De cette façon, les données sont téléchargées avec l'application, ce qui convient parfaitement aux ensembles de données statiques. Par exemple, vous pouvez utiliser la notation objet d'ActionScript pour définir le jeu de données directement en tant que variable:

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

Cependant, dans de nombreux cas, vous souhaiterez charger vos données de manière dynamique, soit à partir d'une page Web (vous pouvez utiliser JavaScript dans le navigateur pour transmettre des valeurs à Flash), soit à partir d'un serveur sur Internet. Il existe de nombreuses approches pour ce faire et vous devez choisir celle qui convient le mieux à votre application particulière. Par exemple, ActionScript fournit des types de données et une syntaxe supplémentaires pour travailler avec XML données utilisant ECMAScript pour XML (E4X).
Flare fournit également des utilitaires pour charger des ensembles de données externes. Il prend en charge le chargement de données à partir de n'importe quel serveur sur Internet et la conversion de ces données en objets ActionScript internes. Les formats de fichier actuellement pris en charge sont le texte délimité par des tabulations («tabulation», un format de fichier standard pour l'exportation de données à partir d'outils tels qu'Excel), Notation d'objet JavaScript («Json», un format de données courant pour les applications Web), et GraphML ("Graphml", un XML format de représentation des réseaux avec des nœuds et des arêtes).
Les données distantes sont chargées par flare à l'aide du flare.data.DataSource classe. Voici un exemple d'utilisation pour charger un fichier de données délimité par des tabulations:

var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); chargeur var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// fonction pour gérer les données une fois le chargement terminé var ds: DataSet = loader.data as DataSet; // maintenant faire quelque chose avec les données ...} );

Les DataSource Le constructeur a deux arguments obligatoires: l'url de l'ensemble de données et une chaîne indiquant le format de fichier. À l'heure actuelle, les formats pris en charge sont «tab» (délimité par des tabulations), «json» (JavaScript Object Notation) et «graphml» (GraphML).
Pour les ensembles de données dont le schéma (les noms et les types de données des champs) peut ne pas être clair, il existe également un troisième argument de constructeur facultatif qui prend un DataSchema type. Voir le flare.data.DataSchema ainsi que flare.data.DataField cours pour plus. Le schéma peut être utile pour s'assurer que les valeurs de données sont correctement nommées (par exemple, pour un fichier délimité par des tabulations sans une ligne d'en-tête) et converties dans les types de données appropriés (par exemple, pour les données JSON dans lesquelles les valeurs numériques ont été entourées de guillemets).
Pour charger réellement les données, la méthode de chargement DataSource est appelée, renvoyant un flash.net.URLLoader exemple. Le chargeur peut être utilisé pour suivre la progression du téléchargement (par exemple, si vous souhaitez fournir une barre de progression) et fournit un événement de notification lorsque le téléchargement est terminé. Dans l'exemple ci-dessus, nous ajoutons un écouteur d'événement pour être notifié lorsque le téléchargement est terminé. le DataSource analysera automatiquement les données d'entrée, les mappera en objets ActionScript et stockera les résultats dans un flare.data.DataSet objet. le DataSet La classe peut représenter à la fois des données de table et de réseau (nœud / bord).

Créer et gérer des objets visuels

Nous aimerions maintenant visualiser un ensemble de données. Pour ce faire, nous mappons les enregistrements de données individuels en éléments visuels. Flare fournit un ensemble d'objets visuels pour représenter les données. Voici un aperçu des classes de base fournies par le flare.vis.data paquet.

• DataSprite: Classe de base pour les sprites qui représentent visuellement des données. DataSprite est une sous-classe du lecteur Flash Sprite classe. DataSprite comprend un data propriété dans laquelle le tuple de données (un objet ActionScript) est stocké et fournit également des variables visuelles supplémentaires au-delà de celles prises en charge par les sprites de base, y compris les champs de couleur, de forme et de taille, et la prise en charge de la définition de positions en coordonnées polaires.
• NodeSprite: DataSprite instance représentant un nœud. Il s'agit du type par défaut utilisé pour visualiser les données. NodeSprite les instances peuvent être connectées au sein d'un réseau ou d'une arborescence en EdgeSprite les instances.
• EdgeSprite: DataSprite instance représentant une arête. Une EdgeSprite relie deux NodeSprites. Les nœuds sont accessibles via le source ainsi que target . EdgeSprites sont utilisés pour créer des graphiques et des arbres, ainsi que pour représenter des lignes, comme dans les graphiques de séries chronologiques.

En règle générale, NodeSprites et EdgeSprites sont créés et stockés dans le flare.vis.data.Data class, qui gère tous les éléments visuels pour une seule visualisation. le Data La classe fournit des méthodes pour créer de nouveaux objets visuels pour les tuples de données et pour représenter une structure de graphique.
Les Data La classe fournit également des méthodes pour parcourir et mettre à jour les éléments de données contenus. le nodes ainsi que edges Les propriétés renvoient des listes des nœuds et des arêtes contenus dans les données. Chacune de ces listes comprend un visit méthode qui permet de passer une fonction qui sera ensuite appelée avec chaque nœud ou arête. Également setProperty ainsi que setProperties Les méthodes vous permettent de définir des valeurs de propriété pour tous les nœuds ou arêtes à la fois. Ces méthodes prennent éventuellement un Transitioner comme argument, vous pouvez donc animer la mise à jour de la propriété.
Par exemple, le code suivant entraîne une animation d'une seconde dans laquelle la couleur de ligne de tous les nœuds est définie sur bleu. (Notez que la notation hexadécimale pour DataSprite les valeurs de couleur incluent les canaux alpha ainsi que les canaux rouge, vert et bleu).

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

Les listes de nœuds et d'arêtes prennent également en charge les valeurs de propriété par défaut, à l'aide de la setDefault, setDefaults, removeDefaultet clearDefaults méthodes. Les valeurs par défaut seront définies sur un nœud ou une arête nouvellement créé à l'aide de la classe Data ' addNode or addEdgeFor méthodes.
Les Tree class est une sous-classe de Data, spécialisé pour représenter un arbre plutôt qu'un graphe général. le Data classe prend en charge la création automatique d'un Tree instance en calculant des arbres couvrant un graphe général. Un certain nombre de méthodes de création d'arbre couvrant, y compris les algorithmes de largeur d'abord, de profondeur d'abord et d'arbre couvrant minimum, peuvent être transmises en tant que paramètre. Ces calculs sont effectués à l'aide du flare.analytics.graph.SpanningTree classe.
Pour créer réellement des objets de nœuds et d'arêtes, nous utilisons le addNode ainsi que addEdgeFor méthodes.

• addNode prend un tuple de données d'entrée (un Object) et crée un nouveau NodeSprite pour visualiser ces données.
• addEdgeFor prend deux existants NodeSprites et ajoute un EdgeSprite les reliant. La méthode exclut également éventuellement un tuple de données (encore une fois, un Object représentant tous les champs de données) pour le bord.

Voici un exemple simple de création NodeSprites pour un ensemble de données tabulaire, en supposant que nous avons un tableau d'objets de données:

var list: Array; // un tableau d'objets de données que nous avons déjà chargé var data: Data = new Data (); // un nouveau conteneur de données pour chaque (var o: Object in list) {data.addNode (o); }

Le résultat est un Data objet rempli de visuel DataSprite (nœuds ou arêtes) instances.
En pratique, vous n'avez pas toujours besoin de renseigner manuellement les données visualisées. Créer un Data objet pour visualiser un ensemble de données chargé, vous pouvez souvent utiliser une méthode pratique à la place. le Data.fromArray() fonction crée un Data instance de données tabulaires stockées sous forme de tableau d'objets ActionScript, tandis que Data.fromDataSet() méthode crée de même un Data instance d'une instance chargée DataSet objet.

Construire une visualisation

Maintenant, mettons tout cela ensemble pour commencer à faire des visualisations. le Visualization classe représente une visualisation unique, y compris des marques visuelles (stockées dans un Data instance) et les axes. Pour créer une visualisation, nous chargeons un ensemble de données, ajoutons les données à une visualisation et configurons des opérateurs qui déterminent comment visualiser les données. Voici un exemple. Regardez d'abord le code, puis lisez la suite pour comprendre ce que fait chaque partie.

package {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 (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] Le didacticiel de classe publique étend Sprite {private var vis: Visualization; public function Tutorial () {loadData (); } fonction privée loadData (): void {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); chargeur var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, fonction (evt: Event): void {var ds: DataSet = loader.data as DataSet; visualize (Data.fromDataSet (ds));}); } fonction privée visualiser (données: données): void {vis = nouvelle visualisation (données); vis.bounds = nouveau rectangle (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (nouveau AxisLayout ("data.date", "data.age")); vis.operators.add (new ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (nouveau ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Regardons chaque méthode.
Le constructeur est simple: il appelle simplement le loadData méthode.
Les loadData crée une nouvelle source de données et la charge à l'aide des méthodes décrites précédemment. Dans ce cas, l'ensemble de données est des homicides déclarés dans le comté de Los Angeles en 2007, stockés dans un format délimité par des tabulations. Lorsque le chargement est terminé, les tuples de données chargés sont ajoutés à un Data instance utilisant le fromDataSet méthode de commodité. Sous le capot, cela se traduit par la création de NodeSprites pour visualiser chaque élément de données. Finalement, le visualize méthode est appelée.
Les visualize met en place la visualisation. Voici ce qui se passe à chaque étape:

• Partie 1: Initialisation
  • Une nouvelle visualisation est créée pour les données
  • Nous fixons les limites de la visualisation. Cela détermine la zone de mise en page.
  • Nous définissons le x ainsi que y position de notre visualisation et l'ajout de la visualisation à la liste d'affichage.
• Partie 2: Spécification des codages visuels
  • Nous utilisons une disposition d'axe, plaçant «date» sur l'axe des x et «âge» sur l'axe des y. le AxisLayout L'opérateur configure également automatiquement les axes pour la visualisation. Nous utilisons la syntaxe «data.date» pour désigner les variables de données, car elles sont situées dans le NodeSprite's data propriété.
  • Nous ajoutons un codage de couleur, de sorte que la couleur de ligne d'un nœud représente la variable «cause» (cause du décès). Nous indiquons également à l'encodeur de couleur que les valeurs de la variable «cause» représentent des catégories (ScaleType.CATEGORIES). L'encodeur de couleur utilisera ces informations pour sélectionner automatiquement une palette de couleurs appropriée. Comme nous le verrons sous peu, vous pouvez également fournir votre propre palette de couleurs.
  • Nous ajoutons un encodage de forme, de sorte que la forme d'un objet représente la «race» d'une victime.
  • Nous définissons les propriétés par défaut - nous définissons la couleur de remplissage des nœuds sur totalement transparent et définissons la largeur de la ligne sur 2 pixels.
  • Enfin, nous appelons update méthode. Cela exécute tous les opérateurs dans l'ordre.

Mettre à jour une visualisation

Une fois qu'une visualisation a été créée, nous souhaitons peut-être la mettre à jour. Par exemple, nous aimerions peut-être changer le codage des couleurs pour visualiser plutôt le sexe des gens.
Tout d'abord, ajoutons une nouvelle méthode à la classe:

 fonction privée colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = nouveau ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (nouveau Transitioner (2)). play (); }

Cette méthode:

1. Récupère le deuxième opérateur (l'opérateur à l'index 1) et le transforme en un ColorEncoder
2. Modifie le source propriété du codeur de couleur pour utiliser la variable «data.sex»
3. Définit une nouvelle palette de couleurs (dans ce cas, rouge pour les femmes, bleu pour les hommes - l'ordre des couleurs correspond à l'ordre alphabétique des étiquettes)
4. Anime le changement en appelant update avec un Transitioner réglé pour une animation de deux secondes. le vis.update méthode renvoie la Transitioner, nous pouvons donc appeler play sur la valeur de retour de la mise à jour. (Remarque: vous pouvez également omettre le Transitioner et passez simplement le nombre 2 comme argument à update. Un nouveau Transitioner sera créé automatiquement et renvoyé.)

Nous devons maintenant câbler l'application afin de pouvoir déclencher la mise à jour de manière interactive. Pour ce faire, ajoutez le code suivant au constructeur:

 // ajouter une étiquette cliquable var button: TextSprite = new TextSprite ("Color by Gender"); addChild (bouton); button.x = 710; bouton.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): void {colorByGender ();});

Ce code:

1. Crée une nouvelle étiquette de texte (TextSprite est une classe d'assistance du flare.display paquet)
2. Ajoute l'étiquette à l'application et définit sa position
3. Sets buttonMode à true (cela fait apparaître un curseur de main lorsque vous passez la souris sur l'étiquette)
4. Ajoute un écouteur d'événements qui est déclenché lorsque l'utilisateur clique sur l'étiquette. Nous ajoutons une fonction de rappel qui appelle le colorByGender méthode.

Pour que le code ci-dessus fonctionne, nous devons inclure ces instructions d'importation supplémentaires en haut du fichier:

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

Vous devriez maintenant pouvoir compiler et exécuter l'application. Cliquer sur l'étiquette «Couleur par sexe» devrait animer le changement de codage des couleurs.

Prochaines étapes

Les exemples ci-dessus montrent les bases de Flash et de la bibliothèque Flare, mais de nombreuses autres fonctionnalités doivent encore être couvertes. À l'avenir, nous vous recommandons (a) d'inspecter à la fois le flash et le flare API documentation pour avoir une idée de toutes les classes disponibles, et (b) fouiller dans les démos Flare pour voir comment les mêmes principes présentés ici peuvent être utilisés pour construire un certain nombre d'autres visualisations. Ou, mieux encore, fouillez dans le code source de Flare pour savoir ce qui se passe sous le capot.
Pour vous aider dans ce processus, voici un aperçu général des sous-packages de flare.vis:

• flare.vis.axis: fournit des axes, des étiquettes et des quadrillages
• flare.vis.controls: gestionnaires d'interaction pour la sélection, le zoom, etc.
• flare.vis.data: objets visuels qui représentent des éléments de données
• flare.vis.data.render: des moteurs de rendu enfichables qui dessinent DataSprites
• flare.vis.events: types d'événements utilisés dans le cadre de flare
• flare.vis.legend: représente des légendes pour décrire les encodages visuels
• flare.vis.operator: blocs de construction pour définir des visualisations
• flare.vis.palette: palettes pour les valeurs de couleur, de forme et de taille
• flare.vis.util: classes d'utilité générale

Vous devriez maintenant en savoir suffisamment pour comprendre les démos du flare.demos paquet. N'hésitez pas à jouer, à modifier, à copier, à coller et à vous appuyer sur les démos pour mieux comprendre le fonctionnement de Flash et Flare.

Cardan

Télécharger

Outils

Autres guides techniques

Assistance

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