As part of a demonstration to the Wellington .net user group this week I put together a demo showing a heat mapping of the performance of a transactional system as a function of time of day and arrival rate. My objective was to provide a simple eye balling test of whether performance was being impacted more by daytime customer loading or by competing overnight batch processing. I’ve tried a similar task before with Python and MatPlotLib but this time I wanted to see how easy it was to accomplish in .Net/F#.
The answer was ‘very easy’.
The interactive F# environment in VS2010 gives you JIT compiled code so it’s very fast to work with. The data structures/collections available within F# make importing and manipulating data simple – once it’s in memory you spend most of the time using filter, map and fold operations on elements – explicit recursion or iteration is rarely necessary.
I found I started with sequences then moved to arrays as data volumes increased and performance slowed. Array.Parallel.map/mapi seemed to make a significant difference whenever the operation being performed was of order a few milliseconds. It’s pointless parallising when the operation performed is short – the overhead of managing threads must just be too great.
Most of the effort was spent aggregating and binning the data, the actual image prep was trivial. The following assumes you have an array of data to display.
open System.Drawing
open System.Drawing.Imaging
open System.Windows.Forms
// adapted some code here from http://thecodedecanter.wordpress.com/2010/04/30/modelling-the-2d-heat-equation-in-f-using-100-lines-of-code/
let toBitmap (arr:Color[,]) =
let image = new Bitmap(arr.GetLength(0),arr.GetLength(1),Imaging.PixelFormat.Format24bppRgb)
for i=0 to image.Width-1 do
for j=0 to image.Height-1 do
image.SetPixel(i, j, (arr.[i,j]))
done
done
image
let maxInArray2D (ar:'a[,]) =
seq{ for r in 0..Array2D.length1 ar-1 do
yield Seq.max (ar.[r..r,*] |> Seq.cast<'a>)
} |> Seq.max
let intensityMap intensity = Color.FromArgb((int (intensity * 255.0)),0,0)
let bitmap imageArray =
let max = imageArray |> maxInArray2D
imageArray
|> Array2D.map (fun f -> f/max)
|> Array2D.map (fun f -> intensityMap f)
|> toBitmap
let ShowForm (f : Form) =
#if INTERACTIVE
f.Show()
#endif
#if COMPILED
Application.Run(f)
#endif
let BitmapForm bitmap =
let picBox = new PictureBox(BorderStyle = BorderStyle.Fixed3D, Image = bitmap, Size = bitmap.Size,
Dock = DockStyle.Fill, SizeMode = PictureBoxSizeMode.StretchImage)
let form = new Form(Text = "F# Connection Performance versus Connection Rate and Time", Size = bitmap.Size, AutoSize = true)
form.Controls.Add(picBox)
form
bitmap surfaceArray |> BitmapForm |> ShowForm
If you don’t have many points that’s going to generate a small image which you can expand by dragging the corner and Windows will magically interpolate for you. I’m sure there’s a way to explicitly do this with the BitmapForm API as well – just didn’t have time to figure that out.
If you want to interpolate yourself, you could try something simple like a bilinear approach:
let bilinearInterpolation f00 f01 f10 f11 x y =
let boundingBox = Array2D.zeroCreate<float> 2 2
boundingBox.[0,0] <- f00
boundingBox.[0,1] <- f01
boundingBox.[1,0] <- f10
boundingBox.[1,1] <- f11
let A = RowVector.ofList [1.-x; x]
let B = Matrix.ofArray2D boundingBox
let C = Vector.ofList [1.-y; y]
A * B * C
Or why not just double the resolution?
// take an array m x n and return (2m-1) x (2n-1)
let interpolate (A:float[,]) =
let B = Array2D.zeroCreate<float> (2*(A.GetLength 0) - 1) (2*(A.GetLength 1) - 1)
for row in 0..((A.GetLength 0) - 1) do
for col in 0..((A.GetLength 1) - 1) do
B.[2*row, 2*col] <- A.[row,col]
done
done
//
for row in 0..((B.GetLength 0) - 1) do
if row % 2 = 0 then
for col in 0..((B.GetLength 1) - 1) do
if col % 2 = 1 then
B.[row, col] <- (B.[row,col-1] + B.[row,col+1]) / 2.
done
else
for col in 0..((B.GetLength 1) - 1) do
if col % 2 = 0 then
B.[row, col] <- (B.[row-1,col] + B.[row+1,col]) / 2.
else
B.[row, col] <- (B.[row-1,col-1] + B.[row+1,col-1] + B.[row-1,col+1] + B.[row+1,col+1]) / 4.
done
done
B
// now I can do this...
bitmap (surfaceArray |> interpolate |> interpolate |> interpolate |> interpolate)|> BitmapForm |> ShowForm
And generate results like this (where connection rate increases down, time goes across, and redness indicates duration of calls):
![clip_image002[17]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGAlCipOcPLYFbHNdQq-9Q-HI1lUGs0iJQ3gNMM5QV1Rh4a1ebIFC0DjTpafDmCg8YxabC5PeAq70Fkib-I_ZbA7jJ9OM8jSzdVWcaYz9ovsi7U5Ev6DkbqJsuqDOmh1_QUJDuGA/s1600-h/clip_image002%5B17%5D%5B3%5D.jpg "clip_image002[17]")
![clip_image002[19]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexxidskB0KuEn1aRW3zREi-PbLYK9FE39VZjTJPxCLAL5MIPz7Edcig4bqAWFDmk0hgXE9Q4ULv5mCZov9cjTrABY_cyIrHNEWdI4C5V4a-0AvO4vrvbrtWZrIOH8FnRPVPn9Dg/s1600-h/clip_image002%5B19%5D%5B4%5D.jpg "clip_image002[19]")
![clip_image002[21]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijDXDsqu5_p__HJHWr3Gj_mmPN3enPhT_QF0a6UvNRNQEdYvGtTeylC6LXb-gl3UCBmIAl3XSmgQYOkyGQOIdICBJ5L3ZgEe-3Qh-MYmg_-5HS_irAOd4ki0XV3ZEHZ10gUrYCmw/s1600-h/clip_image002%5B21%5D%5B6%5D.jpg "clip_image002[21]")
![clip_image002[23]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4LcTzC-Jb9CEXkgJ3nj8BulAZ5nRgbe6jt8ZVp8v6vCWd-hX_vnkV2vSLWMhPY8EFKzEVIbI-OdIXkcuBcsog7tZ5Q6NA6vJNGrEfkamV8aDnVmXg3HaCT_hFhCjYgeqdVZ0FnA/s1600-h/clip_image002%5B23%5D%5B3%5D.jpg "clip_image002[23]")
![clip_image002[29]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSgjBYclPBDRVebHXwzGsLOeaxp2y7fCSZGQfWQ3ojH5kTYiYKfhywwBoq_EfGCJGEHUAmdMqpYC0zSQJ5D2bpg1mYIF_hbOniT5ul28s6Nhj1TjQs4MO3vSkzrSTeQFdJaPPFoQ/s1600-h/clip_image002%5B29%5D%5B5%5D.jpg "clip_image002[29]")
![clip_image002[25]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcciq_WPueiJzPuhdXdAMp85oJg1XoiNpgu_Pfmzdmc4rJ-jY70_9IVSsDeh-IMRFJiPxK0MaTODmSrschmVnyjF6gSgT1M56c_p_pE9zbX4sfmXMwcCOSlhy2IzqTFPLycT34DA/s1600-h/clip_image002%5B25%5D%5B4%5D.jpg "clip_image002[25]")
![clip_image002[27]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPt1qUJioLZ-g_69rc89vIpDzED4NTvpNTo52e3nPyDt3Vw4I_3qUokKdMQCSut_kxR0qzYD8VHLRkBegdXh3uObzjvGoIMMfDW4TNcw-aZSipKkIK_3-pdwHWhwq7qmKe1avF7w/s1600-h/clip_image002%5B27%5D%5B3%5D.jpg "clip_image002[27]")
