nextwebgen.com

Using color has been a tried and true method of representing importance or value in a UI. Whether it’s negative balance or indicating a successful process, color helps to convey your message much more effectively then plain old text.

Josh Nathanson came up with an interesting jQuery plugin called HeatColor which assigns colors to elements based on a range of values:

HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.

You bind a collection of elements such as table rows, divs or list members to heatcolor and let it do the work.

It can find the min and max values of the desired elements, or you can pass them in manually.

The plugin is very easy to use providing for a callback method to return the value to base the color on as well as several config options that can determine the color scheme, order of colors, and min/max for the range of values. The following snippet of code generated some cool results:

$(\"#ex1\").tablesorter();

function sortwithcolor( column ) {
	$(\"#ex1 > tbody > tr\").heatcolor(
		function() { return $(\"td:nth-child(\" + column + \")\", this).text(); }
	);
};

$(\"th\").click(function() {
	$(this).siblings().css(\"background-color\",\"#cccccc\").end().css(\"background-color\",\"#dd0000\");
	sortwithcolor( $(this).parent().children().index( this ) + 1 );
});

sortwithcolor(8);
	

Josh created some other cool demos that are really worth checking out so be sure to hit up his plugin’s page for more details.