Since this is my first post after over one month break I own an explanation. I have two excuses: one is of course vacations and the other one is really nice. Together with the colleagues of mine, I had the pleasure to work on a new control – TreeMap - that is included in the next release of Silverlight Toolkit.

 

 

I perceive the introduction of this control as especially important because it enables you to easily visualize more than one dimensional, correlated data in a way that is attractive and understandable to a user without any statistician or mathematical background.

New concepts in TreeMap control

Actually I’m going to concentrate on one particular feature that we hope to gather feedback for – Interpolators proposed by Cristian – a developer within our team. Their purpose is to visualize additional dimensions by mapping the particular range in your data to visual representation. Let’s analyze a sample that uses the NHL statistics:

 

        <datavis:TreeMap x:Name="treeMapControl" Grid.Row="1">

            <datavis:TreeMap.Interpolators>

                <datavis:SolidColorBrushInterpolator TargetName="itemBorder" TargetProperty="Background"

                                           DataRangeBinding="{Binding Losses}" From="Blue" To="Magenta" />

                <datavis:DoubleInterpolator TargetName="textBlk" TargetProperty="FontSize"

                                           DataRangeBinding="{Binding GoalsFor}" From="8" To="15" />

            </datavis:TreeMap.Interpolators>

 

            <datavis:TreeMap.ItemDefinition>

                <datavis:TreeMapItemDefinition ItemsSource="{Binding Children}" ValueBinding="{Binding Points}" ChildItemPadding="1">

                    <DataTemplate>

                        <Border x:Name="itemBorder" BorderBrush="Black" BorderThickness="1" ToolTipService.ToolTip="{Binding ToolTip}">

                            <TextBlock x:Name="textBlk"  Foreground="White" Text="{Binding Name}" VerticalAlignment="Center" Margin="2,2,0,0"

                                       TextWrapping="Wrap" TextAlignment="Center"/>

                        </Border>

                    </DataTemplate>

                </datavis:TreeMapItemDefinition>

            </datavis:TreeMap.ItemDefinition>

        </datavis:TreeMap>

 

We visualize three dimensions here:

·         The size of the rectangle represents the number of points for each team - ValueBinding="{Binding Points}"

·         The background color of each rectangle color reflects the number of losses - SolidColorBrushInterpolator

·         The font size used for team name represents the number of goals gained - DoubleInterpolator

They may look familiar to you. Yes – they’re mimicking to some degree KeyFrames used in storyboards. It makes this API both easy to use and familiar at the same time.

There are also extra flexibilities in Interpolators.

·         By default the ActualDataMaximum and ActualDataMinimum for your data are automatically calculated and you can be blissfully unaware of their existence, however you can fix their values using DataMaximum and DataMinimum properties. It may come useful if for example you visualize school grades let’s say in range 1 to 100 but two classes in your school got marks raging between 60-90 and 10-50 respectively. Probably you don’t want to use for ex. the same backgroung color for 90 in one class and 50 in the other, therefore you can fix color range to be interpolated bosing on 0 to 100 range.

·         Another feature you can be blissfully unaware but you can leverage is interpolation mode. The implicit behavior is that ActualDataMaximum and ActualDataMinimum are calculated and applied on leaf nodes only. No big deal in the example above. But you can introduce extra margin to non leaf nodes and get something like this:

 

 

To extend the interpolation to non leaf nodes you need to set InterpolationMode to AllNodes for a particular interpolator.

What’s coming next?

There are several points we considering to be included in the next release:

·         HSL and other modes for color interpolation

·         Design tools improvements – better Blend support

·         An encapsulating control adding support for zoom and panning

o   Rendering new nodes as you go (zoom and / or pan). On one hand that complicates the code for the control. On the other, this theoretically can enable you to create a TreeMaps with hundreds of thousands of nodes. Imagine for example the world population with levels such us continents, countries, regions, cities, districts.

·         Look into possible APIs to get the list of all selected nodes

·         New interpolators – for ex. border thickness, gradient brush…

·         Investigate ways to further improve rendering performance

·         One more killer feature but this I would like to remain a surprise J

While I have a particular inclination towards some of the point above, the list above is not by all means closed. If you have any particular requirements please give me a shout or start a discussion below. You can expect some more samples from David Anson soon.