Getting the Most Out of AXIIS
-
Upload
george-cunia -
Category
Documents
-
view
218 -
download
0
Transcript of Getting the Most Out of AXIIS
-
8/7/2019 Getting the Most Out of AXIIS
1/30
Getting the most out of
Michael VanDaniker
http://michaelvandaniker.com/blog/2010/03/10/[email protected]
Twitter: mvandani
http://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiismailto:[email protected]:[email protected]://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiishttp://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiishttp://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiishttp://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiishttp://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiishttp://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiishttp://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiishttp://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiishttp://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiishttp://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiishttp://michaelvandaniker.com/blog/2010/03/10/getting-the-most-out-of-axiis -
8/7/2019 Getting the Most Out of AXIIS
2/30
Who am I?
Data Visualization Manager @ University of
Maryland Center for Advanced Transportation
Technology Laboratory
-
8/7/2019 Getting the Most Out of AXIIS
3/30
Where were going today
Defining Axiis
How Axiis works
Writing custom, data-driven layouts Adding interactivity
Using the pre-built visualizations parts
Tips and tricks
-
8/7/2019 Getting the Most Out of AXIIS
4/30
Some visualizations to think about
-
8/7/2019 Getting the Most Out of AXIIS
5/30
Some visualizations to think about
-
8/7/2019 Getting the Most Out of AXIIS
6/30
What is Axiis?
According to almost any resource
Markup-based data visualization framework
Its not a re-implmentation of the Flex Data VisualizationComponents and its not a component library
-
8/7/2019 Getting the Most Out of AXIIS
7/30
What is Axiis?
Data-driven Degrafa manipulation engine
-
8/7/2019 Getting the Most Out of AXIIS
8/30
Degrafa
Declarative graphics framework
-
8/7/2019 Getting the Most Out of AXIIS
9/30
Axiis in practice
Running map
Smith chart
Buoy monitor Browser statistics visualization
http://www.runningmap.com/?id=163030http://www.flexjunk.com/examples/SmithChartExample/SmithChartExample.htmlhttp://www.twgonzalez.com/demos/SanDiegoSwell/http://www.axiis.org/examples/BrowserMarketShare.htmlhttp://www.axiis.org/examples/BrowserMarketShare.htmlhttp://www.twgonzalez.com/demos/SanDiegoSwell/http://www.flexjunk.com/examples/SmithChartExample/SmithChartExample.htmlhttp://www.runningmap.com/?id=163030 -
8/7/2019 Getting the Most Out of AXIIS
10/30
How Axiis works
Many visualizations are based on two rule sets
Layout rules
Data rules
-
8/7/2019 Getting the Most Out of AXIIS
11/30
How Axiis works
(Get your data ready)
Drop in your data
Describe a layout pattern in MXML Draw a picture using the data and the rules of
the pattern
-
8/7/2019 Getting the Most Out of AXIIS
12/30
How Axiis works
Get your data ready
Arrays and ArrayCollections
Support for transforming XML and CSV
-
8/7/2019 Getting the Most Out of AXIIS
13/30
How Axiis works
Drop in your data
currentDatum
currentIndex
currentLabel
currentValue
-
8/7/2019 Getting the Most Out of AXIIS
14/30
How Axiis works
Describe layout pattern in MXML
GeometryRepeater
PropertyModifier
currentReference
-
8/7/2019 Getting the Most Out of AXIIS
15/30
How Axiis works
Draw a picture using the data and the rules of
the pattern
currentReference
currentDatum
currentLabel
currentIndex
currentValue
-
8/7/2019 Getting the Most Out of AXIIS
16/30
Scales
Mapping a data value to a screen positionvalueToLayout(value,clamp,invert):Number
And reverse
layoutToValue(layout,clamp,invert):*
Types of scales
ContinuousScale
LinearScale LogScale
DateTimeScale
CategoricalScale
-
8/7/2019 Getting the Most Out of AXIIS
17/30
ContinuousScale
myArray = [0,
100,
10,
50];ContinuousScale.valueToLayout
120
75
clamp = true
clamp = false
-
8/7/2019 Getting the Most Out of AXIIS
18/30
ContinuousScale
ContinuousScale.layoutToValue
myArray = [1..100]
25
100clamp = true
120clamp = false
-
8/7/2019 Getting the Most Out of AXIIS
19/30
valueToLayout
CategoricalScale
myArray = [Alpha,
Bravo,
Charlie];
Delta NaN
-
8/7/2019 Getting the Most Out of AXIIS
20/30
CategoricalScale
CategoricalScale.layoutToValue
Charlie
myArray = [Alpha,Bravo,Charlie];
Bravo
Alpha
-
8/7/2019 Getting the Most Out of AXIIS
21/30
Inverted scales
myArray = [Alpha,
Bravo,
Charlie];
-
8/7/2019 Getting the Most Out of AXIIS
22/30
Scales
Custom ranges
minValue, maxValue, minLayout, maxLayout
computedMinimum
computedMaximum
computedAverage
-
8/7/2019 Getting the Most Out of AXIIS
23/30
Hierarchical data visualizations
Child layouts
-
8/7/2019 Getting the Most Out of AXIIS
24/30
Adding interactivity
States
Data tips
Per item MouseEvents Debugging with events
Per layout data filtering
Conditional geometry properties
-
8/7/2019 Getting the Most Out of AXIIS
25/30
Built in visualizations
Axis
ConcentricWedgeLayout
WedgeStack
-
8/7/2019 Getting the Most Out of AXIIS
26/30
Data binding shortcuts
You wouldnt do this:var xyOver2:Number = x * y / 2;
var xyOver3:Number = x * y / 3;
So dont do this:
-
8/7/2019 Getting the Most Out of AXIIS
27/30
-
8/7/2019 Getting the Most Out of AXIIS
28/30
Where does Axiis stand?
Beta 1.1
Compiled with Flex 3.5
Comes with a build of Degrafas Origin branch. Currently not 100% compatible with Flex 4
Get Axiis: http://www.axiis.org/
http://www.axiis.org/http://www.axiis.org/ -
8/7/2019 Getting the Most Out of AXIIS
29/30
Where is Axiis going?
Revamped pipeline - item renderer pattern
Animations
More data processing functionality Flex 4 compatibility
Flex 4 state syntax?
API likely to change, but you can still use it todo something useful now.
-
8/7/2019 Getting the Most Out of AXIIS
30/30
Questions about that?