Platinum Partner

Rails Helpers For A List Apart No. 256

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'
end

Sample 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')
end

Sample 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'
end

Sample 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' }]
{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}