Visualize Global Temperature Anomalies with a Dynamic WPF HeatMap Chart

TL;DR: This blog provides a step-by-step tutorial on creating a WPF HeatMap Chart using Syncfusion controls to visualize global land and ocean temperature anomalies from 2004 to 2024. It explains how HeatMap Charts use color gradients to represent data intensity, making them ideal for trend analysis. The article covers preparing data from a CSV file, configuring the chart layout and data binding, and enhancing interactivity with color mapping, legends, and tooltips. It concludes by highlighting how this visualization aids in understanding long-term climate patterns.

Welcome to our Chart of the Week blog series!

Visualizing complex datasets effectively is essential for uncovering trends and insights. A HeatMap Chart is a powerful chart, representing data intensity using a color gradient, making it ideal for analyzing large-scale variations across a two-dimensional space.

In this blog, we’ll explore how to create a WPF HeatMap Chart using the Syncfusion® Heatmap control. We will also demonstrate how to customize tooltips to enhance user interaction, providing detailed insights when hovering over specific data points. Our dataset will focus on global land and ocean average temperature anomalies from 2004 to 2024, helping us observe climate trends over time.

Overview of a HeatMap Chart

A HeatMap Chart is a graphical representation where data points are color-coded based on their values. This visualization is particularly useful for:

• Analyzing long-term climate trends, financial fluctuations, and healthcare data.

• Quickly identifying patterns, outliers, and regional variations.

• Representing relationships between variables in a structured grid format.

Enhancing user experience with custom tooltips

Tooltips provide additional context when users hover over specific data points. By customizing tooltips in Syncfusion^® WPF HeatMap, we can:

• Display precise temperature anomaly values for each year.

• Use rich formatting to enhance readability.

• Improve data interaction by presenting insights dynamically.

Let’s get started!

Step 1: Gathering the temperature anomaly dataset

Download global land and ocean temperature anomaly records (2004–2024) from NOAA’s National Centers for Environmental Information (NCEI). Arrange the dataset in an Excel spreadsheet with columns for Year and Month-wise Temperature Anomaly (°C). Save the Excel file in CSV format for seamless integration into the WPF HeatMap Chart.

Step 2: Preparing the data for the WPF HeatMap Chart

To visualize temperature anomalies effectively, we need to structure our dataset using a Model and a ViewModel.

Creating the temperature data model

Define a TemperatureModel class to represent yearly temperature anomalies for each month, as shown in the code below.

public class TemperatureModel
{
    public string Year { get; set; }
    public double Jan { get; set; }
    public double Feb { get; set; }
    public double Mar { get; set; }
    public double April { get; set; }
    public double May { get; set; }
    public double June { get; set; }
    public double July { get; set; }
    public double Aug { get; set; }
    public double Sep { get; set; }
    public double Oct { get; set; }
    public double Nov { get; set; }
    public double Dec { get; set; }

    public TemperatureModel(string year, double jan, double feb, double mar, double apr, double may, double june,
                            double july, double aug, double sep, double oct, double nov, double dec)
    {
        Year = year;
        Jan = jan;
        Feb = feb;
        Mar = mar;
        April = apr;
        May = may;
        June = june;
        July = july;
        Aug = aug;
        Sep = sep;
        Oct = oct;
        Nov = nov;
        Dec = dec;
    }
}

Creating a ViewModel to manage data

Define a TemperatureViewModel class to hold the collection of temperature records. This class will read data from a CSV file and populate an observable collection for binding to the HeatMap Chart.

Refer to the following code example.

public class TemperatureViewModel
{
    public ObservableCollection TemperatureData { get; set; }

    public TemperatureViewModel()
    {
        TemperatureData = new ObservableCollection();
        ReadCSV();
    }

    private void ReadCSV()
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream inputStream = executingAssembly.GetManifestResourceStream("HeatMapDemo.Data.TemperatureData.csv");

