6 creating data visualizations for analysis

37
C H A P T E R 6 ■ ■ ■ 165 Creating Data Visualizations for Analysis In this chapter, we continue our conversation about data visualizations. The previous two chapters introduced you to the fundamentals of using infographics to present data visually. However, we did not cover the required steps and best practices to design visualizations as good tools for BI analysis. The focus on this chapter is creating simple and effective data visualizations that are best suited for visual analysis. While reading this chapter, you will understand that not all visualizations deliver insight in the same manner. Furthermore, sticking to simple visualization guidelines will allow your BI offering to deliver insight more effectively. The visualizations that we will compare in this chapter have been created in Silverlight (unless otherwise noted). While reading this chapter, you will see that the Silverlight framework is capable of creating visual analytical tools that compare with enterprise-level business graphics software. This should amplify the incentive to use Silverlight as a potential environment for BI visual analytics. This chapter includes a variety of Silverlight code samples embedded within the chapter. Therefore, a separate coding scenario was not included in this chapter. The following table outlines the specific goals that different types of readers will achieve by reading this chapter.

Upload: crazydanny

Post on 16-Jul-2015

193 views

Category:

Business


1 download

TRANSCRIPT

Page 1: 6 creating data visualizations for analysis

C H A P T E R 6

■ ■ ■

165

Creating Data Visualizations for Analysis

In this chapter, we continue our conversation about data visualizations. The previous two chapters introduced you to the fundamentals of using infographics to present data visually. However, we did not cover the required steps and best practices to design visualizations as good tools for BI analysis.

The focus on this chapter is creating simple and effective data visualizations that are best suited for visual analysis. While reading this chapter, you will understand that not all visualizations deliver insight in the same manner. Furthermore, sticking to simple visualization guidelines will allow your BI offering to deliver insight more effectively.

The visualizations that we will compare in this chapter have been created in Silverlight (unless otherwise noted). While reading this chapter, you will see that the Silverlight framework is capable of creating visual analytical tools that compare with enterprise-level business graphics software. This should amplify the incentive to use Silverlight as a potential environment for BI visual analytics.

This chapter includes a variety of Silverlight code samples embedded within the chapter. Therefore, a separate coding scenario was not included in this chapter.

The following table outlines the specific goals that different types of readers will achieve by reading this chapter.

Page 2: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

166

Audience Goals

Silverlight developers Discover the basics of the science behind designing proper visualizations for data analysis.

Understand the available Silverlight visualizations and how they can apply BI 2.0 analysis concepts.

Business intelligence professionals

Understand why Silverlight is a good choice to design data visualizations.

Extend your knowledge of data visualizations for analysis.

Strategic decision makers Work out if your visualizations are delivering the proper insight. Does your visualization package need an upgrade?

See if Silverlight is the right choice for your BI offering to deliver data visualizations for analysis scenarios.

Choosing a Visualization for Analysis As you saw in the previous chapter, visual graphics can be used as tools to deliver the insight more quickly than looking at lists of numbers. However, the previous chapter did not focus on creating data visualizations whose purpose was to provide specific analytical value. This chapter aims to cover the facets of creating data visualizations for the purpose of delivering quick data analysis insight.

You have probably heard the saying “A picture is worth a thousand words.” The reason this cliché makes sense is because the brain has an ability to understand visuals more quickly than lists of text. Therefore, using visualizations for analysis leverages the brain’s ability to process visuals quickly.

When designing tools for analysis, choosing the appropriate visualization depends on what type of knowledge we want to be able to deliver. Therefore, over the years many graphical representations have been accepted as a standard mechanism for representing data relationships and comparisons. For example, a pie chart has been generally accepted as a great way to show data that is part of a whole. Everyone with basic business acumen can read, understand, and analyze a pie chart. However, you will see later on in this chapter that choosing the appropriate visualization for data analysis is not always as simple as picking one that looks professional.

Figure 6-1 shows the available charting (visualization options) available to an Excel user. Note that there are over 70 different chart visualizations available.

Page 3: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

167

Figure 6-1. Various charting visualizatons available in Microsoft Excel 2007

In Report Builder 2.0 (a report authoring tool for SQL Server 2008), there is a similar amount of charting options. In addition to providing charting visualizations, Report Builder 2.0 includes a number of gauges that can be used for data analysis as well. This is shown in Figure 6-2.

Page 4: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

168

Figure 6-2. Gauge visualizations available in SQL Server Reporting Services Report Builder 2.0

You might be asking yourself why you should care about data visualizations in these products. Both Excel and Report Builder are popular BI tools that provide rich visualizations. As you can see, there are a lot of visualization options to choose from in these products. Which visualizations you pick would probably depend on the data or type of analysis you were trying to do. Even then, trying to narrow down the ideal visualization from over 90 default choices can be difficult. BI professionals have gone through this process numerous times and eventually this becomes second nature. The same science that is behind choosing the suitable data visualization in a report, dashboard, or spreadsheet applies to Silverlight BI 2.0 applications.

Designing a BI 2.0 data visualization that delivers insight effectively, simply, and quickly requires much more than binding a data set to any visualization that looks appealing or cool. Over the years, best practices have been defined on which visualizations make the most sense for the delivery of different types of data analysis.

Choosing an incorrect visualization can cause a number of issues for a BI application. I covered a lot of these challenges in Chapter 1. However, it does not take a seasoned BI professional to understand that if you took the same data set and applied to a variety of visualization options, this data would tell an entirely different story. For example, take a look at Figure 6-3. In this figure, you can see four different charting visualizations bound to the same data set showing four quarters of sales information. Each visualization illustrates a picture of the sales information differently. A user looking at these visualizations could interpret the data differently and walk away with a different perception of the information. The example illustrated in Figure 6-3 is pretty simple. However, more complex visualizations try to answer more than one question, include interactivity, or include custom graphics. In those cases, choosing the proper baseline data visualization becomes even more important when you want to apply BI 2.0 governance (simple to use, easy to understand, requires little or no training, easy enough for an average user, etc.)

Page 5: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

169

Figure 6-3. Four simple charting visualizations can tell a different story even if they are bound to the same

data set.

Determining Types of Analysis for Silverlight Visualizations This section will discuss choosing appropriate data visualizations for common data analysis scenarios. This section will focus on the data visualization options available in the Silverlight SDK, Silverlight Control Toolkit, and third-party add-ons. In the previous chapter, I touched on the basics of what Silverlight technology can offer for data visualizations. However, I did not go into the details of applying different visualizations to data analysis.

Covering ambiguous design, programming, or architecture topics is always difficult in absolute terms because the typical answer is “it depends” with lots of caveats. I personally do not like “it depends” answers without a full description or guide. Therefore, the goal of this section is to provide you with a guide for when to choose common data visualizations for a Silverlight BI application.

Page 6: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

170

