Visualizing and Analyzing Data with PivotViewer in Silverlight 5

1. Visualizing and Analyzing Data with PivotViewer in Silverlight 5 Jenn Lin Senior Test Lead Microsoft Corporation

2. What is PivotViewer for?

3. Explore and Inspire • Following curiosities • Moving through a set of data and exploring hidden or nuanced relationships • Extracting new insights from familiar data

4. Navigate and Act • Finding a needle in a haystack • Comparing a few needles against each other • Making a decision or taking action

5. PivotViewer Investigates Climate Change http://gis.team.sdsc.edu/teamimages/

6. 5 Steps for Building a GreatPivotViewer App

7. 1. Know your data

8. A good app… Visuals Data Data Visuals Visually rich or Data rich

9. A great app is visually rich and data rich Visuals Data

10. 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;

11. Treat Data Appropriately 1 Facet Category 20 Facet Categories 7-10 Facet Categories

12. 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

13. 2. Don’t ignore visuals!

14. What is a tradecard? • A tradecard is a visual representation of one item in a PivotViewer collection

15. What is a tradecard? No elements Too many elements

16. 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.

17. 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>

18. 3. Take advantage of semantic zoom

19. Design for Far Away Dominant Color Text Outline

20. Design for Medium Distances Icon Text Outline

21. Design for Up Close Title Detailed Data Graph Outline color

22. 4. Treat large data sets appropriately

23. Large Data Sets & PivotViewer • PivotViewer is optimized for rendering 3,000-5,000 items at one time

24. 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

25. Large Data Sets & PivotViewer • Take advantage of data hierarchy to build linked collections

26. Large Data Sets & PivotViewer • Consolidate data with similar characteristics into one PivotViewer item

27. Large Data Sets & PivotViewer • Replace the FilterPane with your own custom implementation

28. 5. Build a full app around your PivotViewer control

29. Styling and Customization • Full color and font customization • InfoPane customization • Turn off the FilterPane • ItemAdorners • New and improved events and properties API

30. When will PivotViewer be available?

31. 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/

32. Thank You!Questions? jenndox@microsoft.com