I cooked up some Ruby on Rails helpers for testing the techniques in the article
Accessible Data Visualization with Web Standards from A List Apart
No. 256. If you want to know more about Rails, check out
No. 257. If you want to be smarter, read
A List Apart every week.
def chartlist(data)
total = data.inject(0.0) { |sum, datum| sum + datum[:count] }
bars = ''
data.each do |datum|
link = content_tag 'a', datum[:name], :href => datum[:href]
count = content_tag 'span', datum[:count], :class => 'count'
index = content_tag 'span', "(#{(datum[:count]/total*100).to_i}%)", :class => 'index', :style => "width: #{(datum[:count]/total*100).to_i}%"
bars << content_tag('li', link << count << index)
end
content_tag 'ul', bars, :class => 'chartlist'
endSample data for a chartlist (
example)
data = [{ :name => 'Apples', :count => 420, :href => 'http://www.example.com/fruits/apples/' },
{ :name => 'Bananas', :count => 280, :href => 'http://www.example.com/fruits/bananas/' },
{ :name => 'Cherries', :count => 200, :href => 'http://www.example.com/fruits/cherries/' },
{ :name => 'Dates', :count => 100, :href => 'http://www.example.com/fruits/dates/' }]def sparkline(data)
max = data.sort.last.to_f
sparklines = ''
data.each_with_index do |datum, index|
count_string = datum.to_s
'(' << count_string if index == 0
count_string << ',' if index != data.length
count_string << ')' if index == data.length
count = content_tag 'span', count_string, :class => 'count', :style => "height: #{(datum/max*100).to_i}%"
index = content_tag 'span', count << ' ', :class => 'index'
sparklines << index
end
content_tag('span', sparklines, :class => 'sparkline')
endSample data for sparklines (
example)
data = [60, 220, 140, 80, 110, 90, 180, 140, 120, 160, 175, 225, 175, 125]
def timeline(data)
max = data.sort { |a, b| a[:count] <=> b[:count] }.last[:count]
bars = ''
data.each do |datum|
label = content_tag 'span', datum[:label], :class => 'label'
count = content_tag 'span', "(#{datum[:count]})", :class => 'count', :style => "height: #{(datum[:count]/max.to_f*100).to_i}%"
link = content_tag 'a', label << count, :href => datum[:href], :title => "#{datum[:label]}: #{datum[:count]}"
bars << content_tag('li', link, :style => "width: #{(100.0/data.length).to_i}%")
end
content_tag 'ul', bars, :class => 'timeline'
endSample data for a timeline (
example)
data = [{ :date => '2007-12-01', :count => 40, label => '1' },
{ :date => '2007-12-02', :count => 100, label => '2' },
{ :date => '2007-12-03', :count => 150, label => '3' }]