■ Note This section covers this topic from the standpoint of best practices and keeping it simple for BI 2.0 software. However, there is a science behind a lot of these best practices, dealing with how the brain perceives the colors, visual objects, layout, size, and so on, and translates them into trends, comparisons, and scale. There are entire books dedicated to explaining visual analysis with scientific methodology. If you are interested in this, please visit the companion web site (www.silverlightbusinessintelligence.com) for these detailed resources.

Comparing Parts of a Whole Parts of-a-whole analysis is done when you have multiple data objects that make up an entirety together. For example, if I have a company that sells five products, the sales summed up for each individual product make up a whole. I could illustrate the products in a data visualization that would allow a user to compare the individual products to each other using a simple pie chart visualization.

A pie chart is one of the most popular parts-of-a-whole visualization techniques. The structure of the visualization lends itself to displaying and comparing parts effectively. Figures 6-3 and 6-4 include examples of pie charts.

A typical pie chart that is used in parts-of-a-whole comparison includes the following.

• Slices of the pie represent individual parts.

• The area of each slice is representative of the part of the whole in the data set.

• Each slice can be identified quickly using a color legend.

• Hovering over a slice provides a tool tip that usually includes a value and/or label.

Optional features of pie charts include the following:

• Annotations for the data to be displayed with each slice

• Drill-through capability (clicking on a slice displays details data)

• A grid with the source data set (in addition to or in lieu of a legend)

Pie charts are usually the starting point for a visual designer or a BI professional. It is usually a great starting point because, as mentioned before," pie charts are readily understood by almost all users. Furthermore, a pie chart delivers insight on part-to-whole analysis very effectively.

Pie charts are effective visualizations when these conditions are met:

• There are no more than six to ten parts to visualize (depends on the size of the pie slices).

• Pie slices are large enough to be noticeable when rendered in a pie chart.

• Colors can be used effectively to distinguish slices.

Pie chart visualizations are an excellent choice when the data fits the mold of visualization. However, in data-driven applications, this is not always the case. Figure 6-4 illustrates two scenarios where pie chart visualizations make terrible implementation choices of part-to-whole analysis. On the left-hand side, we see a pie chart that includes slices that are barely legible. On the right-hand side, we

sstefanov
Highlight
Page 7: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

171

see a pie chart that includes so many slices that it makes finding the appropriate slice within the legend very difficult.

Figure 6-4. Pie chart visualizations with small pie slices or a large number of slices can hamper visual

analysis.

Following are some of the challenges of using pie chart visualizations:

• The slices of a pie chart must add up to 100 percent. By definition, a pie (circle) cannot represent more than 100 percent correctly. However, software charting solutions are often forgiving, and this causes designers to improperly expose the dynamic data in a pie chart. For example, a 50 percent pie slice that represents a 120 percent total is going to take less than half of the area (which is clearly incorrect visually).

• Very small slices can be hard to see in a pie chart.

• Small slices can make it frustrating for the user to get additional information or perform an action (e.g., hovering to see a tool tip or clicking for drill-down).

• Large number of slices can degrade analysis and cause annotations (labels) to overlap.

• Pie charts rely on colors to clearly identify slices. If there are a large number of slices or a color cannot be used (e.g., when printing to paper), this will negate using a color-based legend. Furthermore, the color requirement could cause problems for users that are color-blind.

The challenges with pie charts are further complicated with dynamic data. During prototype, development, and testing phases, pie chart visualizations may look great and professionally describe the data. However, when it comes time to bind the chart to production data, you may encounter issues such as those shown in Figure 6-4.

Page 8: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

172

One way to mitigate the uncertainty of how data may look inside a pie chart is to provide a secondary view of the data. This could be visual or in a list format. Figure 6-5 shows the same data as the Company Expenses pie chart (Figure 6-4) accompanied by a data grid for additional information. Another technique is to provide annotations (labels) on the pie chart itself. This technique works great for simple pie charts. However, annotations tend to overlap and become hard to read when there are a lot of smaller pie slices shown in the pie chart.

■ Note The Silverlight Control Toolkit does not provide annotations (labels) for charts out of the box. The chart control can be extended with annotations; however, it is not very straightforward. For examples on how this can be done, please visit the companion web site.

Figure 6-5. A Silverlight pie chart visualization accompanied by a data grid can provide a secondary view

into the data being presented.

Page 9: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

173

Providing a secondary view of data does not solve the problem of the pie chart visualization. Secondary views are a good approach when a pie chart will suffice and the view is only needed as a backup. However, the nature of dynamic data can cause the pie chart to be useless for analysis some of the time. In those cases, we need to investigate alternatives that can provide better visual results.

When comparing parts of a whole, the individual items are discrete pieces that are mutually exclusive. From looking at our example data (Figure 6-5), building costs are independent of employee salaries. Since we can treat individual items independently, we can look at visualizations that facilitate the same meaning in the data. Another type of visualization that can be used for part-to-whole analysis is a bar or column chart. Each bar or column represents an individual item. The size (length) of the column illustrates the value of the item that is being compared. Therefore, as the items are rendered on the screen, their individual sizes can be compared to each other. Bar or column charts are usually used to compare the items to each other. However, with small tweaks to the axis, we can use the bar or column visualizations to compare the parts of a whole.

The Silverlight Control Toolkit supports both bar and column series visualizations for the chart. Furthermore, custom styles and properties can be set to override the default behavior of the charts to enhance it for analysis. Figure 6-6 displays the data for the Company Expenses visualization in a bar chart.

Figure 6-6. A Silverlight bar chart visualization can be used to effectively compare parts that constitute a

whole.

Page 10: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

174

Take a minute and compare Figure 6-5 and Figure 6-6. Which one do you think your users would prefer to use for visual analysis? In my opinion, the bar chart visualization provides a cleaner and simpler view into the data. Furthermore, I believe that analytical insight can be reached faster from the bar chart visualization. Following is a list of advantages that you may have picked up on that distinguish the analytical value of the two visualizations.

• Labels are easily attached to the bar chart. This requires no additional visual cues. A user does not have to look to a legend, read the color, and then locate the color on the pie chart.

• Colors in bar visualizations are optional. There is no need to provide additional colors for the bar chart in Figure 6-6 (unless additional series are presented). In the pie chart visualization, an entire color palette is required.

• Very small bars are more visible and legible than very small pie slices.

• Scale can be dynamically set. This can make very small values appear more prominently in visualization. Note that in Figure 6-6, the scale ends at 35 percent. However, in a pie chart visualization, 100 percent of the pie needs to be displayed.

• In rare situations where the part of the whole is over 100 percent, bar visualizations excel over pie chart visualizations. For example, visualizing a budget that is 20 percent over previous estimates (120 percent) can easily be done in bar chart visualizations.

• Ordering the items in ascending or descending order can make analysis even easier.

The key point to remember in part-to-whole analysis is to provide an easy way for the user to visually compare items and deliver insight on the comparison.

