Topography Table

Before

After

Introduction

Often there is a need to display raw data to end-users in web-based reports. Unfortunately, there is no easy way to quickly identify the values or difference in values in large grids. This code shows an easy method to differentiate between relative values of a large set of data and subsequently display the data to the user. The code is based on an ancient webmaster tool I saw once that displayed hits/hour/month using a similar scheme. I believe this is called a heat map, thanks Verious.

Code

private static readonly string[] GRAYS = new string[]{"#080808","#101010","#181818",
"#202020","#282828","#303030","#383838","#404040","#484848","#505050","#585858","#606060",
"#686868","#707070","#787878","#808080","#888888","#909090","#989898","#A0A0A0",
"#A8A8A8","#B0B0B0","#B8B8B8","#C0C0C0","#C8C8C8","#D0D0D0","#D8D8D8","#E0E0E0",
"#E8E8E8","#F0F0F0","#F8F8F8","#FFFFFF"};

private static string GetGrayColorValue(int value, int max) {
    float normal = (GRAYS.Length - 1f) / max;
    int index = (int)(value * normal);
    if(index < 8) {
        return String.Format("style=\"background-color:{0};color:#ffffff;\"",
        GRAYS[index]);
    }
    else {
        return String.Format("style=\"background-color:{0};\"", GRAYS[index]);
    }
}

private void DoTest() {
    StringBuilder sb = new StringBuilder();
    Random random = new Random();
    int max = 234;
    int tempValue = 0;
    sb.Append("<table><thead><tr><th>Hour</th>");
    for(int i = 1; i <= 31; i++) {
        sb.AppendFormat("<th>{0}</th>", i);
    }
    sb.Append("</tr></thead><tbody>");
    for(int i = 0; i < 24; i++) {
        sb.AppendFormat("<tr><td>{0}</td>", i);
        for(int j = 1; j <= 31; j++) {
            tempValue = random.Next(max);
            sb.AppendFormat("<td {0}>{1}</td>", GetGrayColorValue(tempValue, max),
                tempValue);
        }
        sb.Append("</tr>");
    }
    sb.Append("</tbody></table>");
    mTest.InnerHtml = sb.ToString();
}

The DoTest method is just a sample implementation that will generate the table shown at the top of this article. The only thing I did not show was the definition of mTest which was a div tag in an ASP.NET page. Also, a special note about the table generation code: thead is used to help make the data accessible. The ASP.NET table HTML control throws this information away making it harder for non-visual readers.

Links

Here is the link to the Web Colors

Updates

• 2008/10/18 Changed the data in the grid to make the look nicer as well as provided a before table to illustrate the difference better