visualizing and analyzing data with pivotviewer in silverlight 5

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?

jenndox@microsoft.com