Pie charts are a good tool to use when you know the individual slices number less than about nine, there are no very small values, colors can be used, and the whole adds up to 100 percent exactly. Some of the problems with pie chart visualizations can be mitigated by providing a list view of the data. However, if the dynamic data does not meet the criteria for a pie chart, bar visualizations are a great alternative for part-to-whole analysis. Obviously, there are other visualizations that are good for comparing items as well. For example, scatter plots can be used effectively to compare parts of a whole.

Applying Chart Styles in Silverlight

If you are not familiar with extending the Silverlight Control Toolkit, you may be wondering how the styled bar chart in Figure 6-6 was achieved. In order to analyze what was changed, take a look at what the chart visualization would have looked like by default. This is shown in Figure 6-7 (note that the title was added).

sstefanov
Highlight
Page 11: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

175

Figure 6-7. The default look of a Silverlight bar chart visualization

There are several key changes that can be seen, when comparing Figure 6-6 and Figure 6-7:

• The series legend has been removed. It is unnecessary for this type of visualization.

• The x-axis (dependent axis) has been formatted to include percentages.

• Grid lines were removed. This is an optional step; however, I feel the chart renders cleaner without grid lines. Grid lines do provide the context of the value for the user. However, in interactive tools such as Silverlight, simply hovering over the bar can provide the exact value being represented.

• The labels were transformed to rotate them 30 degrees. This is completely optional; however, if your data contains long names, this can save a bit of real estate for the labels. If this were a column chart (labels on the bottom), you would have to perform this step, as the labels would overlap horizontally.

Listing 6-1 shows the changes made (shown in bold) to the default bar chart to achieve the look in Figure 6-8.

Page 12: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

176

Listing 6-1. Styling a bar chart visualization to add a formatted axis and orienting the labels

<chartingToolkit:Chart x:Name="mcChart3" Width="600" Background="LightSteelBlue" Title="Company Expenses" Height="400" Margin="0,0,0,100"> <chartingToolkit:BarSeries Title="" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" Margin="0"> <chartingToolkit:BarSeries.DependentRangeAxis> <chartingToolkit:LinearAxis Minimum="0" Maximum=".35" Interval="0.1" Orientation="X"> <chartingToolkit:LinearAxis.AxisLabelStyle> <Style TargetType="chartingToolkit:AxisLabel"> <Setter Property="StringFormat" Value="{}{0:p0}"/> </Style> </chartingToolkit:LinearAxis.AxisLabelStyle> </chartingToolkit:LinearAxis> </chartingToolkit:BarSeries.DependentRangeAxis> <chartingToolkit:BarSeries.IndependentAxis> <chartingToolkit:CategoryAxis Orientation="Y" RenderTransformOrigin="0.5,0.5" SortOrder="Descending" AxisLabelStyle="{StaticResource SlantedLabelStyle}" HorizontalAlignment="Right" /> </chartingToolkit:BarSeries.IndependentAxis> </chartingToolkit:BarSeries> </chartingToolkit:Chart>

The SlantedLabelStyle in the code determines the look of the labels on the y-axis. The code in Listing 6-2 shows the render transform performed in order to achieve the slanted label look.

Listing 6-2. Applying a rotation on the labels to give it a slanted look

<UserControl.Resources> ... <Style x:Key="SlantedLabelStyle" TargetType="chartingToolkit:AxisLabel"> <Setter Property="IsTabStop" Value="False"/> <Setter Property="StringFormat" Value="{}{0}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="chartingToolkit:AxisLabel"> <TextBlock TextAlignment="Right" Text="{TemplateBinding FormattedContent}" Width="150" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,5,5,0" RenderTransformOrigin="1,0.5"> <TextBlock.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="30"/>

Page 13: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

177

<TranslateTransform X="1" Y="1"/> </TransformGroup> </TextBlock.RenderTransform> </TextBlock> </ControlTemplate> </Setter.Value> </Setter> </Style> ... </UserControl.Resources>

This style might seem complex. However, you will be happy to note that it does not have to be coded

by hand. In Expression Blend 3, you can edit the template directly by simply selecting it and creating a blank copy to edit. Therefore, in a chart where you have created a specific chart series, you can edit the label style and apply many different types of formatting to the labels. Figure 6-8 illustrates how to create an editable axis label style for customization inside Expression Blend 3.

Figure 6-8. Selecting Edit a Copy allows you to customize the AxisLabelStyle of a series for a Silverlight

chart.

Page 14: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

178

Once the template is selected, the designer can change the color, layout, or animation, or transform the labels. Figure 6-9 shows the slanted label style selected with the applied transformation. Using the tools in Expression Blend 3 will yield the XAML shown in Listing 6-2.

Figure 6-9. Editing the AxisLabelStyle by applying a 30 degree angle RenderTransform

■ Note The source code for the figures shown in this section is available on the companion web site.

Visualizing Trend Analysis Trend analysis is spotting visual patterns in continuous data sets that signify growth, decline, or stagnation. The visual patterns derived from the analysis are the insight that is delivered from the visualization. Depending on the data, more than one trend could be derived from the data set.

As mentioned, trend analysis depends on continuous data. The makeup of continuous data relies on the data entities being related. For example, “sales of bikes in 2003” can be related and compared to “sales of bikes in 2004.” However, comparing “sales of bikes in 2003” to “salary costs in 2004” makes no sense when trying to derive a trend or analytical pattern. Therefore, continuous data that can be related makes a good candidate to perform trend analysis.

Trend analysis is usually performed over some historical period of time. This can be days, months, years, business quarters, and so on. In a trend visualization, the timeframe usually makes up the x-axis on the chart and is displayed chronologically. If the data is discrete, nonchronological, and cannot be related, other visualizations like a pie chart or bar chart are better options for analysis.

Trends can be visualized a number of ways. Usually, the best candidates for visual trend analysis are line, area, or stack graphs. Silverlight supports visualizing these trend scenarios in the Silverlight Control Toolkit. Silverlight includes both line series and area series charts that can display trend information. In the previous chapter, we covered a coding scenario that showed a line series.

Page 15: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

179

Visualizing trends is one of the simplest forms of analysis that can be done that provides powerful insight to users. If the chart visualization is clear, almost everyone can interpret the information and determine if the trend is growing, declining, or stagnant. Trend analysis becomes more interesting when you are comparing multiple data sets and comparing the trends themselves. Figure 6-10 shows a line chart of three fictional mutual funds and their index prices over the last six months.

Figure 6-10. Comparing three separate trend lines even if their ranges are close can be difficult.

■ Note Bar (column) visualizations can also be used to show trend information. An individual can interpret the difference in bar sizes and derive trending insight. For example, many statistical programs use bar chart visualizations to show distribution trends in data. However, bar chart visualizations are used as secondary options to analyze trends because they do have some drawbacks. The spaces between the bars and bars with similar values can sometimes

