Flare | Datavisualisering til nettet

Genudgivet af Platon

Abonnenter: 0

Flare gør det nemt at skabe interaktive datavisualiseringer

For at begynde at lave dine egne visualiseringer, download flare og gennemfør selvstudiet nedenfor. Har du brug for mere hjælp? Besøg hjælpe forum (du skal bruge en SourceForge log ind for at skrive).

Flare er open source-software udgivet under en BSD-licens, hvilket betyder, at den frit kan implementeres og modificeres (og endda sælges for $$). Flares design blev tilpasset fra sin forgænger, et visualiseringsværktøj til Java.

Applikationer

Meddelelser

2010.10.07: Flare-udvikling er blevet åbnet for fællesskabet, og kilden er flyttet fra SourceForge til et nyt hjem på GitHub. blusse 2009.01.24 er stadig sidste officielle udgivelse, og (i hvert fald for nu) tutorials og dokumentation afspejler det. Udviklingsversionen på GitHub indeholder nu bedre understøttelse af Flash Player 10 samt mange andre små rettelser og ændringer.
2009.01.24: flare 2009.01.24 er blevet frigivet. Dette er en vedligeholdelsesudgivelse med en række fejlrettelser og opdateringer. Se den udgivelses noter for flere detaljer. Dette er den sidste planlagte udgivelse til Flash Player 9 - fremtidige versioner vil migrere til version 10.
2008.07.30: flare 2008.07.29 er blevet frigivet. Dette er en stor udgivelse, der introducerer mange nye funktioner og arkitektoniske forbedringer. Se den udgivelses noter for flere detaljer.
2008.07.30: flare 2008.08.08 er blevet frigivet. Denne udgivelse inkluderer forbedret forklaringsunderstøttelse, navngivne overgange, fejlrettelser og en refactoring for at reducere kobling og konsolidere hjælpeklasser. Se den udgivelses noter for flere detaljer.

tutorial

En trin-for-trin tutorial til at lære ActionScript og Flare.

Kom godt i gang

Det første skridt er at få sat dine udviklingsværktøjer op.

Konfigurer et fungerende flash-udviklingsmiljø. Der er to tilgange. Vi anbefaler den første for enkelhedens skyld, men mere avancerede brugere er velkomne til at bruge den anden tilgang.
- Mulighed 1 (enklere): Installer Adobe Flex Builder.
  - Dette er et komplet udviklingsmiljø for ActionScript/Flex-applikationer. Den er tilgængelig til alle de større platforme (Windows, Mac, Unix). Brugere, der allerede bruger Eclipse IDE, kan også installere Flex Builder som et Eclipse plug-in.
  - Forbeholdet ved brug af Flex Builder er, at det er kommerciel software og kun vil virke i en begrænset prøveperiode. Adobe giver dog gratis Flex Builder-licenser til universitetsstuderende, fakulteter og ansatte.
- Mulighed 2 (mere kompliceret): Installer det gratis Flex SDK
  - Dette vil installere de grundlæggende ActionScript/Flex-kompilere: mxmlc , compc. Du kan derefter konfigurere dit eget byggemiljø, for eksempel ved hjælp af make or ant bygge systemer. Flare er pakket med en build.xml fil til brug med Apache Ant bygge system. Når myren er installeret, skal du blot åbne build.xml fil i en teksteditor, skal du ændre de første par linjer for at pege på din Flex SDK installation, og brug derefter ant at sammensætte bibliotekerne. Vi gør brug af Adobe Labs' myreopgaver til Flex-udvikling.
  - Fordelen ved denne tilgang er, at al softwaren er gratis og ikke udløber på dig. Du går dog glip af funktioner som automatisk kompilering, projektstyring og autofuldførelse leveret af Flex Builder.
Download prefuse flare-bibliotekerne.
- Downloaden er en zip-fil, der indeholder et sæt ActionScript-biblioteksprojekter. Pak filerne ud i dit primære arbejdsområdebibliotek, hvis du bruger Flex Builder. I løbet af selvstudiet vil vi importere dem til Flex Builder og bruge dem til at bygge visualiseringer!
- Softwaren er i øjeblikket en alfaversion, og derfor må der forventes nogle fejl og begrænsninger. Vi løser problemer så snart vi kan, og linket ovenfor vil altid pege på den seneste version.

Introduktion til Flash og ActionScript 3

Flash er et fantastisk miljø til interaktiv grafik, og med den nylige tilføjelse af ActionScript 3-programmeringssproget blev det bare meget mere kraftfuldt og effektivt. Selvom en komplet introduktion til AS3 ligger uden for denne tutorials omfang, er her nogle ressourcer, du vil finde nyttige:

