WPF: Heat Maps

WPF: Heat Maps

1 Comment

So awhile ago I thought, “Wouldn’t it be cool to do heat maps in WPF?”.  Well I started playing around with the idea and immediately was side tracked with how terrible shaders were in WPF :)  Which of course lead to me creating the [WPF ShaderEffect Generator] project.

Now that I have that project off and running I turned my attention back to heat maps and thought I would publish the results.  So I started off with the typical visualization I see everywhere; the rainbow color scheme.  Once I got it running I was showing it off to some of my friends and my good buddy [Chris VanderKnyff] told me about this paper, [Rainbow Color Map (Still) Considered Harmful].  I hadn’t really thought much about it before reading the paper, but the rainbow color scheme really is terrible.  The paper suggests that a Black body radiation visualization is generally better for the types of things you might use a heat map for in tools for games.

Here’s a comparison of the Rainbow and Black body gradients:

Black body Radiation
Gradient

lava
Blackbody Palatte Blackbody HeatMap

Rainbow Cream
Gradient

rainbowcream
Classic Palatte Classic HeatMap

Obviously the black body visualization of heat is much more simple and easy to understand than the rainbow visualization.

The WPF sample uses a shader to visualize the gradient based on a 256×1 palette that you can define in XAML.  Random heat is generated and then rendered to a [RenderTargetBitmap] using a radial grayscale gradient brush that just writes to the rendertargetbitmap.  The color for the heat map is provided by a shader effect I have applied to the image on the window.

The shader is pretty simple, it just reads a color from the palette sampler based on the grayscale value of the X (Red) component of the incoming rendertargetbitmap at the corresponding texture coordinate.

float4 main(float2 uv : TEXCOORD) : COLOR
{
    float4 c = tex2D(Input, uv.xy);
    float2 index = float2(c.x, 0);
    float4 heat = tex2D(Palette, index);
    return heat;
}

Here’s a screenshot of the sample program and the links to download the sample exe and source code.

HeatmapProgram

Sample: [Heatmap.exe]

Sample Source: [Heatmap.zip]

Note: You should have the [WPF ShaderEffect Generator] installed if you want the shaders to recompile correctly if they are changed.

  • Никита Данилов

    Nick, big thanks for this sample!
    As I think, “Rainbow” pallete it’s more suitable for deeper analysis and “Black Body” is better for fast review.

Archives

Back to Top