Page 16: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

180

make trend analysis a little more difficult than lines. In the Chapter 9 coding scenario, you can find an example of a bar chart used to visualize a statistical distribution that provides secondary trending intelligence.

In Figure 6-10, an individual can probably compare each series and tell you the trend at a given point in time. However, it is difficult to compare the trends to each other. For example, based on Figure 6-10, it isn’t clear which mutual fund performed the best or worst in a given timeframe. In order to give a better comparison, the data needs to be normalized so it can be analyzed easier. Figure 6-11 shows an example of standardizing the same data into percentages. Now we can clearly analyze individual trends of each mutual fund and compare the trends to each other because the data has been standardized to a relatable format.

Figure 6-11. Comparing the three mutual funds after the values have been standardized to a relatable

axis is much easier.

Page 17: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

181

In the preceding example, using the same data set as before, we standardized the chart for percentages. However, the chart can be standardized to an index with a common starting point. For example, all the mutual fund prices could have started at an index value of 100. This would have given the same net effect as standardizing to preceding percentages.

In this section, we looked at one example of improving a data visualization for analysis. However, advanced BI visualizations usually provide additional tools for trending analysis. Some of the key trending features included are:

• The ability to add annotations (labels) to key pieces of information to the chart. As the data is updated with newer information, the annotations keep their “marked” location when the chart is rerendered.

• The ability to zoom in on key trends and isolate specific time spans (x-axis)

• The facility to drill down and isolate key trends

• The potential to analyze data points and autosummarize key changes with the rendered data. Combined with annotations, this can display trend findings on a chart visualization.

• The ability to analyze historical data to predict future trends in predictive analytics modules

The Silverlight framework and the Silverlight Control Toolkit obviously do not come prepackaged with these trending tools. However, as you have seen in many examples, Silverlight can be extended with these analytical features. There are many samples online and in the Silverlight Control Toolkit that demonstrate the power of extending charting visualizations with interactive analytical features.

Extending the Silverlight framework with analytical features for data visualizations can be challenging. Luckily there are high-quality third-party vendors that provide a tested foundation with some analytical functionality built in. Figure 6-12 shows a trend analysis chart provided by ComponentOne that allows zooming and isolating key trends interactively using a dual slider technique.

Page 18: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

182

Figure 6-12. The ComponentOne chart data visualization provides rich interactivity including zooming

in on key trends.

■ Note ComponentOne provides a wide array of visual components for .NET including Silverlight. Their Silverlight offering includes a healthy number of controls. Furthermore, they include controls that are important for visual analysis such as gauge controls, hierarchy controls, charting visualizations, and so on. For more information, see www.componentone.com.

Comparing Metrics to Organizational Goals Measuring metrics against goals is one of the keys of providing analytical value to a data set in an organization. This type of analysis allows an organization to track the success of various metrics that are important to the health of the business.

Key performance indicators (KPIs) have been used in BI software to measure the progress of various metrics against business goals. As the name suggests, KPIs are a set of important metrics that summarize the overall success of an organization’s goals. KPIs have become very popular for BI analysis because they provide quick and visual insight into measurable objectives. KPIs are usually found as features in performance management software, executive dashboards, and scorecard modules.

Page 19: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

183

The key aspect of KPIs is that they are quantifiable and measurable against another value. For example, a KPI described as “Increase customer retention by 10 percent over the next year” can be easily quantified with underlying data. A data visualization can be created to illustrate if the organization is tracking to meet the goals of the customer retention. KPI. The KPI describes what is being measured, the target of success, and the timeframe to achieve success. Furthermore, we can use the timeframe to track if we are progressing positively toward the goal. However, ambiguous and unquantifiable metrics do not make good KPI candidates and often cause confusion. In the previous example, if the KPI had been defined as “Increase customer retention,” it would be an incomplete KPI. We know the metric but we do not know the target (goal) or the timeframe that would indicate a success or failure of the goal. The target and the timeframe of the KPI are left to the interpretation of the user. Having unclear goals and timeframes impairs the ability to do proper analysis.

Comparing metrics to goals (KPIs) can be visualized a number of ways. Classic KPI visualizations include gauges, bullet graphs, and KPI lists. KPIs are not new to BI 2.0, and they have been around for several years now. In fact, most BI software has standardized the way KPIs are surfaced. KPI visualizations have matured to the point that alternatives are presented to compare metrics to goals. For example, bullet graphs are becoming much more popular in BI 2.0 applications as they do not require complex and colorful visuals. Furthermore, they take up much less real estate than traditional KPI gauges and can be used as word-sized visualizations.

■ Note KPI examples visualized with bullet graphs, gauges, and KPI lists can be found on the accompanying web site (www.silverlighbusinessintelligence.com).

Measuring goals can be added to charting visualizations as well. A common technique to add KPI functionality to a chart is to provide a reference line that symbolizes the goal. Figure 6-13 shows an aggregate trend line chart of a player’s HRs (home runs) during the baseball season. Notice that a reference line indicates the season HR goal of the baseball player. A secondary reference line is added that signifies the average for the top ten HR leaders. Using this information, you can see how the baseball player is tracking toward the goal to hit 50 HRs in the season and how he compares to the top ten HR leaders average.

The visualization in Figure 6-13 can be improved by including other visual cues for analysis. For example, a range could be added to show the minimum/maximum number of HRs the player has hit in his career. Making this visualization dynamic with a number of KPIs (reference lines) would be easy. For example, a list box could be added with selections to determine which reference lines to display on the chart. This way, the user could determine how to analyze the data.

Page 20: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

184

Figure 6-13. Tracking an HR trend for a baseball player toward a 50-HR goal. A secondary reference line

compares the player’s trend to the top ten HR leaders average.

The reference lines are simply added as a line series with start point and endpoint that are constant. The data points were removed from the reference lines as they do not denote actual data points on the graph. The chart’s grid lines were also removed so as not to interfere with the horizontal reference lines. The XAML that was used to create this visualization is shown in Listing 6-3.

Listing 6-3. Silverlight XAML used to create the chart in Figure 6-13

<chartingToolkit:Chart Margin="0" Title="John Smith's HRs" x:Name="HRs" Height="500" Width="700"> <chartingToolkit:Chart.Axes> <!-- Y Axis (number of HRs) --> <chartingToolkit:LinearAxis Orientation="Y" Minimum="0" Maximum="90" ShowGridLines="False"> </chartingToolkit:LinearAxis> <!-- X Axis (date axis) -->

Page 21: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

185

