heat map

heat map

app/views/tags/index.html.slim
  ==heatmap(@histogram)

app/models/tag.rb

  has_many :user_votes, :through => :items

  def frequency
    self.user_votes.count
  end

  def self.to_histogram
    Tag.all.inject({}){|set, t| set[t.friendly_name] = t.frequency; set }
  end

app/controllers/tags_controller.rb
  def index
    @tags = Tag.order('friendly_name asc')
    @histogram = Tag.to_histogram
  end

app/helpers/application_helper.rb
  def heatmap(histogram={})
    html = %{<div class="heatmap">}
    path = histogram[path]
    _max = histogram.map{|k,v| histogram[k]}.max * 2
    histogram.keys.sort{|a,b| histogram[a] <=> histogram[b]}.reverse.each do |k|
      tag = Tag.find_by_friendly_name(k) #need this so I can href to tag path below
      next if histogram[k] < 1
      _size = (((histogram[k] / histogram.map{|key,val| histogram[key]}.sum.to_f) * 100) + 5).to_i
      _heat = sprintf("%02x" % (255 - (_size * 25)))
      html << %{
        <div class="heatmap_element" style="color: ##{_heat}#{_heat};
            font-size: #{_size}px;"><a href="/tag/#{tag.path}">#{k}</a></div>
      }
    end
    html << %{<br style="clear: both;" /></div>}
  end

app/assets/stylesheets/application.css.scss
@import "heat_map";

app/assets/stylesheets/heat_map.css
.heatmap{
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  width: 800px;
  padding: 1em;
}
.heatmap_element{
  display: block;
  text-align: center;
  margin: .25em;
  padding-top: 0em;
  float: left;
}