320 likes | 545 Views
Visualizing and Analyzing Data with PivotViewer in Silverlight 5. Jenn Lin Senior Test Lead Microsoft Corporation. What is PivotViewer for?. Explore and Inspire. F ollowing curiosities M oving through a set of data and exploring hidden or nuanced relationships
E N D
Visualizing and Analyzing Data with PivotViewer in Silverlight 5 Jenn Lin Senior Test Lead Microsoft Corporation
Explore and Inspire • Following curiosities • Moving through a set of data and exploring hidden or nuanced relationships • Extracting new insights from familiar data
Navigate and Act • Finding 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/
A good app… Visuals Data Data Visuals 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 1 Facet Category 20 Facet Categories 7-10 Facet Categories
Deal with dynamic data • Bad: changing data in your collection without notifying the user • Better • Set a timer indicating when the data will be refreshed • Best • Have an indicator that data in the app is stale • Provide a button for refreshing data
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 TradeCards • No 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>
Design for Far Away Dominant Color Text Outline
Design for Medium Distances Icon Text Outline
Design for Up Close Title Detailed Data Graph Outline color
Large Data Sets & PivotViewer • PivotViewer is optimized for rendering 3,000-5,000 items at one time
Large Data Sets & PivotViewer • Have the user pre-sort or pre-filter before viewing items in PivotViewer Search OK Search for stores in a certain area or matching a keyword Washington, Oregon, California
Large Data Sets & PivotViewer • Take advantage of data hierarchy to build linked collections
Large Data Sets & PivotViewer • Consolidate data with similar characteristics into one PivotViewer item
Large Data Sets & PivotViewer • Replace the FilterPane with your own custom implementation
Styling and Customization • Full color and font customization • InfoPane customization • Turn off the FilterPane • ItemAdorners • New and improved events and properties API
Availability • Downlad 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? jenndox@microsoft.com