<chartingToolkit:DateTimeAxis Orientation="X"> <chartingToolkit:DateTimeAxis.AxisLabelStyle> <Style TargetType="chartingToolkit:DateTimeAxisLabel"> <Setter Property="StringFormat" Value="{}{0:MMMM/dd}"/> </Style> </chartingToolkit:DateTimeAxis.AxisLabelStyle> </chartingToolkit:DateTimeAxis> </chartingToolkit:Chart.Axes> <!-- HR Trend Line --> <chartingToolkit:LineSeries Title="HRs Trend" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}"/> <!-- HR Goal Reference Line --> <chartingToolkit:LineSeries Title="HR Goal" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}"> <chartingToolkit:LineSeries.DataPointStyle> <Style TargetType="Control"> <Setter Property="Visibility" Value="Collapsed" /> </Style> </chartingToolkit:LineSeries.DataPointStyle> </chartingToolkit:LineSeries> <!-- Top Ten HR Leaders Reference Line --> <chartingToolkit:LineSeries Title="Top 10 HR Leaders Avg" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}"> <chartingToolkit:LineSeries.DataPointStyle> <Style TargetType="Control"> <Setter Property="Visibility" Value="Collapsed" /> </Style> </chartingToolkit:LineSeries.DataPointStyle> </chartingToolkit:LineSeries> </chartingToolkit:Chart>

In this example, you can see how adding a simple reference line can provide additional insight to a

charting visualization. The charting visualization doesn’t just show trends anymore; it can now answer comparison questions. Furthermore, in the spirit of BI 2.0 governance, the solution is simple and easy for the average user to interpret.

Comparing Ratios (Before and After) In some cases, you have a small amount of data points that you want to illustrate in a visualization. This is common when surfacing information that is aggregated at a high level. Comparing ratios is one type of analysis that is performed on highly summarized information. In this type of analysis, the goal is to compare the state of the summarized values.

Comparing ratios can be done using several techniques. One obvious choice would be to use a charting visualization. If the values add up to 100 percent, a pie chart could be a good potential choice. A bar chart visualization is also an option to compare two to four values in different states. The lengths of the bars would be used to perceive different ratios.

Creating custom controls to present data in Silverlight is another option for comparing ratios. Figure 6-14 shows a custom data visualization that I created in Silverlight. The data visualization displays the total home values in a fictitious city in the United States over three years. The area of each circle indicates the home values in a given year. Using the area formula for a circle (�r2), we can calculate the

Page 22: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

186

required radius of a circle we should render. This is important as we want the area of the circle to properly represent the value of a given year.

Figure 6-14. A custom data visualization created in Silverlight that can be used for ratio analysis of a

small set of values

The custom infographic provides an effective way to compare ratios over three years. You can clearly see that the sizes of the circles bring an appropriate perspective to the labels of the data.

Text Data Text visualizations play an important role in visual analysis. The combination of being able to position a set of text labels and style the labels can be used as an effective form of visual analysis. It is a misconception that visualizations require glyphs, geometry, charts, or other visual cues in order to be useful. In the previous chapter’s coding scenario, we designed a tag cloud that used color, size, and font weight to highlight the frequency of a metric. A tag cloud can deliver insight very effectively with simply styled text. Improvements to tag clouds include animations and 3D layouts to improve the analysis experience. Another example of visual analysis with text data was shown in Chapter 1 in the form of the Wordle chart.

Page 23: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

187

Geographical Data If your data sets include geographic or spatial data, visualizing them on a geographical map is ideal. As you saw in Chapter 5’s coding scenario, Silverlight can be extended with the Bing Enterprise map control to overlay geographical data on top of various map locations.

The key feature of integrating the map control with Silverlight is the dramatic performance over other Ajax map solutions. The control is much more interactive and performs much better. Furthermore, Silverlight’s powerful multimedia and animation frameworks can easily overlay on top of the maps and provide rich experiences with spatial data sets. For example, charting visualizations can be added on top of the map control.

Hierarchical Data If you have a background in BI, you have probably come across multidimensional or hierarchical data relationships. Hierarchical data sets contain several levels of parent-child relationships that can prove to be difficult to visualize if there is a lot of data or the levels are deep.

Hierarchies with their levels can be visualized a number of common ways. A common way is to visualize a hierarchy using a tree view control. Figure 6-15 shows a Silverlight tree view control that displays three levels of a hierarchy.

Figure 6-15. A Silverlight tree view that displays a three-level hierarchy (sample from the Silverlight

Control Toolkit)

A tree view is an effective way to display labels in a hierarchical fashion. This is similar to how dimension hierarchies would be presented in SQL Server Analysis Services. However, where is the data? In order to display the data, we need to attach additional visualizations (tables, infographics) to display the corresponding selection. Furthermore, displaying hierarchical data that includes many levels is ineffective, as all the nodes have to be expanded. This can take up a lot of real estate.

Page 24: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

188

■ Warning The Silverlight tree view implements hierarchies using the HierarchicalDataTemplate. This template suffers from major performance problems when rendering the control with more than two levels expanded even for a nominal amount of records.

A tree map control is a type of data visualization optimized for showing hierarchical data. The control works by drawing a series of rectangles while nesting them recursively to display parent-child relationships. This technique allows the tree map to present a large number of hierarchy levels and large data sets while not requiring a huge amount of real estate.

A basic tree map uses the size of the rectangles to display a value of a metric. A larger value would be visualized with a larger rectangle. Conversely, smaller values would be shown with smaller rectangles. A tree map control does not stop there. It can also use color to display a secondary metric value. Therefore, a single tree map control can display a nested hierarchy while displaying two metrics using size and color. Figure 6-16 illustrates a tree map control that uses rectangle size to compare the points attained by NHL teams. Furthermore, it uses color to distinguish the rank of the teams.

Figure 6-16. A Silverlight tree map control can present hierarchical data while displaying two metric

values.

Page 25: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

189

As you can see from this visualization, it is pretty easy to isolate outlier data on a tree map. Additional annotations can be provided in the form of labels inside rectangles or as tool tips when the user hovers over a rectangle. This is similar to hovering over a pie slice or a bar in a bar chart.

Even though tree maps are effective, they can be hard to understand initially by a user. This does not make them great BI 2.0 self-service implementations. Tree maps should be the implementation choice for displaying large amounts of hierarchical data with metrics in a visual form.

Other Visualization Types I did not cover every type of data set relationship format in this section. If you are familiar with business visualization or statistical software, there are some visualization types that you might wonder if Silverlight supports.

Silverlight has a rich and growing community that provides a lot of additional visualizations that I did not cover. Furthermore, I cannot stress enough the power of the Silverlight framework. A lot of developers incorrectly treat the framework as an API and figure that they can only call the provided public functionality. Silverlight is built on the .NET Framework which has been designed for extensibility. As you saw in the examples in this section, by simply tweaking styles or leveraging the graphical rendering, we were able to extend basic charts into BI 2.0 data visualizations that were optimized for delivering wisdom. In summary, if Silverlight does not support the exact visualization, do not despair. You can probably replicate it with ease using the Silverlight framework.

