Flare | Datavisualisering för webben

Flare gör det enkelt att skapa interaktiva datavisualiseringar

För att börja göra dina egna visualiseringar, ladda ner flare och arbeta igenom handledningen nedan. Behöver du mer hjälp? Besök hjälpforum (du behöver en SourceForge logga in för att posta).

Flare är programvara med öppen källkod som släpps under en BSD-licens, vilket innebär att den kan fritt distribueras och modifieras (och till och med säljas för $$). Flares design anpassades från föregångaren prefuse, en visualiseringsverktygssats för Java.

Applikationer

Meddelanden

• 2010.10.07: Flare-utveckling har öppnats för samhället och källan har flyttat från SourceForge till ett nytt hem på GitHub. blossa 2009.01.24 är fortfarande den senaste officiella utgåvan och (åtminstone för närvarande) reflekterar handledningarna och dokumentationen det. Utvecklingsversionen på GitHub innehåller nu bättre stöd för Flash Player 10 samt många andra små korrigeringar och ändringar.
• 2009.01.24: blossa 2009.01.24 har blivit frisläppt. Detta är en underhållsversion med ett antal buggfixar och uppdateringar. Se släpp anteckningar för mer detaljer. Detta är den senast planerade versionen för Flash Player 9 - framtida versioner kommer att migrera till version 10.
• 2008.07.30: blossa 2008.07.29 har blivit frisläppt. Detta är en stor release som introducerar många nya funktioner och arkitektoniska förbättringar. Se släpp anteckningar för mer detaljer.
• 2008.07.30: blossa 2008.08.08 har blivit frisläppt. Denna version innehåller förbättrat legendstöd, namngivna övergångar, buggfixar och en refactoring för att minska koppling och konsolidera verktygsklasser. Se släpp anteckningar för mer detaljer.

Handledning

En steg-för-steg-handledning för att lära dig ActionScript och Flare.

Komma igång

Det första steget är att sätta upp dina utvecklingsverktyg.

1. Ställ in en arbetsmiljö för utveckling av blixt. Det finns två tillvägagångssätt. Vi rekommenderar den första för enkelhetens skull, men mer avancerade användare är välkomna att använda den andra metoden.
   • Alternativ 1 (enklare): Installera Adobe Flex Builder.
     • Detta är en fullständig utvecklingsmiljö för ActionScript / Flex-applikationer. Den är tillgänglig för alla större plattformar (Windows, Mac, Unix). Användare som redan använder Eclipse IDE kan också installera Flex Builder som ett Eclipse-tillägg.
     • Förbehållet för att använda Flex Builder är att det är kommersiell programvara och endast fungerar under en begränsad testperiod. Adobe tillhandahåller dock gratis Flex Builder-licenser till universitetsstudenter, lärare och personal.
   • Alternativ 2 (mer komplicerat): Installera gratis Flex SDK
     • Detta installerar de grundläggande ActionScript / Flex-kompilerarna: mxmlc och compc. Du kan sedan konfigurera din egen byggmiljö, till exempel med hjälp av make or ant bygga system. Flare är förpackad med en build.xml fil för användning med Apache Ant bygga systemet. När myra är installerad, öppna bara build.xml fil i en textredigerare, ändra de första parraderna så att de pekar på din Flex SDK installation och sedan använda ant att sammanställa biblioteken. Vi använder Adobe Labs myruppgifter för Flex-utveckling.
     • Fördelen med detta tillvägagångssätt är att all programvara är gratis och inte kommer att upphöra att gälla för dig. Men du tappar bort funktioner som automatisk kompilering, projektledning och automatisk komplettering från Flex Builder.
2. Ladda ner biblioteken med prefuse flare.
   • Nedladdningen är en zip-fil som innehåller en uppsättning ActionScript-biblioteksprojekt. Packa upp filerna i din primära arbetsytakatalog om du använder Flex Builder. Under handledningen importerar vi dem till Flex Builder och använder dem för att bygga visualiseringar!
   • Programvaran är för närvarande en alfa-version, och det kan därför förväntas vissa buggar och begränsningar. Vi kommer att åtgärda problem så snart vi kan, och länken ovan kommer alltid att peka på den senaste versionen.

Introduktion till Flash och ActionScript 3

Flash är en fantastisk miljö för interaktiv grafik och med det senaste tillskottet av ActionScript 3-programmeringsspråket blev det bara mycket kraftfullare och effektivare. Medan en fullständig introduktion till AS3 ligger utanför denna handledning, här är några resurser som du kommer att hitta användbara:

• Adobe ger en översikt över AS3 med länkar till ytterligare resurser.
• Essential ActionScript 3 av Colin Moock från O'Reilly Publishing är en fantastisk bok som hjälper dig att komma igång. Du kan få tillgång till det online här (vissa institutioner, såsom universitet, ger gratis tillgång).
• Adobe Flex API Reference är ovärderligt för att förstå de olika klasserna och metoderna som finns tillgängliga. Vi kommer bara att fokusera på klasserna i flash.* paket.

Denna handledning förutsätter en grundläggande bekantskap med ActionScript-syntax och -typer, samt begrepp för objektorienterad programmering.

Del 1: DisplayObjects

Beskrivning

Flash modellerar en 2D-visuell scen med en scenegraf. Visuella objekt är organiserade i en hierarki, med underordnade objekt definierade i överordnadens koordinatutrymme. Du ser ofta det här scenegrafen kallad visningslista i både Adobes dokumentation och i böcker om Flash-programmering.
Noden längst upp i visningslistan är alltid Stage objekt. Scenen har alltid ett och bara ett barn. Detta kallas root, och alla visuella objekt ligger under roten. Vanligtvis är roten din faktiska Flash-applikation. Vi kommer snart tillbaka till detta.
Alla visuella objekt som kan läggas till i visningslistan är instanser av DisplayObject klass. Underklasser av DisplayObject innefattar Bitmap (för bilder), TextField (för interaktiva textområden) och Video (tänk YouTube). De vanligaste fallen är dock Sprite och Shape klasser. Som referens finns de flesta av dessa klasser i flash.display paketet (men så småningom kommer du sannolikt att hitta flash.text paket med användning också).
Smakämnen Sprite class är det mest användbara, allmänna visuella objektet som används av Flash Player. Sprites är visuella objekt som innehåller både ritningsinnehåll och kan fungera som en behållare för undernoder i visningslistan ( Sprite klass underklasser flash.display.DisplayObjectContainer klass). I motsats till detta Shape klass kan innehålla ritningsinnehåll, men kan inte innehålla undernoder. Som ett resultat förbrukar former mindre minne, men är mycket mindre flexibla. För enkelhetens skull fokuserar vi på Sprites i denna handledning.

Skapa en ny applikation

Låt oss först skapa en ny Flash-applikation. För att göra detta, öppna Flex Builder och se till att du är i “Flex Development” -perspektivet (ofta nås genom att klicka på den svarta och vita “Fx” -ikonen uppe till höger).
Högerklicka på skärmen i rutan "Navigator" till vänster och välj "Ny> ActionScript-projekt". I den resulterande dialogrutan skriver du "Tutorial" som projektnamn och klickar sedan på "Finish". Detta skapar ett nytt projekt åt dig.
Du bör nu se en "Tutorial" -mapp i "Navigator" -fönstret. Inom den här mappen ska du se en fil med namnet “Tutorial.as”. Detta är din huvudsakliga applikationsfil. Öppna den om den inte redan är öppen.
Inne i filen ser du grundläggande ställningar för den här klassen:

paket {import flash.display.Sprite; public class Tutorial utvidgar Sprite {public function Tutorial () {}}}

Lägg märke till att denna klass utökar Sprite klass. Eftersom detta är vår huvudsakliga applikationsklass, när vi kör applikationen en instans av Tutorial klass läggs automatiskt till i visningslistan som dess root (barnets enda barn Stage).
Lägg också märke till att en konstruktör har skapats automatiskt. Denna konstruktör kommer att anropas när applikationen startar. För de som är bekanta med programmeringsspråk som C, C ++ eller Java, fungerar konstruktören för applikationsklassen ungefär som en main fungerar på de andra språken.
Med den här nya applikationsställningen på plats kan vi börja spela med visuella objekt. Det finns dock en sak som vi vill göra först. Lägg till en ny rad direkt ovanför klassdeklarationen (”public class Tutorial…”) Linje som säger:

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

Denna rad definierar standardinställningar för din applikation (som kompileras och sparas som en .swf-fil i projektets "bin" -katalog). Ovan ställer vi in ​​storlek, bakgrundsfärg och målhastighet (i bilder per sekund) för vår applikation.

sprites

Liksom alla DisplayObjects, Sprite stöder ett antal visuella egenskaper direkt ur lådan. Detta inkluderar x, y, scaleX, scaleY, rotationoch alpha egenskaper. Dessa ändrar respektive sprits position, storlek, orientering och transparens (och alla dess barn! Kom ihåg att vi använder en scenograf här).
Men dessa värden betyder inte mycket ännu, eftersom sprites inte innehåller något som standard. Vi börjar med att rita vårt eget innehåll.
Varje Sprite har också en graphics fast egendom. Vi kan använda detta för att rita grafik för Sprite. De graphics egendom är ett exempel på flash.display.Graphics klass, som tillhandahåller ett antal vektorritningskommandon.
I exemplet nedan gör vi ett antal saker.