Adobe giver en oversigt over AS3 med links til yderligere ressourcer.
Essential ActionScript 3 af Colin Moock fra O'Reilly publishing er en fantastisk bog, der hjælper dig i gang. Du kan få adgang til det online her (nogle institutioner, såsom universiteter, giver gratis adgang).
Adobe Flex API-referencen er uvurderlig for at forstå de forskellige klasser og metoder, der er tilgængelige. Vi vil kun fokusere på klasserne i flash.* pakker.

Dette selvstudie forudsætter et grundlæggende kendskab til ActionScript-syntaks og -typer samt koncepter for objektorienteret programmering.

Del 1: DisplayObjects

Introduktion

Flash modellerer en visuel 2D-scene ved hjælp af en scenegraf. Visuelle objekter er organiseret i et hierarki, med underordnede objekter defineret i det overordnede koordinatrum. Du vil ofte se denne scenegraf kaldet vise liste i både Adobes dokumentation og i bøger om Flash-programmering.
Noden øverst på visningslisten er altid Stage objekt. Scenen har altid ét og kun ét barn. Dette kaldes root, og alle visuelle elementer er under roden. Typisk er roden din faktiske Flash-applikation. Vi vender snart tilbage til dette.
Alle visuelle elementer, der kan tilføjes til visningslisten, er forekomster af DisplayObject klasse. Underklasser af DisplayObject omfatter Bitmap (til billeder), TextField (til interaktive tekstområder), og Video (tænk YouTube). De mest almindelige tilfælde er dog Sprite , Shape klasser. Til reference kan de fleste af disse klasser findes i flash.display pakke (selvom til sidst vil du sandsynligvis finde flash.text også brugspakke).
Sprite klasse er det mest nyttige, generelle visuelle objekt, der bruges af Flash Player. Sprites er visuelle objekter, der både indeholder tegningsindhold og kan tjene som en beholder for undernoder i visningslisten (den Sprite klasse underklasser flash.display.DisplayObjectContainer klasse). I modsætning hertil Shape klasse kan indeholde tegningsindhold, men kan ikke indeholde undernoder. Som et resultat bruger figurer mindre hukommelse, men er meget mindre fleksible. For nemheds skyld fokuserer vi på Sprites i denne tutorial.

Opret en ny applikation

Lad os først oprette en ny Flash-applikation. For at gøre dette skal du åbne Flex Builder og sikre dig, at du er i "Flex Development"-perspektivet (ofte nås ved at klikke på det sort-hvide "Fx"-ikon øverst til højre).
I "Navigator"-ruden til venstre skal du højreklikke på skærmen og vælge "Ny > ActionScript-projekt". Skriv "Tutorial" som projektnavn i den resulterende dialog, og klik derefter på "Udfør". Dette vil oprette et nyt projekt til dig.
Du skulle nu se en "Tutorial"-mappe i "Navigator"-ruden. I denne mappe bør du se en fil med navnet "Tutorial.as". Dette er din hovedapplikationsfil. Åbn den, hvis den ikke allerede er åben.
Inde i filen kan du se de grundlæggende stilladser for denne klasse:

pakke { import flash.display.Sprite; public class Tutorial udvider Sprite { public function Tutorial() { } } }

Bemærk, at denne klasse udvider Sprite klasse. Fordi dette er vores vigtigste applikationsklasse, når vi kører applikationen en forekomst af Tutorial klasse vil automatisk blive tilføjet til visningslisten som sin root (det eneste barn af Stage).
Bemærk også, at der automatisk er oprettet en konstruktør. Denne konstruktør vil blive kaldt, når applikationen starter. For dem, der er fortrolige med programmeringssprog såsom C, C++ eller Java, fungerer konstruktøren for applikationsklassen meget som en main fungerer på de andre sprog.
Med dette nye applikationsstillads på plads kan vi begynde at lege med visuelle objekter. Der er dog én ting, vi vil gøre først. Tilføj en ny linje direkte over klasseerklæringen (”public class Tutorial…”) linje, der siger:

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

Denne linje definerer standardindstillinger for dit program (som er kompileret og gemt som en .swf-fil i dit projekts "bin"-mappe). Ovenfor indstiller vi størrelsen, baggrundsfarven og målbilledhastigheden (i billeder pr. sekund) for vores applikation.

sprites

Ligesom alle DisplayObjects, Sprite understøtter en række visuelle egenskaber lige ud af kassen. Dette inkluderer x, y, scaleX, scaleY, rotationog alpha ejendomme. Disse ændrer henholdsvis positionen, størrelsen, orienteringen og gennemsigtigheden af en sprite (og alle dens børn! Husk, vi bruger en scenegraf her).
Disse værdier betyder dog ikke meget endnu, da sprites ikke indeholder noget som standard. Vi starter med at tegne vores eget indhold.
Hver Sprite har også en graphics ejendom. Vi kan bruge dette til at tegne grafik til Sprite. Det graphics ejendom er et eksempel på flash.display.Graphics klasse, som giver en række vektortegningskommandoer.
I eksemplet nedenfor gør vi en række ting.