        if (inputStream != null)
        {
            string line;
            List lines = new List();
            StreamReader reader = new StreamReader(inputStream);

            while ((line = reader.ReadLine()) != null)
            {
                lines.Add(line);
            }

            lines.RemoveAt(0);

            foreach (var dataPoint in lines)
            {
                var data = dataPoint.Split(',');
                string year = data[0];
                var monthlyTemperatures = data.Skip(1).Select(double.Parse).ToArray();

                TemperatureData.Add(new TemperatureModel(
                    year,
                    monthlyTemperatures[0],
                    monthlyTemperatures[1],
                    monthlyTemperatures[2],
                    monthlyTemperatures[3],
                    monthlyTemperatures[4],
                    monthlyTemperatures[5],
                    monthlyTemperatures[6],
                    monthlyTemperatures[7],
                    monthlyTemperatures[8],
                    monthlyTemperatures[9],
                    monthlyTemperatures[10],
                    monthlyTemperatures[11]
                ));
            }
        }
    }
}

Step 3: Layout definition

Define a layout using a Border element. Inside the Border, we define a Grid to organize and position different UI components. The Border provides a stylized container with a gray border, rounded corners, and a subtle background color to enhance visual appeal.

Refer to the following code example.

<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="8"
        Background="WhiteSmoke" 
        Margin="20">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
    </Grid>
</Border>

Step 4: Configuring the Syncfusion WPF HeatMap Chart

To configure the Syncfusion WPF HeatMap Chart, follow this documentation.

<syncfusion:SfHeatMap Grid.Row="1" />

Step 5: Binding data to the HeatMap Chart

The TemperatureViewModel is set as the DataContext, and the temperature data is bind to the heatmap chart using the ItemsSource property. The mapping of each month’s temperature is defined in the Syncfusion^® WPF HeatMap resource, linking the Year and each month’s data (e.g., January, February, etc.). The ItemsMapping property is used to bind the model to the HeatMap Chart.

Refer to the following code example.

<Window.DataContext>
    <local:TemperatureViewModel />
</Window.DataContext>

<Window.Resources>
    <syncfusion:TableMapping x:Key="Model">
        <syncfusion:TableMapping.HeaderMapping>
            <syncfusion:ColumnMapping DisplayName="Year" PropertyName="Year" />
        </syncfusion:TableMapping.HeaderMapping>
        <syncfusion:TableMapping.ColumnMapping>
            <syncfusion:ColumnMapping DisplayName="January" PropertyName="Jan" />
            <syncfusion:ColumnMapping DisplayName="February" PropertyName="Feb" />
            <syncfusion:ColumnMapping DisplayName="March" PropertyName="Mar" />
            <syncfusion:ColumnMapping DisplayName="April" PropertyName="April" />
            <syncfusion:ColumnMapping DisplayName="May" PropertyName="May" />
            <syncfusion:ColumnMapping DisplayName="June" PropertyName="June" />
            <syncfusion:ColumnMapping DisplayName="July" PropertyName="July" />
            <syncfusion:ColumnMapping DisplayName="August" PropertyName="Aug" />
            <syncfusion:ColumnMapping DisplayName="September" PropertyName="Sep" />
            <syncfusion:ColumnMapping DisplayName="October" PropertyName="Oct" />
            <syncfusion:ColumnMapping DisplayName="November" PropertyName="Nov" />
            <syncfusion:ColumnMapping DisplayName="December" PropertyName="Dec" />
        </syncfusion:TableMapping.ColumnMapping>
    </syncfusion:TableMapping>
</Window.Resources>

<syncfusion:SfHeatMap Grid.Row="1" ItemsSource="{Binding TemperatureData}"
                      ItemsMapping="{StaticResource Model}" />

Step 6: Customizing HeatMap Chart appearance

In this step, we’ll focus on customizing the appearance of the heatmap chart based on the cell values to enhance the visualization.

Color mapping

To improve the visual representation of data, we can map specific temperature values to a range of colors. Syncfusion WPF HeatMap Chart offers a ColorMappingCollection that allows you to assign different colors to specific data values. We define a collection of color mappings where each value corresponds to a particular color. The values will then be reflected in the heatmap cells, making it easier to understand temperature anomalies.

Here’s a code example of a ColorMappingCollection that defines colors based on temperature values, where lower values are represented with cooler colors and higher values with warmer colors.

