Visualizing and Analyzing Data with PivotViewer in Silverlight 5Jenn Lin
Senior Test LeadMicrosoft Corporation
What is PivotViewer for?
Explore and InspireFollowing curiosities
Moving through a set of data and exploring hidden or nuanced relationships
Extracting new insights from familiar data
Navigate and ActFinding a needle in a haystack
Comparing a few needles against each other
Making a decision or taking action
PivotViewer Investigates Climate Change
http://gis.team.sdsc.edu/teamimages/
5 Steps for Building a Great PivotViewer App
1. Know your data
A good app…
Visuals
DataVisualsData
Visually rich or Data rich
A great app is visually rich and data rich
Visuals Data
Adding Data to PivotViewer is Easy!In XAML: <pv:PivotViewer x:Name="viewer" ItemsSource="{Binding}“> <pv:PivotViewer.PivotProperties> <pvcore:PivotProperty Id="TickerSymbol"
Options="TextSearchable" PropertyType="Text" Binding="{Binding TickerSymbol}" />
</pv:PivotViewer.PivotProperties></pv:PivotViewer>
In Code:viewer.DataContext = m_stockQuotes.Values;
Treat Data Appropriately
7-10 Facet Categories20 Facet Categories1 Facet Category
Deal with dynamic dataBad: changing data in your collection without notifying the user
BetterSet a timer indicating when the data will be refreshed
BestHave an indicator that data in the app is staleProvide a button for refreshing data
2. Don’t ignore visuals!
What is a tradecard?A tradecard is a visual representation of one item in a PivotViewer collection
What is a tradecard?
No elements Too many elements
XAML TradeCardsNo need for pre-created visuals
Data updates automatically as it changes
Easily render different tradecards at different levels of zoom
Add any content: imagery, deep zoom imagery, text, graphs, etc.
Creating tradecards is easy!
<DataTemplate x:Key="smallTemplate"> <Border Width="64" Height="64" Background="{Binding
ValueChange, Converter={StaticResource colorConverter}}">
<TextBlock Text="{Binding TickerSymbol}" FontSize="20" /> </Border> </DataTemplate>
3. Take advantage of semantic zoom
Design for Far Away
Dominant Color
Outline
Text
Design for Medium Distances
Icon
Outline
Text
Design for Up Close
Detailed Data
Graph
Outline color
Title
4. Treat large data sets appropriately
Large Data Sets & PivotViewerPivotViewer is optimized for rendering 3,000-5,000 items at one time
Large Data Sets & PivotViewerHave the user pre-sort or pre-filter before viewing items in PivotViewer
Search
OK
Washington, Oregon, California
Search for stores in a certain area or matching a keyword
Large Data Sets & PivotViewerTake advantage of data hierarchy to build linked collections
Large Data Sets & PivotViewerConsolidate data with similar characteristics into one PivotViewer item
Large Data Sets & PivotViewerReplace the FilterPane with your own custom implementation
5. Build a full app around your PivotViewer control
Styling and CustomizationFull color and font customization
InfoPane customization
Turn off the FilterPane
ItemAdorners
New and improved events and properties API
When will PivotViewer be available?
AvailabilityDownlad the RC of Silverlight 5:http://www.silverlight.net/learn/overview/what%27s-new-in-silverlight-5
Demos are here:www.microsoft.com/silverlight/pivotviewer
Recommended blog write up:http://tonychampion.net/blog/index.php/2011/09/to-cxml-or-not-to-cxml/
Thank You!Questions?