Managing Layout with Word-Sized Visualizations So far in this chapter, we have looked at the benefits that data visualizations bring to visual BI analytics. Therefore, it is understandable to want to start incorporating data visualizations in many areas to aid in the delivery of knowledge. However, as you have noticed, many of these visualizations can take up a great deal of real estate on a screen in order to be effective. A BI professional often has to make tough decisions on which visualizations make the most sense. This usually results into the logical splitting of the layout into multiple screens. This can cause the data visualizations to lose some of their effectiveness as the entire analytical picture is delivered in pieces (multiple screen layouts) as the user jumps between layout windows.

Word-sized visualizations are created in order to provide the visual analysis benefits of data visualizations while not having to sacrifice a great deal of real estate. As the name implies, word-sized visualizations are much smaller in size. Their dimensions don’t take up more space than the average sentence fragments. This makes word-sized visualizations very unique as they can be embedded into lists, tables, or spreadsheets with ease. Combining number lists (tables) with a visual context increases the potential insight that can be derived in a smaller footprint.

■ Note Word-sized charts are very popular in BI applications. They are a feature that many people have constantly asked Microsoft to include. Excel 2010 includes word-sized charts in the product. Previously, a user had to go through the trouble of manually designing them into spreadsheets or use third-party products. The only true support for word-sized visualizations came with the micro–progress bars introduced in Excel 2007.

Page 26: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

190

Types of Word-Sized Visualizations In this section, we will cover common examples of word-sized visualizations. Furthermore, we will continue to elaborate on how Silverlight charting controls can be extended to create word-sized visualizations with ease.

Sparklines Sparklines are small, simple word-sized line charts that provide visual context to labels or numerical information. A sparkline’s primary focus is to effectively show a historical trend visually. Therefore, the line itself is the only object required to convey the information. Additional items such as data points, x-axis, and y-axis are omitted on purpose to enhance the focus on the trend patterns in the line graph.

Before discussing sparklines in further detail, let’s take a look at an example of a simple list. Figure 6-17 shows a simple list of web domains with the current number of page views displayed.

Figure 6-17. List of domains and their current number of page views

Note that this list only provides the user the current value. With this list, the user is not aware of past performance, trends, or any other historical information. Contrast this with Figure 6-18 which shows an example of a sparkline graph embedded in the previous list.

Figure 6-18. Sparklines can provide valuable visual context to data labels.

In addition to providing the current value of page views, there is insight gained from embedding a sparkline graph. Not only do you have the current value of the page views for each domain, but you can also see past trends. For example, you can note that domain1.com has been trending downward. In addition, you can see that domain2.com has a repeating pattern of peaks and valleys.

The most important part is that we were able to perform this extra analysis even though both axes have been removed. For this type of analysis, the exact values in the past are not really important to evaluate trending context.

Page 27: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

191

When using sparkline visualizations, it is important to take note of the following guidelines:

• Ensure both the x- and y-axes’ labels are removed to focus the attention on the trend of the line chart rather than the values.

• Do not include the data points.

• Do not include a title or legend.

• Only a single series should be shown at a time.

• Use a label to display the current value (end value) of the sparkline chart. The label can optionally symbolize trend information (e.g., use red to show a downward trend, use an up arrow glyph to show an upward trend, etc.). It is very important to provide context (labels) to sparklines because they usually don’t contain all of the members of a fully rendered chart.

• Do not clutter the sparkline visualization. The most important part of the sparkline is that it gives you the ability to interpret trending information. Do not use background colors, borders, or nonprimary colors for the line chart itself. Essentially, anything that takes away focus from the trend line can take away from the value of a sparkline.

There are exceptions to the sparkline rules just listed. Figure 6-19 shows an example of effectively combining a reference line with a sparkline to highlight a starting location or a KPI. Notice the reference line was styled using a light dotted line that does not take away from the primary trend in a sparkline.

Figure 6-19. Sparklines can be extended with reference lines to provide additional value.

Another exception is that sometimes the axis, if formatted properly, can provide additional context to the range of data. Figure 6-20 shows an example of enabling the y-axis for the domain1.com list item.

Figure 6-20. Sparkline with reference line and y-axis formatted

Page 28: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

192

In the figure, note that the axis is formatting the thousand values with a k symbol. This makes the axis labels unobtrusive with the trend line. However, as you can clearly see, the sparkline is starting to get a little busy. If you start making exceptions to the sparkline guidelines, ensure that what you add is of analytical value. It would make no sense to enable the y-axis labels if the range is not going to provide additional insight. Furthermore, the sparkline sizes may differ for your visualization requirements. Larger sparklines may have the real estate for you to add additional items such as axis labels, reference lines, and annotations.

■ Note The term sparkline is often used as an umbrella term for all word-sized graphics. If you search the term sparkline on the Internet, you will often see word-sized bar charts, pie charts, bullet graphs, whisker charts, and so on included in this term. Sparklines were the original micro-sized visualizations, and others have followed. This is why you see the term sparkline to describe all types of word-sized graphics. In my opinion, the term sparkline specifically describes word-sized line charts. Other word-sized visualizations have individual names, and it’s incorrect to use the term sparkline to describe them all.

Applying Sparklines in Silverlight

All the sparklines in the previous figures were rendered in Silverlight. As you can see, Silverlight charts can be extended with styles in order to render sparkline visualizations. The framework did not require special add-ons to be able to render these charts.

Looking back at the previous figures, note that the following items were changed in order to render the chart as a word-sized visualization in Silverlight:

• Chart dimensions were made small (word-sized).

• The x- and y-axes do not display values.

• The line series thickness was made thinner.

• The line series does not display data points.

• The line series is a primary black color.

• Items like the border, title, and background are not displayed.

• A reference line was added by a secondary line series. The secondary line series has a reduced opacity level so it does not conflict with the primary line series. Furthermore, the line series is rendered using a dashed (dotted) brush.

Listing 6-4 shows the code changes in bold in order to render a sparkline chart.

Page 29: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

193

Listing 6-4. Silverlight XAML code that renders a sparkline graph

