-
Programming Tutorial:
Flare Visualization Library
CS448b Data Visualization
Jason Chuang
January 30, 2008
-
Overview
• Basics– Flex programming environment– #1: Display lists in
Flash
• Flare Library– #2: Animation– #3: Visualization: Scatter plot–
#4: Visualization: Graph lay-out
-
Flash CS4
• Illustrator + Timeline
-
Flex: Programming for Flash
• ActionScript
-
Setting up Flex
• Adobe Flex Builder– http://www.adobe.com/products/flex/– Built
on Eclipse IDE– Register for education license
• Flare Library– http://flare.prefuse.org/– Derived from Prefuse
library (Java)
http://www.adobe.com/products/flex/�http://flare.prefuse.org/�
-
Hello World
-
Display list in Flash
Stage
Your Flex ActionScript class
TextSprite“Hello World”
-
Display list in Flash
Stage
Your Flex ActionScript class
Container
Graphics Text Sprite
-
Display list in Flash
Stage
Your Flex ActionScript class
Container
Graphics Text Sprite Container
Sprite Sprite
-
#1: Basic demo
-
Example Code #1
-
Example Code #1
• Display lists = Scene graphs– Root = Your ActionScript class–
Add elements to your application with addChild()
• Quick short-cuts– Compiler parameters– Library import
-
#2: Animations
-
“flare.animate” package
• Tween• Easing• Parallel, Sequence• Transitioners
-
Example Code #2
-
Example Code #2
• Single animation as Tween• Fine tune timing with Easing•
Create composite transitions
– Parallel, Sequence• Automate and schedule transitions
– Transitioners
-
#3: Scatter Plot
-
Import data and visual properties
• “flare.data” package– DataSource– DataSet
• “flare.vis” package– Visualization– Operators
-
Example Code #3
-
Example Code #3
• Import data– tab-delimited, JSON, GraphML
• Visualization class– Scatter plot– Operators to modify
appearance
• Axis Layout, Color, Shape
• Tooltips• Event Listeners
-
#4: Graph Layout
-
Controls
• “flare.vis” package– Visualization– Operators– Controllers
-
Example Code #4
-
Example Code #4
• Visualization class– Graph lay-out
• Node-link tree layout• Force directed layout• Labels
– Controls• Drag• Pan & Zoom• Tree expansions
-
Conclusion
• Basics– Flex + Flare– #1: Stage and Sprites in Flash
• Flare Library– #2: Animations using Transition and
Transitioners– #3: Import data, Visualization, Operators– #4:
Controls
• Questions?
Programming Tutorial:�Flare Visualization LibrarySlide Number
2OverviewFlash CS4Flex: Programming for FlashSetting up FlexHello
WorldDisplay list in FlashDisplay list in FlashDisplay list in
Flash#1: Basic demoExample Code #1Example Code #1#2:
Animations“flare.animate” packageExample Code #2Example Code #2#3:
Scatter PlotImport data and visual propertiesExample Code #3Example
Code #3#4: Graph LayoutControlsExample Code #4Example Code
#4Conclusion