• Först skapar vi en ny Sprite.
• För det andra använder vi sprite's graphics att rita en cirkel med grå fyllning och svart kontur.
  • beginFill ställer in aktuell fyllningsfärg och stil. Det första argumentet är färgen, i hex-notation, och det andra argumentet är alfa-värdet, som sträcker sig från 0 för helt transparent till 1 för helt ogenomskinligt.
  • lineStyle ställer in aktuell streckfärg och stil. Det första argumentet är linjebredden, det andra argumentet är färgen.
  • drawCircle ritar en cirkel med radien 10 vid punkten 0,0 i vår sprites koordinatutrymme.
• För det tredje lägger vi till sprite som ett underordnat huvudprogram (a Tutorial sprite).
• För det fjärde ställer vi in x och y vår sprits position.
• För det femte lägger vi till lite felsökningsoutput. trace skriver ut en sträng till konsolen. Denna utdata visas bara när appen körs i “felsökning” -läge.

Här är koden:

paket {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; spåra ("vår sprite är på:" + sprite.x + "," + sprite.y); }}}

Kör applikationen (högerklicka på "Tutorial.as" och välj "Kör som> Flex-applikation"). Du bör se en grå cirkel med svart kontur i det övre vänstra hörnet, centrerad på punkten 50, 50. Om du kör applikationen i felsökningsläge (välj "Felsök som> Flex-applikation"), bör du också se strängen "vår sprite är på: 50, 50 ”i utgångskonsolen.

Kapslade sprites

Låt oss nu göra vår scen lite mer intressant. Låt oss börja med att flytta vår Sprite-generationskod till en ny metod. Vi lägger till den här metoden i vår klass:

 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; retur sprite; }

