public
Created

heat map

  • Download Gist
heat map
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
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;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.