a more accurate way of understanding user ratings
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Inspired by this post at Goodfil.ms, heatRate is a simple jQuery plugin that can be used instead of typical 5-star ratings. The goal of heatRate is to let the user see exactly how ratings are made up, rather than just showing averages; all the while keeping the visualization concise, in-line, and flexible. It works best with varied data points.

heatRate just takes a simple 1-dimensional array of your data, and will create a heatmap-like display out of it in HTML and CSS gradients.


Just link to the script in your HTML, and pick the div you want to turn into a heatmap. The only required option is the array that you would like to pass to heatRate.

  data: ratingArray


Defaults are shown below:

  hue         :  180,
  saturation  :  100,
  lightness   :  50,
  alpha       :  1,
  build       :  'hue',
  range       :  100,
  start       :  0,
  lines       :  true,
  labels      :  false
  • hue - the color that you'd like to use when building the gradient with lightness or saturation.
  • saturation - the saturation that will be used when building with hue or lightness.
  • lightness - brightness/darkness that will be used when building with hue or saturation.
  • alpha - a float between 0 and 1 to add tranparency to the gradient.
  • build - can either be hue, saturation, or lightness. This is the dimension that the dataset will be evaluated against.
  • range - a number that will change the contrast between values.
  • start - the number (color, saturation, lightness) at which you would like the visualization to start. Can be used for any build.
  • lines - a boolean that adds <div> within the containing element. These can be styled to show where the data points are.
  • labels - a boolean that if true, will add number labels to the order of data points.


This baby is probably not gonna work too well in IE8 or lower.


Ted O'Meara


MIT License. See LICENSE for details.


Copyright (c) 2012 Intridea, Inc.