Därefter ersätter vi koden i vår konstruktör. Först skapar vi en ny sprite som heter container som vi använder för att hålla en samling cirklar. Vi placerar den i mitten av vår scen. För det andra använder vi en slinga för att skapa en massa cirklar. Här raderar vi cirklarna symmetriskt runt 0,0-punkten i moderbehållaren. Vår nya konstruktör ser nu ut så här:

 public function Tutorial () {var container: Sprite = new Sprite (); container.x = 400; container.y = 300; this.addChild (container); för (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 nya versionen av applikationen. Du bör se en rad med tio cirklar i mitten av applikationen.
Vi kan nu ändra behållaren för att uppdatera alla cirklar i den. Försök spela med att ställa in olika visuella variabler på container sprite. Ändra till exempel x, y, scaleX, scaleY, rotationoch alpha egenskaper.

Andra ämnen

Det finns mycket mer du kan göra med de grundläggande alternativen Flash erbjuder. Tyvärr är de lite längre än vad vi har tid för här. Några saker att utforska inkluderar bildfilter (se flash.filters paket), som låter dig lägga till visuella effekter för att visa objekt med hjälp av deras filters och de olika alternativen som finns i flash.display.Graphics klass, inklusive fyllnings- och linjestilar och många fler 2D-ritningsrutiner.

Del 2: Animationer

Nu när vi kan skapa visuella objekt är det dags att börja ge dem lite liv. Flare inkluderar flare.animate paket för att göra det enkelt. Först måste vi importera flare-biblioteken för användning i Flex Builder.

Importerar bibliotek

Innan du fortsätter, se till att flare-biblioteken har laddats som projekt inom Flex Builder. Du borde redan ha packat upp flare-filerna till din huvudsakliga Flex Builder-arbetsytkatalog. Nästa steg är att importera dem till Flex Builder-miljön:

• Se till att du är i “Flex Development” perspektivet.
• Högerklicka på navigeringsfönstret till vänster.
• Välj "Importera ..." i popup-menyn.
• I dialogrutan väljer du "Allmänt> Befintliga projekt i arbetsytan" och klickar på "Nästa" -knappen.
• Använd widgetarna "Välj rotkatalog" för att navigera till din Flex Builder-arbetsytakatalog
• Du bör nu se flare-projekten listade i panelen "Projekt:".
• Välj projekten “flare” och “flare.demos” och klicka sedan på “Finish” -knappen.

Du bör nu se flare-projekten i Navigator-rutan. Du kan nu bläddra i källkoden för både biblioteket och demos.

Översikt över flare-biblioteket

Här är en snabb översikt över flareverktygssatsen. Inuti flare projekt, titta in i mappen “src / flare”. Du hittar ett antal paket som erbjuder olika funktioner:

• analytics: operatörer för datastatistik och analys av data
• animate: verktyg för att skapa animationer
• data: metoder för läsning och skrivning av datamängder
• display: DisplayObject typer som förlänger de som tillhandahålls av flash.display
• flex: ett omslag för att bädda in Flare-visualiseringar i Flex-applikationer
• physics: en fysikmotor för fysiska effekter eller kraftstyrd layout
• query: en frågeprocessor för ActionScript-objekt
• scale: klasser för hantering av dataskalor, såsom linjära, logg- och tidsskalor
• util: en uppsättning verktygsklasser som tillhandahåller vanliga funktioner
• vis: flare visualiseringskomponenter och operatörer

Det finns också flare.demos projekt, som ger ett antal exempel på hur man skapar Flare-komponenter.

Importera ett bibliotek inom ett annat projekt

För att använda flare i dina egna projekt måste du uppdatera dina projektinställningar. Så här gör du:

1. I navigeringsfönstret högerklickar du på den översta mappen i projektet "Tutorial"
2. Klicka på "Egenskaper" i snabbmenyn
3. I den resulterande dialogrutan klickar du på "ActionScript-byggsökväg" i den vänstra panelen (det ska vara det tredje objektet uppifrån)
4. Klicka på fliken "Biblioteksväg" i den högra panelen
5. Klicka på knappen "Lägg till projekt"
6. Du bör nu se en lista med projekt, inklusive flare.
7. Välj "flare" och klicka sedan på "OK"

Du har nu lagt till flare-biblioteken i ditt projekt och kan använda vilken klass som helst.
En sak att notera om Flex-kompilatorn - som standard innehåller den bara de klasser som du faktiskt använder i din applikation. Så även om du importerar ett mycket stort bibliotek kan storleken på din slutliga .swf-fil fortfarande vara ganska liten. Var dock uppmärksam på att detta kan orsaka problem om du använder reflektion för att utföra dynamisk klassladdning i din applikation (en mer avancerad funktion som inte omfattas av denna handledning).

Grundläggande animering: Tween, Sequence och Parallel

Ok, nu ska vi animera! De flare.animate.Transition class är basklassen för alla animationer. Viktiga underklasser av Transition är Tween, Sequenceoch Parallel övergångar. Tweens används för att animera egenskaperna för ett enda objekt. Sekvenser används för att köra en serie animationer i ordning. Parallella övergångar kör en samling övergångar samtidigt. Låt oss börja med Tween.

Tweening -objektegenskaper

Grunderna i klassen Tween är enkla: vi tar ett objekt, ger en uppsättning fastighetsvärden som vi vill ändra över tiden och anger tidsvaraktigheten för den ändringen. Låt oss rotera containerobjektet med hjälp av handledningsprogrammet från del 1. Lägg till följande rad i slutet av Tutorial-klasskonstruktören:

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

Se också till att du har ett nytt importförklaring högst upp i din klass så att kompilatorn vet vad du pratar om. Lägg till detta i importlistan:

 importera flare.animate.Tween;

(OBS: Ibland lägger Flex Builder automatiskt till ett importuttal åt dig när du skriver ett nytt klassnamn. Om inte, är en annan teknik att placera textmarkören på änden av det nya klassnamnet och skriv "Ctrl-Space" - detta skulle skapa en ny import åt dig för klassen.)
Kör nu din ansökan - punkterna ska rotera i en cirkel under en period på 3 sekunder.
Här är vad Tween-konstruktören gör:

• Det första argumentet är objektet vars värden ska vara mellanvägs
• Det andra argumentet är animationens längd i sekunder
• Det tredje argumentet är en objektinstans som listar egenskaperna som ska animeras och deras målvärden.
  • Egenskapsnamnen måste exakt matcha egenskaperna för inmatningsobjektet.
  • Kapslade fastigheter är tillåtna men måste bifogas i offert. Till exempel, {“data.profit”:50} är en juridisk ingång om ingångsobjektet har en egenskap med namnet data som i sin tur har en egendom som heter vinst.

Smakämnen play metoden kör sedan animeringen. De play metoden kan också anropas med en enda boolesk parameter som anger om animeringen ska köras i omvänd ordning eller inte.
Du kanske har märkt att rotationsanimationen uppvisar viss acceleration. Detta beror på att standardinställningen för Tween instanser är att använda "slow-in slow-out" animation. Du kan kontrollera dessa beteenden med Easing funktioner. Dessa funktioner tar som inmatning den aktuella animationsförloppet som en bråkdel mellan 0 och 1. De returnerar sedan en manipulerad förloppsfraktion för att ändra animationstakten, ofta på ett olinjärt sätt.
För att ta bort lättnader (dvs. använda en linjär lättnadsfunktion) kan du skriva: tween.easing = Easing.none. Se bara till att du importerar flare.animate.Easing klass högst upp i filen.
Experimentera gärna med andra lättnader. Till exempel kan lättnadsfunktioner innebära att man lättar in (manipulerar bara animeringens start), lättar ut (manipulerar endast slutet på animeringen) eller båda. Prova till exempel detta: tween.easing = Easing.easeOutBounce. Detta bör få rotationen att studsa i slutet.
Innan du går vidare, försök att animera andra egenskaper hos behållaren, till exempel position, skala eller alfavärden.

Sammansatta animationer

Smakämnen Sequence och Parallel klasser kan du gruppera animationer tillsammans. Sequence kör en uppsättning animationer efter varandra. Prova till exempel detta:

 var t1: Tween = new Tween (container, 1, {y: 100}); var t2: Tween = new Tween (container, 1, {scaleX: 2}); var t3: Tween = ny Tween (container, 1, {y: 300}); var t4: Tween = new Tween (container, 1, {scaleX: 1}); var seq: Sekvens = ny sekvens (ny parallell (t1, t2), ny parallell (t3, t4)); seq.play ();

Du måste också lägga till några nya importuttalanden högst upp i filen:

 importera flare.animate.Parallel; importera flare.animate.Sequence;

Detta skapar fyra tweens: t1, t2, t3och t4. Det skapar sedan två parallella övergångar som körs t1 och t2 tillsammans och springa t3 och t4 tillsammans. De parallella övergångarna körs sedan efter varandra i en sekvens. På det här sättet är det enkelt att bygga mer komplicerade animationer.
För mer avancerade sammansatta animationer, ta en titt på FlareLogo och flare.demos.Animation klasser i flare.demos projektet.

Parti-animering med övergångar

Använda Tween, Paralleloch Sequence klasser kan du göra valfritt antal animerade övergångar. Men när man hanterar stora samlingar av objekt (vanligt vid visualisering) kan det vara ont att manuellt hantera en liknande stor uppsättning tweens. Dessutom bör det vara enkelt att köra separata rutiner för kodning av visuella egenskaper som layout, färg, storlek, form och inte behöva oroa sig för att hantera animering. Kanske vill du animera ändringar eller kanske en statisk uppdatering. Hur som helst bör du kunna återanvända samma kod för att tilldela värden.
För att lösa dessa problem tillhandahåller Flare Transitioner klass. Övergångar förenklar processen att skapa animationer för objektsamlingar. Du tar helt enkelt ett objekt och ställer in önskade egenskaper en efter en. Bakom kulisserna kommer övergången att automatiskt generera och återanvända nödvändiga tweens för att modellera hela animationen. Dessutom, om animering inte önskas, kan övergången konfigureras för att istället ställa in egenskapens värden omedelbart. Kort sagt, övergången tillhandahåller ett lager av indirektion för att uppdatera objektegenskaper - dessa uppdateringar kan samlas in och sedan animeras eller tillämpas omedelbart.
Här är ett enkelt exempel på hur du använder en övergångsapparat i vår självstudie-app.

 var t: Transitioner = new Transitioner (2); för (var j: int = 0; j

Detta exempel animerar alla sprites i container till ett nytt slumpmässigt y position och slumpmässig vertikal skalningsfaktor. Vi skapar först en ny Transitioner det skulle skapa en 2-sekunders animation. Vi slingrar sedan igenom varje barnsprite och använder övergången för att ställa in egenskaperna till Tween.
Övergångarens $ operator anger att vi vill ställa in ett målvärde för ingångsobjektet. Som standard antingen en ny Tween skapas, eller en befintlig Tween finns för det aktuella objektet. De $ operatören returnerar sedan ett objekt som ska ställas in mellanmålets målegenskap.
Vidare kan övergångare användas för att skapa statiska (icke-animerade) övergångar. Om en övergångs immediate egenskapen är satt till true, den skapar inte nya tweens. Istället returnerar $ -operatören helt enkelt inmatningsvärdet. Detta innebär att du kan skapa metoder som uppdaterar värden med hjälp av en övergång, och sedan senare kontrollera om du vill att dessa värden ska uppdateras eller inte. Standard "omedelbart läge" Transitioner hämtas med hjälp av det statiska Transitioner.DEFAULT fast egendom. På så sätt behöver du inte tilldela en ny Transitioner när du utför omedelbara uppdateringar.
Övergångar används i stor utsträckning i hela flare.vis paket, så att visualiseringsdesigners kan kontrollera vilka uppdateringar som ska animeras och hur.

Del 3: Visualiseringar

Laddar data

Den grundläggande datarepresentationen för Flare använder helt enkelt de inbyggda Flash-datatyperna: Object och Array. Till exempel kan en datatabell bara representeras som en matris med objekt som varje objekt innehåller namn och värden för varje datafält. Även om effektivare representationer är möjliga, ger detta tillvägagångssätt mest flexibilitet samtidigt som man utnyttjar befintliga Flash-utvecklingskonventioner.
För att ladda in data i Flash-spelaren finns det ett antal tillvägagångssätt. En enkel metod är att bädda in dina data i själva applikationen. På det sättet hämtas data tillsammans med applikationen, vilket är bra för statiska datamängder. Du kan till exempel använda ActionScript-objektnotation för att definiera datamängden direkt som en variabel:

var data: Array = [{id: "Q1", försäljning: 10000, vinst: 2400}, {id: "Q2", försäljning: 12000, vinst: 2900}, {id: "Q3", försäljning: 15000, vinst : 3800}, {id: "Q4", försäljning: 15500, vinst: 3900}];

I många fall vill du dock ladda dina data dynamiskt, antingen från en webbsida (du kan använda JavaScript i webbläsaren för att skicka värden till Flash) eller från en server på internet. Det finns många sätt att göra detta och du bör välja vad som fungerar bäst för din specifika applikation. Till exempel ger ActionScript ytterligare datatyper och syntax för att arbeta med XML data med hjälp av ECMAScript för XML (E4X) standard.
Flare tillhandahåller också några verktyg för att ladda externa datamängder. Den stöder laddning av data från vilken server som helst på internet och konvertering av data till interna ActionScript-objekt. De för närvarande stödda filformaten är avgränsad text ("tab", ett standardfilformat för export av data från verktyg som Excel), JavaScript Objekt Notation (“Json”, ett vanligt dataformat för webbapplikationer) och GraphML (“Graphml”, en XML format för att representera nätverk med noder och kanter).
Fjärrdata laddas med flare med hjälp av flare.data.DataSource klass. Här är ett exempel på hur du använder den för att ladda en tabbavgränsad 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 {// function to handle data once loading is complete var ds: DataSet = loader.data as DataSet; // gör nu något med data ...} );

Smakämnen DataSource konstruktören har två obligatoriska argument: url för datauppsättningen och en sträng som anger filformatet. Just nu är de format som stöds "tab" (tabbavgränsad), "json" (JavaScript Object Notation) och "graphml" (GraphML).
För datamängder vars schema (namnen och datatyperna för fälten) kan vara oklara finns det också ett tredje, valfritt konstruktörargument som tar ett DataSchema typ. Se flare.data.DataSchema och flare.data.DataField lektioner för mer. Schemat kan vara till hjälp för att säkerställa att datavärden är korrekt namngivna (t.ex. för en flikavgränsad fil som saknar en rubrikrad) och konverteras till rätt datatyper (t.ex. för JSON-data där numeriska värden slogs in i citat).
För att faktiskt ladda data kallas DataSource-belastningsmetoden och returnerar en flash.net.URLLoader exempel. Lastaren kan användas för att spåra förloppet för nedladdningen (t.ex. om du vill tillhandahålla en förloppsindikator) och ger ett meddelandehändelse när nedladdningen är klar. I exemplet ovan lägger vi till en eventlyssnare som ska meddelas när nedladdningen är klar. De DataSource kommer automatiskt att analysera indata, mappa dem till ActionScript-objekt och lagra resultaten i en flare.data.DataSet objekt. De DataSet klass kan representera både tabell- och nätverksdata (nod / kant).

Skapa och hantera visuella objekt

Nu vill vi visualisera en datamängd. För att göra detta kartlägger vi enskilda dataposter i visuella objekt. Flare tillhandahåller en uppsättning visuella objekt som representerar data. Här är en översikt över de grundläggande klasserna från flare.vis.data paket.

• DataSprite: Basklass för sprites som visuellt representerar data. DataSprite är en underklass av Flash Player Sprite klass. DataSprite innehåller a data egenskap där datatupeln (ett ActionScript-objekt) lagras och ger ytterligare visuella variabler utöver de som stöds av grundläggande sprites, inklusive fält för färg, form och storlek och stöd för att ställa in positioner i polära koordinater.
• NodeSprite: DataSprite instans som representerar en nod. Detta är standardtypen som används för att visualisera data. NodeSprite instanser kan anslutas inom nätverk eller trädstrukturer med EdgeSprite instanser.
• EdgeSprite: DataSprite instans som representerar en kant. Ett EdgeSprite ansluter två NodeSprites. Noderna är tillgängliga via source och target egenskaper. EdgeSprites används för att skapa grafer och träd, liksom för att representera linjer, såsom i tidsseriediagram.

Vanligtvis skapas och lagras NodeSprites och EdgeSprites i flare.vis.data.Data klass, som hanterar alla visuella objekt för en enda visualisering. De Data klass ger metoder för att skapa nya visuella objekt för datatupler och för att representera en grafstruktur.
Smakämnen Data class tillhandahåller också metoder för att korsa och uppdatera de ingående dataobjekten. De nodes och edges egenskaper returnerar listor över noder och kanter som finns i data. Var och en av dessa listor innehåller en visit metod som låter dig skicka in en funktion som sedan anropas för varje nod eller kant. Även setProperty och setProperties Metoder låter dig ställa in egenskapsvärden för alla noder eller kanter samtidigt. Dessa metoder tar valfritt en Transitioner som ett argument, så att du kan animera fastighetsuppdateringen.
Till exempel resulterar följande kod i en animering på en sekund där linjefärgen för alla noder är blå. (Observera att hex-notationen för DataSprite färgvärden inkluderar alfa såväl som röda, gröna, blå kanaler).

data.nodes.setProperty ("lineColor", 0xff0000bb, ny övergång (1)). play ();

Nod- och kantlistor stöder också standardegenskapsvärden med hjälp av setDefault, setDefaults, removeDefaultoch clearDefaults metoder. Standardvärden kommer att ställas in på en nod eller kant som nyligen skapats med hjälp av dataklassen ' addNode or addEdgeFor metoder.
Smakämnen Tree klass är en underklass av Data, specialiserat på att representera ett träd snarare än ett allmänt diagram. De Data klass stöder automatisk skapande av en Tree exempel genom att beräkna spännande träd i en allmän graf. Ett antal spännande trädskapande metoder - inklusive bredd-första, djup-första och minimala spännande trädalgoritmer - kan skickas in som en parameter. Dessa beräkningar utförs med hjälp av flare.analytics.graph.SpanningTree klass.
För att faktiskt skapa nod- och kantobjekt använder vi addNode och addEdgeFor metoder.

• addNode tar en ingångsdata tuple (en Object) och skapar en ny NodeSprite för att visualisera dessa data.
• addEdgeFor tar två befintliga NodeSprites och lägger till en EdgeSprite ansluta dem. Metoden undantar också valfritt en datatupel (igen, en Object representerar alla datafält) för kanten.

Här är ett enkelt exempel för att skapa NodeSprites för en tabelluppsättning, förutsatt att vi har en uppsättning dataobjekt:

var lista: Array; // en uppsättning dataobjekt som vi redan har laddat var data: Data = new Data (); // en ny databehållare för varje (var o: Objekt i listan) {data.addNode (o); }

Resultatet är a Data objekt fyllt med visuellt DataSprite (noder eller kanter) instanser.
I praktiken behöver du inte alltid fylla i den visualiserade data manuellt. Att skapa en Data objekt för att visualisera en laddad datauppsättning, kan du ofta använda en bekvämhetsmetod istället. De Data.fromArray() funktion skapar en Data exempel för tabelldata som lagras som en uppsättning ActionScript-objekt, medan Data.fromDataSet() metod skapar på samma sätt en Data instans från en laddad DataSet objekt.

Konstruera en visualisering

Låt oss nu sätta ihop allt för att börja göra visualiseringar. De Visualization klass representerar en enda visualisering, inklusive visuella märken (lagrade i en Data exempel) och axlar. För att skapa en visualisering laddar vi en datamängd, lägger till data i en visualisering och ställer in operatörer som bestämmer hur data ska visualiseras. Här är ett exempel. Titta först över koden och läs vidare för att förstå vad varje del gör.

paket {import flare.data.DataSet; importera flare.data.DataSource; importera flare.scale.ScaleType; import flare.vis.Visualisering; importera flare.vis.data.Data; importera flare.vis.operator.encoder.ColorEncoder; importera flare.vis.operator.encoder.ShapeEncoder; importera flare.vis.operator.layout.AxisLayout; importera flash.display.Sprite; importera flash.events.Event; importera flash.geom.Rectangle; importera flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] allmän klass Tutorial utökar Sprite {private var vis: Visualization; handledning för offentlig funktion () {loadData (); } privat funktion loadData (): ogiltigt {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, funktion (evt: Event): void {var ds: DataSet = loader.data as DataSet; visualize (Data.fromDataSet (ds));}); } visualisera privat funktion (data: Data): ogiltig {vis = ny Visualisering (data); vis.bounds = ny rektangel (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (ny 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 (); }}}

Låt oss titta på varje metod.
Konstruktören är enkel: den kallar bara loadData metod.
Smakämnen loadData metoden skapar en ny datakälla och laddar den med de metoder som beskrivits tidigare. I det här fallet rapporteras datamängden mord i Los Angeles län 2007, lagrad i tabbavgränsat format. När belastningen är klar läggs de laddade datatublarna till a Data instans med hjälp av fromDataSet bekvämlighetsmetod. Under huven resulterar detta i skapandet av NodeSprites för att visualisera varje datapost. Slutligen, visualize metod kallas.
Smakämnen visualize metoden ställer in visualiseringen. Här är vad som händer i varje steg:

• Del 1: Initiering
  • En ny visualisering skapas för data
  • Vi sätter gränserna för visualisering. Detta bestämmer layoutområdet.
  • Vi ställer in x och y position för vår visualisering och lägg till visualiseringen i visningslistan.
• Del 2: Specificera visuella kodningar
  • Vi använder en axellayout, placerar "datum" på x-axeln och "ålder" på y-axeln. De AxisLayout operatören konfigurerar också automatiskt axlarna för visualisering. Vi använder syntaxen "data.date" för att beteckna datavariablerna, eftersom de finns i NodeSprite's data fast egendom.
  • Vi lägger till en färgkodning så att en nods linjefärg representerar variabeln "orsak" (dödsorsak). Vi säger också till färgkodaren att värdena för variabeln "orsak" representerar kategorier (ScaleType.CATEGORIES). Färgkodaren använder denna information för att automatiskt välja en lämplig färgpalett. Som vi kommer att se snart kan du också tillhandahålla din egen färgpalett.
  • Vi lägger till en formkodning, så att ett objekts form representerar offrets ”ras”.
  • Vi ställer in standardegenskaper - vi ställer in nodernas fyllningsfärg till full transparent och ställer in linjebredden till 2 pixlar.
  • Slutligen kallar vi update metod. Detta kör alla operatörer i ordning.

Uppdatera en visualisering

När en visualisering har skapats kanske vi vill uppdatera den. Till exempel kanske vi vill ändra färgkodningen för att istället visualisera människors kön.
Låt oss först lägga till en ny metod i klassen:

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

Den här metoden:

1. Hämtar den andra operatören (operatören vid index 1) och kastar den till a ColorEncoder
2. Ändrar source egenskap för färgkodaren att använda variabeln "data.sex"
3. Ställer in en ny färgpalett (i det här fallet röd för kvinnor, blå för män - färgordningen matchar alfabetisk ordning på etiketterna)
4. Animerar ändringen genom att ringa uppdatering med en Transitioner inställd på en två sekunders animering. De vis.update metoden returnerar Transitioner, så att vi kan ringa play på returvärdet för uppdateringen. (Obs! Du kan också utelämna Transitioner och bara skicka siffran 2 som ett argument till update. Ett nytt Transitioner skapas automatiskt och returneras.)

Nu måste vi ansluta applikationen så att vi interaktivt kan utlösa uppdateringen. För att göra det, lägg till följande kod till konstruktören:

 // lägg till en klickbar etikett var-knapp: TextSprite = ny TextSprite ("Färg efter kön"); addChild (knapp); knapp.x = 710; knapp.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): void {colorByGender ();});

Denna kod:

1. Skapar en ny textetikett (TextSprite är en hjälpklass från flare.display paket)
2. Lägger till etiketten i applikationen och ställer in dess position
3. uppsättningar buttonMode till true (detta gör att en handmarkör visas när du håller musen över etiketten)
4. Lägger till en eventlyssnare som utlöses när man klickar på etiketten. Vi lägger till en återuppringningsfunktion som anropar colorByGender metod.

För att ovanstående kod ska fungera måste vi inkludera dessa ytterligare importuttalanden högst upp i filen:

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

Nu ska du kunna kompilera och köra applikationen. Om du klickar på "Färg efter kön" -etiketten bör animeringen av ändringen av färgkodning animeras.

Nästa steg

Ovanstående exempel visar grunderna i Flash och Flare-biblioteket, men det finns många fler funktioner som ännu inte har täckts. Framöver rekommenderar vi (a) att inspektera både Flash och Flare API dokumentation för att få en uppfattning om alla tillgängliga klasser, och (b) gräva igenom Flare-demos för att se hur samma principer som visas här kan användas för att konstruera ett antal andra visualiseringar. Eller, ännu bättre, gräva igenom Flare-källkoden för att lära dig vad som händer under huven.
För att hjälpa till i denna process, här är en allmän översikt över delpaketen i flare.vis:

• flare.vis.axis: tillhandahåller axlar, etiketter och rutnät
• flare.vis.controls: interaktionshanterare för val, zoomning och mer
• flare.vis.data: visuella objekt som representerar dataelement
• flare.vis.data.render: pluggbara renderare som ritar DataSprites
• flare.vis.events: händelsetyper som används i flare-ramverket
• flare.vis.legend: representerar legender för att beskriva visuella kodningar
• flare.vis.operator: byggstenar för att definiera visualiseringar
• flare.vis.palette: paletter för värden för färg, form och storlek
• flare.vis.util: allmänna användarklasser

Du borde nu veta tillräckligt för att förstå demos i flare.demos paket. Lek gärna med, modifiera, kopiera, klistra in och bygga på demorna för att få en bättre förståelse för hur Flash och Flare fungerar.

vänster

Nedladdningar

verktyg

Andra tekniska guider

Support

Källa: https://blokt.com/tool/prefuse-flare