<chartingToolkit:Chart Width="100" Height="25" Margin="0"> <!-- Hide the border edges --> <chartingToolkit:Chart.Template> <ControlTemplate TargetType="chartingToolkit:Chart"> <chartingPrimitivesToolkit:EdgePanel x:Name="ChartArea"> <Grid Canvas.ZIndex="-1" /> </chartingPrimitivesToolkit:EdgePanel> </ControlTemplate> </chartingToolkit:Chart.Template> <!-- Format the axes for a sparkline --> <chartingToolkit:Chart.Axes> <chartingToolkit:DateTimeAxis Orientation="X" MaxHeight="1" Opacity="0" Minimum="2008/07/07" Maximum="2008/09/08"/> <chartingToolkit:LinearAxis Orientation="Y" Opacity="1" Minimum="20" Maximum="85"/> </chartingToolkit:Chart.Axes> <!-- Reference Line Series --> <chartingToolkit:LineSeries ItemsSource="{Binding Domain3ReferenceLine}" IndependentValueBinding="{Binding Date}" DependentValueBinding="{Binding NumberOfHits}"> <!-- DataPointStyle --> <chartingToolkit:LineSeries.DataPointStyle> <Style TargetType="Control"> <!-- Collapase the data points --> <Setter Property="Visibility" Value="Collapsed"/> <!-- Set color to black --> <Setter Property="Background" Value="Black"/> </Style> </chartingToolkit:LineSeries.DataPointStyle> <!-- Use dashes for reference line --> <chartingToolkit:LineSeries.PolylineStyle> <Style TargetType="Polyline"> <Setter Property="Opacity" Value="0.75"/> <Setter Property="StrokeDashArray" Value="2" /> <Setter Property="StrokeThickness" Value="0.75" /> </Style> </chartingToolkit:LineSeries.PolylineStyle> </chartingToolkit:LineSeries> <!-- Data Line Series --> <chartingToolkit:LineSeries ItemsSource="{Binding Domain3}"

Page 30: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

194

IndependentValueBinding="{Binding Date}" DependentValueBinding="{Binding NumberOfHits}" > <!-- DataPointStyle --> <chartingToolkit:LineSeries.DataPointStyle> <Style TargetType="Control"> <!-- Collapase the data points --> <Setter Property="Visibility" Value="Collapsed"/> <!-- Set color to black --> <Setter Property="Background" Value="Black"/> </Style> </chartingToolkit:LineSeries.DataPointStyle> <!-- Use thin primary line --> <chartingToolkit:LineSeries.PolylineStyle> <Style TargetType="Polyline"> <Setter Property="StrokeThickness" Value="0.75" /> </Style> </chartingToolkit:LineSeries.PolylineStyle> </chartingToolkit:LineSeries> </chartingToolkit:Chart>

This code may seem complex; however, it is essentially just tweaking the Silverlight styles and

applying the sparkline concepts defined. The important point is that there are no third-party objects, custom objects, or additional C#/Visual Basic programming that had to be done in order to achieve this. Part of styling the Silverlight Control Toolkit charts is understanding the framework and knowing where things are. For example, knowing that the edge panel (border) is rendered above the chart is important if you need to hide it. Furthermore, knowing that the line series has a PolylineStyle object that can be overridden with custom properties is valuable to be able to style the reference line (opacity, thickness, and dashed lines).

If you are not familiar with the Silverlight Control Toolkit, please visit the toolkit web site (www.codeplex.com/silverlight) for samples. On the companion web site (www.silverlighbusinessintelligence.com), I have a screencast that will show how to do some advanced charting styles in the future.

Column Charts Word-sized column charts share many similarities with sparklines. Essentially, they are miniature versions of simple column charts without the x- and y-axes defined. However, column charts rendered in a word-sized format cannot display labels (annotations) effectively. Therefore, word-sized column charts essentially need to graph continuous data sets (similar to sparklines). For example, the chart in Figure 6-6 would not be good as a word-sized column chart since the discrete columns need to have individual labels. This is not an option in a microformat.

Word-sized column charts can effectively display continuous data, distribution analysis, and true or false trends, or act as alternatives to sparkline visualizations. Figure 6-21 shows an example of a word-sized column chart that is used to provide visual context to a typical standings table for four soccer teams.

Page 31: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

195

Figure 6-21. Example soccer standings with a word-sized column visualization

In this figure, I embedded a bar chart visualization in the Goal Differential column for the last ten matches for the four teams. What extra knowledge can be derived from this visual context? Following is a short list of items that you can immediately gauge from the Goal Diff visualization column:

• Trend of goal differentials for the last ten games

• Trend of wins and losses for the last ten games

• Margin of victory or losses for the last ten games

• Visual comparison to other team wins, losses, and margin of victory/loss trends

■ Note Word-sized column visualizations that show only true/false/null values are referred to as “win/loss charts.”

This example should strengthen your perception of word-sized visualizations. You can clearly see that a fair amount of extra insight was provided from simply adding this visualization to the standings table. This example also highlights the concept of maximizing analytical value. I could have easily added a column that was “Last Ten Wins/Losses.” This would have provided us wins/losses trending and comparison. However, from the goal differential margin, we can derive both victory/loss margins as well as win/loss trending.

Best practices for word-sized column charts are as follows:

• Ensure both x- and y-axes are removed to focus the attention on the individual columns.

• Only a single column series should be shown at a time.

• Try to use a primary color for the word-sized column charts to make the individual columns stand out.

• Labels can be used to summarize the column chart. For example, if the column chart is a list of values, the label could be an addition of all the values. In the chart shown in Figure 6-22, we could have added a column called “Goal Diff (Last 10)” that was simply the +/– goal differential summary of the last ten games.

• Do not clutter the column chart visualization.

Page 32: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

196

■ Note I mentioned earlier in this chapter that both the line and bar series can be used for trend analysis. One distinct advantage that word-sized column charts have over sparklines is interactivity. Even though the surface area of a word-sized column is smaller, a user can still hover over each column for tool tips or actionable drill-downs. Sparklines lose that ability once the data points are removed. Even though we could manually extend the sparkline with line selection, it would not be recommended because the points are so close together. The gaps in the columns provide the distinction between individual items. In addition, when a user hovers over a column, the particular column is highlighted with a different color.

Similar enhancements can be made to the word-sized column chart as we made to the sparkline visualizations. A popular enhancement to word-sized bar charts is to highlight positive and negative values clearly. Positive values are usually highlighted in green. Conversely, negative values are highlighted in red. This paints a clearer picture to the user and associates the green and red colors properly with success or failure. This is yet another example where the flexibility of the charting framework shines. Figure 6-22 illustrates our word-sized column chart enhanced with positive and negative coloring.

Figure 6-22. Column chart visualizations enhanced with positive and negative colors (color shown in

e-book version only)

This is a great enhancement as it improves the analysis capabilities dramatically. The positive and negative column positions on the axis combined with colors associating success or negative outcome truly simplify deriving intelligence.

In the preceding examples, you saw some of the ways that word-sized column charts can be used. What is really powerful about even small column charts is that they don’t lose much of their analysis ability. Distribution analysis like finding gaps, skews, trends, and outliers still can be done effectively using word-sized column visualizations.

Applying Word-Sized Column Visualizations in Silverlight

In order to create word-sized column visualizations, similar changes have to be made to the style that we created when we made the sparkline visualizations. For the preceding examples, here is a list of best practices that were applied in order to render word-sized column visualizations in Silverlight:

Page 33: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

197

• Chart dimensions are small (word-sized).

• X-axis and y-axis do not display values.

• Column series use a basic color (black).

• Items like the border, title, and background are not displayed.