Først opretter vi en ny Sprite.
For det andet bruger vi sprite's graphics at tegne en cirkel med gråt fyld og sort omrids.
- beginFill indstiller den aktuelle fyldfarve og stil. Det første argument er farven, i hex-notation, og det andet argument er alfaværdien, som spænder fra 0 for fuldt transparent til 1 for helt uigennemsigtig.
- lineStyle indstiller den aktuelle stregfarve og stil. Det første argument er linjebredden, det andet argument er farven.
- drawCircle tegner en cirkel med radius 10 ved punktet 0,0 i koordinatrummet for vores sprite.
For det tredje tilføjer vi spriten som et barn af vores hovedapplikation (a Tutorial sprite).
For det fjerde indstiller vi x , y position af vores sprite.
For det femte tilføjer vi noget fejlfindingsoutput. trace udskriver en streng til konsollen. Dette output vises kun, når appen kører i "fejlretnings"-tilstand.

Her er koden:

pakke { import flash.display.Sprite; [SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")] public class Tutorial udvider 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("vores sprite er på: "+sprite.x+", "+sprite.y); } } }

Kør programmet (højreklik på "Tutorial.as" og vælg "Kør som > Flex-applikation"). Du bør se en grå cirkel med sort omrids i øverste venstre hjørne, centreret om punktet 50, 50. Hvis du kører programmet i fejlretningstilstand (vælg "Debug As > Flex Application"), bør du også se strengen "vores sprite er på: 50, 50” i udgangskonsollen.

Indlejrede Sprites

Lad os nu gøre vores scene lidt mere interessant. Lad os starte med at flytte vores Sprite-genereringskode til en ny metode. Vi tilføjer denne metode til vores klasse:

 privat funktion 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; returnere sprite; }

Dernæst erstatter vi koden i vores konstruktør. Først opretter vi en ny sprite kaldet container, som vi vil bruge til at holde en samling af cirkler. Vi placerer det i midten af vores scene. For det andet bruger vi en løkke til at skabe en masse cirkler. Her opretter vi cirklerne symmetrisk omkring 0,0-punktet på den overordnede container. Vores nye konstruktør ser nu sådan ud:

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

Kør den nye version af programmet. Du bør se en linje med ti cirkler i midten af applikationen.
Vi kan nu ændre beholderen for at opdatere alle cirklerne i den. Prøv at lege med at indstille forskellige visuelle variabler på containerspriten. Rediger f.eks x, y, scaleX, scaleY, rotationog alpha egenskaber.

Andre emner

Der er meget mere, du kan gøre med de grundlæggende muligheder, som Flash giver. Desværre er de lidt ud over, hvad vi har tid til her. Nogle ting at udforske inkluderer billedfiltre (se flash.filters pakke), som giver dig mulighed for at tilføje visuelle effekter til at vise objekter ved hjælp af deres filters ejendom, og de forskellige muligheder, der er tilgængelige i flash.display.Graphics klasse, inklusive fyld- og stregstile og mange flere 2D-tegningsrutiner.

Del 2: Animationer

Nu hvor vi kan skabe visuelle objekter, er det tid til at begynde at give dem noget liv. Flare inkluderer flare.animate pakke for at gøre dette nemt. Først skal vi importere flare-bibliotekerne til brug i Flex Builder.

Import af biblioteker

Før du fortsætter, skal du sørge for at have flare-bibliotekerne indlæst som projekter i Flex Builder. Du burde allerede have pakket flare-filerne ud i dit hovedbibliotek i Flex Builder-arbejdsområdet. Det næste trin er at importere dem til Flex Builder-miljøet:

Sørg for, at du er i "Flex Development"-perspektivet.
Højreklik på navigatorruden til venstre.
Vælg "Importer..." i pop op-menuen.
I dialogen skal du vælge "Generelt > Eksisterende projekter i arbejdsområdet" og klikke på knappen "Næste".
Brug "Vælg rodmappe"-widgets til at navigere til din Flex Builder-arbejdsområdemappe
Du bør nu se flare-projekterne opført i panelet "Projects:".
Vælg projekterne "flare" og "flare.demos", og klik derefter på knappen "Udfør".

Du skulle nu se flare-projekterne i Navigator-ruden. Du kan nu gennemse kildekoden for både biblioteket og demoerne.

Oversigt over flarebiblioteket

Her er et hurtigt overblik over flare-værktøjssættet. Inde i flare projekt, se inde i mappen "src/flare". Du finder en række pakker med forskellige funktioner:

analytics: operatører til beregning af statistik og analyse af data
animate: værktøjer til at lave animationer
data: metoder til at læse og skrive datasæt
display: DisplayObject typer, der udvider dem, der leveres af flash.display
flex: en indpakning til indlejring af Flare-visualiseringer i Flex-applikationer
physics: en fysikmotor til fysiske effekter eller kraftstyret layout
query: en forespørgselsprocessor til ActionScript-objekter
scale: klasser til håndtering af dataskalaer, såsom lineære, log- og tidsskalaer
util: et sæt hjælpeklasser, der giver almindeligt nødvendige funktioner
vis: flare visualiseringskomponenter og operatører

Der er også den flare.demos projekt, som giver en række eksempler på, hvordan man laver Flare-komponenter.

Import af et bibliotek i et andet projekt

For at gøre brug af flare i dine egne projekter, skal du opdatere dine projektindstillinger. Sådan gør du det:

Højreklik på den øverste mappe i "Tutorial"-projektet i Navigator-ruden
Klik på "Egenskaber" i kontekstmenuen
I den resulterende dialog skal du klikke på "ActionScript Build Path" i venstre panel (det skal være det 3. element fra toppen)
Klik på fanen "Biblioteksti" i højre panel
Klik på knappen "Tilføj projekt".
Du bør nu se en liste over projekter, inklusive flare.
Vælg "flare" og klik derefter på "OK"

Du har nu tilføjet flare-bibliotekerne til dit projekt og kan bruge alle de klasser, det giver.
En ting at bemærke om Flex-compileren - som standard inkluderer den kun de klasser, som du faktisk bruger i din applikation. Så selvom du importerer et meget stort bibliotek, kan størrelsen på din endelige .swf-fil stadig være ret lille. Vær dog opmærksom på, at dette kan forårsage problemer, hvis du bruger refleksion til at udføre dynamisk klasseindlæsning i din applikation (en mere avanceret funktion, der ikke er dækket af denne vejledning).

Grundlæggende animation: Tween, Sequence og Parallel

Ok, lad os nu animere! Det flare.animate.Transition klasse er basisklassen for alle animationer. Vigtige underklasser af Transition er de Tween, Sequenceog Parallel overgange. Tweens bruges til at animere egenskaber for et enkelt objekt. Sekvenser bruges til at køre en række animationer i rækkefølge. Parallelle overgange kører en samling af overgange samtidigt. Lad os starte med Tween.

Tweening-objektegenskaber

Det grundlæggende i Tween-klassen er enkle: Vi tager et objekt, giver et sæt egenskabsværdier, som vi gerne vil ændre over tid, og angiver varigheden af denne ændring. Lad os rotere beholderobjektet ved at bruge Tutorial-applikationen fra del 1. Tilføj følgende linje til slutningen af Tutorial-klassekonstruktøren:

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

Sørg også for, at du har en ny importerklæring øverst i din klasse, så compileren ved, hvad du taler om. Tilføj dette til listen over importer:

 import flare.animate.Tween;

(BEMÆRK: nogle gange tilføjer Flex Builder automatisk en importerklæring til dig, mens du indtaster et nyt klassenavn. Hvis ikke, er en anden teknik at placere tekstmarkøren på enden af det nye klassenavn og skriv "Ctrl-Space" - dette skulle skabe en ny import til dig for klassen.)
Kør nu din applikation – punkterne skal rotere i en cirkel over en periode på 3 sekunder.
Her er hvad Tween-konstruktøren laver:

Det første argument er det objekt, hvis værdier skal tweenes
Det andet argument er længden af animationen i sekunder
Det tredje argument er en objektforekomst, der viser egenskaberne, der skal animeres, og deres målværdier.
- Egenskabsnavnene skal svare nøjagtigt til egenskaberne for inputobjektet.
- Indlejrede ejendomme er tilladt, men skal angives i anførselstegn. For eksempel, {“data.profit”:50} er et lovligt input, hvis inputobjektet har en egenskab ved navn data, som igen har en egenskab ved navn profit.

play metoden kører derefter animationen. Det play metode kan også kaldes med en enkelt boolsk parameter, der angiver, om animationen skal køres omvendt eller ej.
Du har måske bemærket, at rotationsanimationen udviser en vis acceleration. Dette skyldes, at standardindstillingen for Tween instanser er at bruge "slow-in slow-out" animation. Du kan kontrollere denne adfærd vha Easing funktioner. Disse funktioner tager som input det aktuelle animationsfremskridt som en brøkdel mellem 0 og 1. De returnerer derefter en manipuleret fremskridtsbrøkdel for at ændre tempoet i animationen, ofte på en ikke-lineær måde.
For at fjerne lempelse (dvs. brug en lineær lempelsesfunktion) kan du skrive: tween.easing = Easing.none. Bare sørg for at importere flare.animate.Easing klasse øverst i filen.
Eksperimenter gerne med andre lempelsesfunktioner. For eksempel kan easing-funktioner involvere easing ind (kun manipulerer starten af animationen), easing ud (manipulerer kun slutningen af animationen) eller begge dele. Prøv for eksempel dette: tween.easing = Easing.easeOutBounce. Dette skulle få rotationen til at hoppe i slutningen.
Inden du går videre, kan du prøve at animere andre egenskaber for beholderen, såsom position, skala eller alfaværdier.

Sammensatte animationer

Sequence , Parallel klasser giver dig mulighed for at gruppere animationer sammen. Sequence kører et sæt animationer efter hinanden. Prøv for eksempel dette:

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

Du skal også tilføje nogle nye importerklæringer øverst i filen:

 import flare.animate.Parallel; import flare.animate.Sequence;

Dette skaber fire tweens: t1, t2, t3og t4. Det skaber så to parallelle overgange, der løber t1 , t2 sammen og løb t3 , t4 sammen. De parallelle overgange køres derefter den ene efter den anden i en sekvens. På denne måde er det nemt at bygge mere komplicerede animationer.
For mere avancerede sammensatte animationer, tag et kig på FlareLogo , flare.demos.Animation klasser i flare.demos projekt.

Batchanimation med overgange

Brug af Tween, Parallelog Sequence klasser, kan du lave et vilkårligt antal animerede overgange. Men når man beskæftiger sig med store samlinger af objekter (almindelig i visualisering) kan det være en smerte manuelt at håndtere et tilsvarende stort sæt tweens. Desuden skal det være nemt at køre separate rutiner til kodning af visuelle egenskaber som layout, farve, størrelse, form og ikke skulle bekymre dig om håndtering af animation. Måske vil du animere ændringer, eller måske vil du have en statisk opdatering. Uanset hvad, bør du være i stand til at genbruge den samme kode til at tildele værdier.
For at imødekomme disse bekymringer leverer Flare Transitioner klasse. Transitionere forenkler processen med at skabe animationer til samlinger af objekter. Du tager blot et objekt og indstiller de ønskede egenskaber én for én. Bag kulisserne vil overgangen automatisk generere og genbruge de nødvendige tweens til at modellere den fulde animation. Ydermere, hvis animation ikke ønskes, kan overgangen konfigureres til i stedet at indstille egenskabsværdierne med det samme. Kort sagt giver overgangen et lag af indirekte til opdatering af objektegenskaber - disse opdateringer kan indsamles og derefter animeres eller anvendes med det samme.
Her er et simpelt eksempel på brug af en overgang i vores tutorial-app.

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

Dette eksempel animerer alle sprites i container til en ny tilfældig y position og tilfældig vertikal skalafaktor. Vi opretter først en ny Transitioner der skulle skabe en 2-sekunders animation. Vi går derefter gennem hver underordnede sprite og bruger overgangen til at indstille egenskaberne til Tween.
Transitionerens $ operator angiver, at vi ønsker at indstille en målværdi for inputobjektet. Som standard enten en ny Tween er oprettet, eller en eksisterende Tween findes for den aktuelle vare. Det $ operatoren returnerer derefter et objekt, hvorpå tweens målegenskab skal indstilles.
Endvidere kan overgange bruges til at skabe statiske (ikke-animerede) overgange. Hvis en overgangsperiode er immediate egenskaben er indstillet til sand, vil den ikke oprette nye tweens. I stedet vil $-operatøren blot returnere inputværdien. Det betyder, at du kan oprette metoder, der opdaterer værdier ved hjælp af en overgang, og derefter kontrollere, om du vil have disse værdier opdateret eller ej. Standard "umiddelbar tilstand" Transitioner hentes ved hjælp af den statiske Transitioner.DEFAULT ejendom. På den måde behøver du ikke tildele en ny Transitioner når du udfører øjeblikkelige opdateringer.
Transitionere bruges i vid udstrækning overalt flare.vis pakke, der giver visualiseringsdesignere mulighed for at kontrollere, hvilke opdateringer der skal animeres og hvordan.

Del 3: Visualiseringer

Indlæser data

Den grundlæggende datarepræsentation for Flare bruger blot de indbyggede Flash-datatyper: Object , Array. For eksempel kan en datatabel blot repræsenteres som en række af objekter, hvor hvert objekt indeholder navnene og værdierne for hvert datafelt. Selvom mere effektive repræsentationer er mulige, giver denne tilgang den største fleksibilitet, samtidig med at den drager fordel af eksisterende Flash-udviklingskonventioner.
For at indlæse data i Flash-afspilleren er der en række fremgangsmåder. En enkel tilgang er at integrere dine data i selve applikationen. På den måde bliver dataene downloadet sammen med applikationen, hvilket er fint til statiske datasæt. For eksempel kan du bruge ActionScripts objektnotation til at definere datasættet direkte som en variabel:

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

I mange tilfælde vil du dog ønske at indlæse dine data dynamisk, enten fra en webside (du kan bruge JavaScript i browseren til at overføre værdier til Flash), eller fra en server på internettet. Der er mange tilgange til at gøre dette, og du bør vælge det, der fungerer bedst til netop din applikation. For eksempel giver ActionScript yderligere datatyper og syntaks til at arbejde med XML data ved hjælp af ECMAScript til XML (E4X) standard.
Flare giver også nogle værktøjer til at indlæse eksterne datasæt. Det understøtter indlæsning af data fra enhver server på internettet og konvertering af disse data til interne ActionScript-objekter. De aktuelt understøttede filformater er tabulator-separeret tekst ("tab", et standard filformat til eksport af data fra værktøjer som Excel), JavaScript objekt notation ("json", et almindeligt dataformat for webapplikationer), og GraphML ("graphml", en XML format til at repræsentere netværk med noder og kanter).
Fjerndata indlæses ved flare ved hjælp af flare.data.DataSource klasse. Her er et eksempel på at bruge det til at indlæse en tabulator-separeret datafil:

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 { // funktion til at håndtere data, når indlæsningen er fuldført var ds:DataSet = loader.data som DataSet; // gør nu noget med dataene... } );

DataSource konstruktøren har to påkrævede argumenter: url'en til datasættet og en streng, der angiver filformatet. Lige nu er de understøttede formater "tab" (tabulator-separeret), "json" (JavaScript Object Notation) og "graphml" (GraphML).
For datasæt, hvis skema (felternes navne og datatyper) kan være uklare, er der også et tredje valgfrit konstruktørargument, som tager en DataSchema type. Se den flare.data.DataSchema , flare.data.DataField klasser for mere. Skemaet kan være nyttigt til at sikre, at dataværdier er korrekt navngivet (f.eks. for en tabulatorsepareret fil, der mangler en overskriftsrække) og konverteres til de korrekte datatyper (f.eks. for JSON-data, hvor numeriske værdier blev pakket ind i anførselstegn).
For faktisk at indlæse dataene kaldes DataSource-indlæsningsmetoden, hvilket returnerer en flash.net.URLLoader eksempel. Indlæseren kan bruges til at spore overførslens fremskridt (f.eks. hvis du ønsker at angive en statuslinje) og giver en meddelelseshændelse, når overførslen er fuldført. I eksemplet ovenfor tilføjer vi en begivenhedslytter, der får besked, når overførslen er fuldført. Det DataSource vil automatisk analysere inputdataene, knytte dem til ActionScript-objekter og gemme resultaterne i en flare.data.DataSet objekt. Det DataSet klasse kan repræsentere både tabel- og netværksdata (node/kant).

Oprettelse og håndtering af visuelle objekter

Nu vil vi gerne visualisere et datasæt. For at gøre dette kortlægger vi individuelle dataposter til visuelle elementer. Flare giver et sæt visuelle objekter til at repræsentere dataene. Her er en oversigt over de grundlæggende klasser leveret af flare.vis.data pakke.

DataSprite: Basisklasse for sprites, der visuelt repræsenterer data. DataSprite er en underklasse af Flash Player's Sprite klasse. DataSprite omfatter a data egenskab, hvor data tuple (et ActionScript-objekt) er gemt og også giver yderligere visuelle variabler ud over dem, der understøttes af grundlæggende sprites, herunder farve-, form- og størrelsesfelter og understøttelse af indstilling af positioner i polære koordinater.
NodeSprite: DataSprite instans, der repræsenterer en node. Dette er standardtypen, der bruges til at visualisere data. NodeSprite instanser kan forbindes inden for netværk eller træstrukturer ved EdgeSprite forekomster.
EdgeSprite: DataSprite instans, der repræsenterer en kant. An EdgeSprite forbinder to NodeSprites. Noderne er tilgængelige via source , target egenskaber. EdgeSprites bruges til at skabe grafer og træer, samt til at repræsentere linjer, såsom i tidsseriegrafer.

Typisk oprettes og gemmes NodeSprites og EdgeSprites i flare.vis.data.Data klasse, som administrerer alle de visuelle elementer til en enkelt visualisering. Det Data klasse giver metoder til at skabe nye visuelle objekter til datatupler og til at repræsentere en grafstruktur.
Data klasse giver også metoder til at krydse og opdatere de indeholdte dataelementer. Det nodes , edges egenskaber returnerer lister over de noder og kanter, der er indeholdt i dataene. Hver af disse lister indeholder en visit metode, der giver dig mulighed for at sende en funktion ind, som derefter vil blive kaldt med hver node eller kant. Også den setProperty , setProperties metoder giver dig mulighed for at indstille egenskabsværdier for alle noder eller kanter på én gang. Disse metoder tager valgfrit en Transitioner som et argument, så du kan animere ejendomsopdateringen.
For eksempel resulterer følgende kode i en et sekunds animation, hvor linjefarven for alle noder er sat til blå. (Bemærk, at hex-notationen for DataSprite farveværdier inkluderer alfa samt røde, grønne, blå kanaler).

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

Node- og kantlister understøtter også standardegenskabsværdier ved hjælp af setDefault, setDefaults, removeDefaultog clearDefaults metoder. Standardværdier vil blive indstillet på en node eller kant, der er oprettet for nylig ved brug af Data-klassen' addNode or addEdgeFor metoder.
Tree klasse er en underklasse af Data, specialiseret til at repræsentere et træ i stedet for en generel graf. Det Data klasse understøtter automatisk oprettelse af en Tree eksempel ved at beregne spændingstræer i en generel graf. En række spændingstræ-oprettelsesmetoder – inklusive bredde-først, dybde-først og minimum spændingstræ-algoritmer – kan overføres som en parameter. Disse beregninger udføres ved hjælp af flare.analytics.graph.SpanningTree klasse.
For rent faktisk at skabe node- og kantobjekter bruger vi addNode , addEdgeFor metoder.

addNode tager en input data tuple (en Object) og opretter en ny NodeSprite for at visualisere disse data.
addEdgeFor tager to eksisterende NodeSprites og tilføjer en EdgeSprite forbinder dem. Metoden undtager også valgfrit en data tuple (igen, en Object repræsenterer eventuelle datafelter) for kanten.

Her er et simpelt eksempel til oprettelse NodeSprites for et datasæt i tabelform, forudsat at vi har en række dataobjekter:

var list:Array; // en række dataobjekter, vi allerede har indlæst var data:Data = new Data(); // en ny databeholder for hver (var o:Object in list) { data.addNode(o); }

Resultatet er a Data objekt befolket med visuelle DataSprite (noder eller kanter) forekomster.
I praksis behøver du ikke altid at udfylde de visualiserede data manuelt. At skabe en Data objekt til at visualisere et indlæst datasæt, kan du ofte bruge en bekvemmelighedsmetode i stedet for. Det Data.fromArray() funktion opretter en Data instans for tabeldata gemt som en række ActionScript-objekter, mens Data.fromDataSet() metode skaber på samme måde en Data instans fra en indlæst DataSet objekt.

Konstruktion af en visualisering

Lad os nu sætte det hele sammen for at begynde at lave visualiseringer. Det Visualization klasse repræsenterer en enkelt visualisering, inklusive visuelle mærker (gemt i en Data instans) og akser. For at oprette en visualisering indlæser vi et datasæt, føjer dataene til en visualisering og opsætter operatører, der bestemmer, hvordan dataene skal visualiseres. Her er et eksempel. Se først koden igennem, og læs derefter videre for at forstå, hvad hver del gør.

pakke { import flare.data.DataSet; import flare.data.DataSource; import flare.scale.ScaleType; import flare.vis.Visualisering; 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.Rektangel; import flash.net.URLLoader; [SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")] public class Tutorial udvider Sprite { private var vis:Visualization; offentlig funktion Tutorial() { loadData(); } privat funktion 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)); }); } privat funktion visualize(data:Data):void { vis = new Visualization(data); vis.bounds = nyt rektangel(0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild(vis); vis.operators.add(new AxisLayout("data.date", "data.age")); vis.operators.add(ny ColorEncoder("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add(ny ShapeEncoder("data.race")); vis.data.nodes.setProperties({fillColor:0, lineWidth:2}); vis.update(); } } }

Lad os se på hver metode.
Konstruktøren er enkel: den kalder bare loadData fremgangsmåde.
loadData metoden opretter en ny datakilde og indlæser den ved hjælp af metoderne beskrevet tidligere. I dette tilfælde er datasættet rapporterede drab i Los Angeles amt i 2007, gemt i tabulatorsepareret format. Når indlæsningen er fuldført, tilføjes de indlæste datatupler til en Data eksempel ved hjælp af fromDataSet bekvemmelighedsmetode. Under motorhjelmen resulterer dette i skabelsen af NodeSprites til at visualisere hvert dataelement. Endelig, den visualize metode kaldes.
visualize metode sætter visualiseringen op. Her er, hvad der sker i hvert trin:

Del 1: Initialisering
- Der oprettes en ny visualisering til dataene
- Vi sætter grænserne for visualiseringen. Dette bestemmer layoutområdet.
- Vi indstiller x , y placeringen af vores visualisering og tilføje visualiseringen til visningslisten.
Del 2: Angivelse af visuelle kodninger
- Vi bruger et akselayout, hvor vi placerer "dato" på x-aksen og "alder" på y-aksen. Det AxisLayout operatøren konfigurerer også automatisk akserne til visualiseringen. Vi bruger syntaksen "data.date" til at betegne datavariablerne, da de er placeret inden for NodeSprite's data ejendom.
- Vi tilføjer en farvekodning, så en nodes linjefarve repræsenterer variablen "årsag" (dødsårsag). Vi fortæller også farvekoderen, at værdierne af "årsag"-variablen repræsenterer kategorier (ScaleType.CATEGORIES). Farvekoderen bruger disse oplysninger til automatisk at vælge en passende farvepalet. Som vi snart vil se, kan du også levere din egen farvepalet.
- Vi tilføjer en formkodning, så et objekts form repræsenterer et offers "race".
- Vi indstiller standardegenskaber – vi indstiller nodernes fyldfarve til fuld gennemsigtig og indstiller linjebredden til 2 pixels.
- Til sidst kalder vi update metode. Dette kører alle operatørerne i rækkefølge.

Opdatering af en visualisering

Når en visualisering er blevet oprettet, vil vi måske opdatere den. For eksempel vil vi måske gerne ændre farvekodningen for i stedet at visualisere folks køn.
Lad os først tilføje en ny metode til klassen:

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

Denne metode:

Henter den anden operator (operatoren ved indeks 1) og kaster den til en ColorEncoder
Ændrer source egenskab for farvekoderen til at bruge variablen "data.sex".
Indstiller en ny farvepalet (i dette tilfælde rød for kvinder, blå for mænd - farverækkefølgen matcher den alfabetiske rækkefølge af etiketterne)
Animerer ændringen ved at kalde opdatering med en Transitioner indstillet til en to sekunders animation. Det vis.update metoden returnerer Transitioner, så vi kan kalde play på returværdien af opdateringen. (Bemærk: du kan også udelade Transitioner og send lige tallet 2 som argument til update. En ny Transitioner oprettes automatisk og returneres.)

Nu skal vi tilslutte applikationen, så vi interaktivt kan udløse opdateringen. For at gøre det skal du tilføje følgende kode til konstruktøren:

 // tilføj en klikbar etiket var button:TextSprite = new TextSprite("Farve efter køn"); addChild(knap); knap.x = 710; button.y = 50; button.buttonMode = sand; button.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void { colorByGender(); } );

Denne kode:

Opretter en ny tekstetiket (TextSprite er en hjælperklasse fra flare.display pakke)
Tilføjer etiketten til applikationen og indstiller dens position
sæt buttonMode til sand (dette får en håndmarkør til at vises, når du holder musen hen over etiketten)
Tilføjer en hændelseslytter, der udløses, når der klikkes på etiketten. Vi tilføjer en tilbagekaldsfunktion, der kalder colorByGender fremgangsmåde.

For at ovenstående kode skal fungere, skal vi inkludere disse yderligere importerklæringer øverst i filen:

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

Nu skulle du være i stand til at kompilere og køre programmet. Ved at klikke på etiketten "Farve efter køn" bør ændringen i farvekodning animeres.

Næste trin

Ovenstående eksempler viser det grundlæggende i Flash og Flare-biblioteket, men der er mange flere funktioner, der endnu ikke er dækket. Fremadrettet anbefaler vi (a) at inspicere både Flash og Flare API dokumentation for at få en fornemmelse af alle de tilgængelige klasser, og (b) grave gennem Flare-demoerne for at se, hvordan de samme principper vist her kan bruges til at konstruere en række andre visualiseringer. Eller endnu bedre, grav gennem Flare-kildekoden for at lære, hvad der foregår under motorhjelmen.
For at hjælpe i denne proces er her en generel oversigt over underpakkerne i flare.vis:

flare.vis.axis: giver akser, etiketter og gitterlinjer
flare.vis.controls: interaktionsbehandlere til udvælgelse, zoomning og mere
flare.vis.data: visuelle objekter, der repræsenterer dataelementer
flare.vis.data.render: pluggbare renderere, der tegner DataSprites
flare.vis.events: hændelsestyper, der bruges i flare-rammen
flare.vis.legend: repræsenterer legender til beskrivelse af visuelle kodninger
flare.vis.operator: byggeklodser til at definere visualiseringer
flare.vis.palette: paletter for farve-, form- og størrelsesværdier
flare.vis.util: almindelige brugsklasser

Du burde nu vide nok til at give mening om demoerne i flare.demos pakke. Du er velkommen til at lege med, ændre, kopiere, indsætte og bygge videre på demoerne for at få en bedre forståelse af, hvordan Flash og Flare fungerer.