CSVやTSVファイルをhtmlに変換するワンライナーとHTMLによる表データの・グラフ化・可視化

◆ワンライナー　シェル芸
input.csv: タブ区切りのテーブル

cat input.csv | ruby -F"\t" -ane 'BEGIN{puts "<table>"}; puts "<tr>";print $F.map{|i| "<td>"+i.to_s+"</td>"}.join("");puts "</tr>";END{puts "</table>"}' > tmp1.html


◆可視化
入力ファイル tmp2 例：

A,2013-01-01,3,4,5,6,7,9,5
B,2013-02-01,3,4,5,6,7,9,3
C,2013-03-01,3,4,5,6,7,9,1
D,2013-05-02,3,4,5,6,7,9,2
E,2013-02-04,3,4,5,6,7,9,3

出力

名前，日付，データの小グラフ
...
...
...
...

使い方：

ruby making_small_graph2.rb > tmp.html

小グラフについては以下のエントリーを参考
http://d.hatena.ne.jp/arupaka-_-arupaka/20140726/1406336229

jquery.sparkline.js を使う．

$ cat making_small_graph2.rb
#coding: utf-8


input_file="tmp2"

f=open(input_file)

str1=<<"EOS"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
    <script type="text/javascript" src="js/jquery.sparkline.min.js"></script>

    <script type="text/javascript">
    $(function() {
        /** This code runs when everything has been loaded on the page */
        /* Inline sparklines take their values from the contents of the tag */
        $('.inlinesparkline').sparkline();

        /* Sparklines can also take their values from the first argument
        passed to the sparkline() function */
        var myvalues = [10,8,5,7,4,4,1];
        $('.dynamicsparkline').sparkline(myvalues);

        /* The second argument gives options such as chart type */
        $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );

        /* Use 'html' instead of an array of values to pass options
        to a sparkline with data in the tag */
        $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
    });
    </script>
</head>

<style type="text/css">
.sample_01{
width: 100%;
border-collapse: collapse;
}
.sample_01 th{
width: 25%;
padding: 6px;
text-align: left;
vertical-align: top;
color: #333;
background-color: #eee;
border: 1px solid #b9b9b9;
}
.sample_01 td{
padding: 6px;
background-color: #fff;
border: 1px solid #b9b9b9;
}
</style>
EOS

puts str1

puts "<table class=\"sample_01\">"
str2 = <<"EOS"
        <thead>
        <tr>
        <th>単語名</th>
        <th>登録日</th>
        <th>カウント</th>
        </tr>
        </thead>
EOS
puts str2

puts "<tbody>"

f.each{|i|
        i.chomp!
        puts "<tr>"
        #print i.split("\t").map{|j| "<td>"+j.to_s+"</td>"}.join("")

        j0=i.split("\t")
        food_name=j0[0]
        food_year=j0[1]

        food_count=j0[2..(j0.length-1)].join(",")

        puts "<td>"+food_name+"</td>"+"<td>"+food_year+"</td>"+"<td>"+ "<span class=\"inlinesparkline\">"+food_count+"</span>"+"</td>"


        puts "</tr>"
}
puts "</tbody>"
puts "</table>"
puts "</html>"