• Positive and negative colors were added by setting the binding from the data. If the goal differential were positive, the color on the rectangle fill would be set to green brush. Conversely, if the goal differential were negative, the color on the rectangle fill would be set to red brush.

The styling of the visualization is done in two steps. First, we need a baseline that creates a chart with a column series that has small dimensions, as shown in Listing 6-5.

Listing 6-5. Silverlight XAML code highlighted in bold shows what is needed to create a baseline for a

word-sized column visualization.

<chartingToolkit:Chart Width="100" Height="25"> <chartingToolkit:Chart.Template> <!-- Hide the border --> <ControlTemplate TargetType="chartingToolkit:Chart"> <chartingPrimitivesToolkit:EdgePanel x:Name="ChartArea"> <Grid Canvas.ZIndex="-1" /> </chartingPrimitivesToolkit:EdgePanel> </ControlTemplate> </chartingToolkit:Chart.Template> <!-- Format the axes --> <chartingToolkit:Chart.Axes> <chartingToolkit:DateTimeAxis Orientation="X" MaxHeight="1" Opacity="0" Minimum="2008/08/27" Maximum="2008/09/08"/> <chartingToolkit:LinearAxis Orientation="Y" Height="25" MaxWidth="2" Opacity="0" Minimum="-5" Maximum="5"/> </chartingToolkit:Chart.Axes> <chartingToolkit:ColumnSeries ItemsSource="{Binding GoalDiffTeam4}" IndependentValueBinding="{Binding Date}" DependentValueBinding="{Binding Diff}" /> </chartingToolkit:Chart>

If you want a basic word-sized column visualization, you are done. However, the default styling of

the columns includes gradients that do not look great when they are shrunk to smaller sizes. In order to be able to create a solid primary color, we need to edit the DataPointStyle of the ColumnSeries. Right-clicking the column series associated with the chart will bring out the menu structure in Expression Blend shown in Figure 6-23.

Page 34: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

198

Figure 6-23. Editing the DataPointStyle template will allow the columns to be styled.

After creating the new style, the following changes need to be made (as shown in Listing 6-6):

• The border of the column control template needs to be removed.

• The rectangle that represents the column itself needs to have a primary color set (removing the gradient).

• The border of the rectangle can optionally be removed to give the columns a solid single-color look.

Listing 6-6. The Silverlight XAML code in bold shows what is needed to create a column DataPointStyle

that will create a word-sized bar chart with solid black colors.

<Style x:Key="ColumnDataPointStyle1" TargetType="chartingToolkit:ColumnDataPoint"> ... <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="chartingToolkit:ColumnDataPoint">

Page 35: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

199

<!-- Set BorderThickness to 0 --> <Border x:Name="Root" Opacity="0"

BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0"> ... <ToolTipService.ToolTip> <ContentControl Content="{TemplateBinding FormattedDependentValue}"/> </ToolTipService.ToolTip> <Grid Background="{TemplateBinding Background}"> <!-- Remove the Gradient Fill <Rectangle> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="#77ffffff" Offset="0"/> <GradientStop Color="#00ffffff" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> --> <!-- Add Black Fill --> <Rectangle Fill="Black" /> <!-- Remove the Border Brush <Border BorderBrush="#ccffffff" BorderThickness="1"> <Border BorderBrush="#77ffffff" BorderThickness="1"/> </Border> -->

The style in Listing 6-6 will create a word-sized column visualization that renders similarly to Figure 6-22 when bound to a data set. Extending this further to dynamically pick the appropriate color based on business logic is actually pretty simple. All you need to do is to remove the hard-coded black color fill and set it to the binding of the property that contains the desired color to fill the brush. Listing 6-7 shows how this can be accomplished in the DataPointStyle template.

Listing 6-7. Setting the Fill property to a binding brush can dynamically set the color of the column.

<!-- Add Black Fill --> <Rectangle Fill="{Binding Brush}" /> <!-- Remove the Border Brush <Border BorderBrush="#ccffffff" BorderThickness="1"> <Border BorderBrush="#77ffffff" BorderThickness="1"/> </Border> -->

The fill is bound to a property in our data that determines the brush to use. This is shown in Listing

6-8.

Page 36: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

200

Listing 6-8. Calculate the brush color of the column in a property that will be data bound.

public SolidColorBrush Brush { get { // if goal differential is less than zero if (this.Diff < 0) { return new SolidColorBrush { Color = Colors.Red }; } else { return new SolidColorBrush { Color = Colors.Green }; } } }

Embedding business logic for the UI (brush color) in your data objects is probably not the greatest idea. Alternatively, a value converter could be created that contains the business logic and can derive the appropriate color from the data passed into it. If you remember, this is the same approach we took in Chapter 3 when I covered the benefits of abstracting business logic into converters that can be shared among different objects.

Progress Bars Progress bars are simple rectangular visualizations that can be used effectively in word-sized form. A progress bar’s goal is to simply convey the progress of the measured value. This makes progress bars a great fit to embed as word-sized visualizations because they convey the message simply. Progress bar visualizations can also be extended with KPI-like functionality (measuring against a goal) using color hues. This way, progress bars can effectively deliver insight on the progress of a given measure and track against predefined goal.

■ Note I did not include a code sample for progress bar visualizations because creating word-sized progress bars is easy compared to other word-sized visualizations. The progress bar is a separate control in the Silverlight SDK that can simply have the length and color hue bound to the value to determine its look. For examples of progress bars used in lists, please visit the companion web site.

Other Candidates for Word-Sized Charts Not all visualizations make good candidates as word-sized visualizations. Visuals that require rich detail, have lots of colors, are interactive, or are complex would not be good choices for word-sized visualization. Even simple chart visualizations like pie charts could make terrible word-sized visualizations. Remember the challenges of pie charts as described in this chapter. Could you imagine

Page 37: 6 creating data visualizations for analysis

CHAPTER 6 ■ CREATING DATA VISUALIZATIONS FOR ANALYSIS

201

trying to decipher small slices on a word-sized pie chart? Discretion should be used when attempting to shrink a chart visualization to the size of a sentence fragment.

Summary This chapter built on Chapter 5, the introductory data visualization chapter. The key information to understand is that creating data visualizations for analysis requires a basic understanding of what we are trying to analyze and show. Different types of visual analyses can have certain requirements that demand visualizations to be structured in a particular way. Understanding visual analysis best practices and knowing your data is vital to creating simple data visualizations for BI 2.0 software.

Silverlight is a powerful framework that is very flexible. Throughout this chapter, you saw several ways that we were able to extend the visualizations to enhance the delivery of BI insight to the user. This gives the Silverlight developer the ability to extend, create, and apply best practice analysis concepts without having to reach out to other technologies.

This chapter should amplify my assertion in the introductory chapter that Silverlight technology is a first-class environment for delivering rich data visualizations that can rival professional visualization software.