<Window.Resources>
    <syncfusion:ColorMappingCollection x:Key="colorMapping">
        <syncfusion:ColorMapping Value="0.0" Color="#313695" />
        <syncfusion:ColorMapping Value="0.3" Color="#4575b4" />
        <syncfusion:ColorMapping Value="0.5" Color="#91bfdb" />
        <syncfusion:ColorMapping Value="0.7" Color="#e0f3f8" />
        <syncfusion:ColorMapping Value="1.0" Color="#fee090" />
        <syncfusion:ColorMapping Value="1.3" Color="#fdae61" />
        <syncfusion:ColorMapping Value="1.5" Color="#d73027" />
    </syncfusion:ColorMappingCollection>
</Window.Resources>

<syncfusion:SfHeatMap ItemsSource="{Binding TemperatureData}"
                      ItemsMapping="{StaticResource Model}"
                      ColorMappingCollection="{StaticResource colorMapping}" />

Step 7: Configuring a gradient legend for the HeatMap Chart

The SfHeatMapLegend control allows you to display a color legend beneath the heatmap. It maps the color values to a gradient scale, helping users understand what the colors in the heatmap represent. To configure the legend, set the LegendMode to Gradient and bind it to the defined ColorMappingCollection. Additionally, we can customize the legend’s alignment and width properties to improve the layout.

Refer to the following code example.

<syncfusion:SfHeatMapLegend Grid.Row="2" LegendMode="Gradient"
                                 ColorMappingCollection="{StaticResource colorMapping}"
                                 HorizontalAlignment="Center"
                                 Width="800" />

Step 8: Customizing the tooltip template

Define a custom tooltip resource that displays the year, month, and the temperature value in degrees Celsius. The tooltip is then assigned to the HeatMapCell through a style.

Refer to the following code example.

<ToolTip x:Key="celltip" Background="Black" Content="{Binding}" FontSize="10" Foreground="White">
    <ToolTip.ContentTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding RowHeader.Value}" HorizontalAlignment="Center" VerticalAlignment="Center"
                           FontSize="12"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding ColumnHeader.Value}" FontSize="12"/>
                    <TextBlock Text=" : " FontSize="12"/>
                    <TextBlock Text="{Binding Value, StringFormat='{}{0} °C'}" FontSize="12"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ToolTip.ContentTemplate>
</ToolTip>

<Style TargetType="syncfusion:HeatMapCell">
    <Setter Property="ToolTip" Value="{StaticResource celltip}" />
</Style>

Step 9: Customizing the HeatMap Chart title

Using Text Block, customize the title and description displayed, which makes the heatmap chart more informative and user-friendly, helping the audience quickly grasp the purpose and significance of the data presented.

Refer to the following code example.

<!-- Title and Description -->
<StackPanel Orientation="Vertical" Margin="10">
    <TextBlock Text="Global Land and Ocean Average Temperature Anomalies" 
               HorizontalAlignment="Center"
               FontSize="18" 
               FontWeight="Bold"
               Foreground="Black"/>

    <TextBlock Text="Analysis global temperature fluctuations from 2004 to 2024, highlighting variations in degrees Celsius, provides insights into long-term climate trends and the impact of global warming."
               HorizontalAlignment="Center"
               FontSize="14" 
               Foreground="DimGray"
               TextWrapping="Wrap"
               TextAlignment="Center"
               Margin="225,5,255,0"/>
</StackPanel>

After executing these code examples, you will get the output that resembles the following image.

Creating a WPF HeatMap Chart to display global land and ocean temperature anomalies

GitHub reference

For more details, refer to the complete sample on the GitHub demo.

Conclusion

Thank you for reading! In this blog, we’ve walked through the process of creating a WPF HeatMap Chart to visualize global land and ocean temperature anomalies from 2004 to 2024. We’ve covered customizing tooltips, adjusting heatmap chart colors based on data values, adding a custom legend, and more, enabling you to gain insights into climate trends using this powerful data visualization technique.

If you are an existing customer, you can download the new version of Essential Studio on the License and Downloads page. If you are not a Syncfusion customer, try our 30-day free trial to check out our incredible features.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related Blogs

• Build an AI-Powered Air Quality Dashboard: Real-Time Analytics & Predictive Insights with WPF Spline Chart

• 2025 Volume 1: Must-Know Updates in the Syncfusion Diagram Component

• Heikin-Ashi vs. Candlestick Charts: Which Is Better for Market Trend Analysis in WPF?

• Easily Build an AI-Powered Chat App Using WPF AI AssistView and OpenAI