私たちは、生活の中でさまざまな情報に接します。とくにこのコロナ禍で、グラフやダイアグラムなどを目にする機会も増えたことでしょう。では、私たちはなぜ文字の羅列であるデータを可視化しようと試みるのでしょうか？それには図形と人間の思考に深い関わりがあるからと言われています。そのことについて詳しく見ていきましょう。後半では実際にプログラミングしてグラフを描いてみます。
生のデータを変換する重要性
「ビッグデータ」「データサイエンス」「オープンデータ」「データジャーナリズム」などの言葉が広く使われるようになった現在、データは私たちの日常生活と密接に関わっており、時には重要な意思決定や行動を左右することもあります。それゆえに、生のデータを科学的な方法で知恵に変換する重要性は日に日に高まっています。
その流れにあって、情報に色や形を与えてグラフやダイアグラムなど視覚的な要素に変換する「情報可視化」や「インフォグラフィックス」も注目される分野のひとつです。毎年のように、情報可視化やデータ可視化の方法論を題材とした書籍が多く刊行されていることからも、関心の高さがうかがえます。
こうした状況を見ると、データを自在に分析したり可視化することによって、社会課題への対応や企業活動に利活用することは、もはや社会人にとっては必須のスキルの一つと受け止められているように感じます。しかし、よくよく考えてみると、私たちが図やグラフを描くことに、もう少し素朴な意味を見出すことができます。
図化と思考の深い関係
図は、自然言語や数式と並ぶ「第三の言語」と呼ばれることがあります。すなわち図は、物事を論理的に記述し、思考を進展させるために欠かせないもののひとつというわけです。
言語や図を操る能力は、他人とのコミュニケーションを豊かで円滑なものにするためだけではなく、抽象的で複雑な概念をしっかりとした自己の思考的基盤の上で整理し発展させるためにも重要なのです。
また図は、記号や文字のルーツとも言え、人間の思考を外部に表示し記憶や伝達を助ける存在として文明の発展そのものにも色濃く影響を与えました。
パソコンが普及期を迎えると、情報を図に変換することは格段に容易になりました。現在では誰もがExcelやTableauなどの高機能なグラフ化ツールで、膨大なデータを瞬時に手軽な操作で可視化できます。そのこと自体はすばらしいことですが、先に書いた図と思考の深い関係に着目すると、なんとも味気ない行為に思えてきます。
本来、図化と思考は、人の頭の中にある思考や概念をいったん図に表し、その図を見渡すことで新しい気づきを得て、また思考するというフィードバックループを伴う連続した知的活動ですが、グラフ化ツールによるテンプレート型の図化は、こうした自分の自由な思考を反映する働きに弱く、思考を進展させるための多様な表現力を欠いています。ともすれば、用意されたテンプレートの範疇に思考が制限されてしまいがちです。
図的思考とプログラミング
しかし、だからと言って、定規や分度器を使って数字を見ながら図を描くというような手間のかかる作業に戻ることを勧めたいわけではありません。代わって筆者が勧めたいのは、情報を図に変換するプログラミングです。
プログラミングは数値を読み込み、それを思いのままの形・サイズ・色・位置・角度に変換し、画面上に表現します。少しがんばれば、3次元的な表現や動きのアニメーションを伴った時間変化する表現も可能です。図の形式は見慣れたグラフから、まったく見たこのない斬新なもので、その表現の多様さは幅広く、制約は何もありません。
変換のルールを考えて自らプログラミングし、結果の画像から刺激や気づきを得てまたルールを考えるというループは、歴史上長く育まれてきた図的思考のプロセスをコンピューターの力を借りて行うものと言えます。
プログラムでグラフを描いてみよう
では、実際にプログラミングでデータを図に変換するにはどうすればいいでしょうか。ここでは、図形やグラフィックの描画を簡単なコードで実現できる「 」を使って表現してみます。p5.jsは、初心者にも容易に習得でき、インタラクティブ・アートやビジュアルデザインの分野でも多くのユーザーから支持されています。
データを表現に変えるときに、とくに注意が必要なのは、1. データをプログラムに読み込むことと、2.データを大きさや色の数値に変換するという2つの知識です。それ以外の部分は や、 などで公開されているさまざまな作品を引用することで、データと表現を融合していくことができるでしょう。
データをプログラムに読み込む
例として、1日ごとの気温のデータを読み込んでグラフにしてみましょう。データは からダウンロードしました。
date,temp
4月11日,17.6
4月12日,19.1
4月13日,15.5
4月14日,15.2
4月15日,17.9
4月16日,14.7
4月17日,12.7
4月18日,12.7
4月19日,16.2
4月20日,18.7
4月21日,18.9
4月22日,20.5
4月23日,16.5
4月24日,18.0
4月25日,19.0
4月26日,18.9
4月27日,18.5
4月28日,20.1
4月29日,20.1
4月30日,20.8
このデータファイル（temp.csv）を次のように、プログラムに読み込みます。
let table;
function preload() {
table = loadTable("temp.csv","csv","header");
}
tableとはデータを表形式で格納し、データに含まれる数値や文字列をプログラムで取り扱いやすくするための器のような役割を果たします。loadTable関数はtemp.csvの中身を読み取って、tableに変換します。”csv”と”header”という2つの引数は、このファイルのフォーマット（CSV形式）と、ファイルの先頭には「見出し」の行が含まれていることを意味しています。
ちなみに、preload関数の中でこのコードを実行する理由は、pleroad関数がsetup関数やdraw関数よりも先に処理され、なおかつ読み込みが終了するまで他の関数の処理を待機させる働きがあるためです。
いったんtableに読み込んだ後は、すべてのデータはtableを介して取り出すことができます。たとえば、データの先頭行の気温は、「17.6」ですが、これを取り出すには次のように書きます。
table.get(0,"temp")
データの先頭は0行目、温度の列は見出し行にある通り「temp」という名称を持っていますから、行番号と列名を指定することで任意のデータを取り出すことができます。
このように、tableから取り出したデータを文字列として画面に表示させると次のようになります。
function draw() {
background(220);
//データの個数は？
text( table.getRowCount(), 20,50);
//先頭の日付は?
text( table.get(0,"date"), 20, 80);
//先頭の気温は?
text( table.get(0,"temp"), 20,110 );
}
データを大きさや色の数値に置き換える
データの読み込みと取り出し方法が理解できたら、取り出したデータを大きさや色など、視覚的な数値に変換します。まずは、変換のルールを考えます。
気温は1年でおよそ0℃〜40℃くらいの間で変化します。そこで、もし、データが0℃の時は大きさを0px、40℃の時は大きさを200pxで表現するという変換ルールを考えたとします。つまり、0℃から40℃の間にあるすべてのデータを、0pxから200pxのどこかの大きさに変換しようというわけです。
この変換のルールをプログラムするにはmap関数を使い、次のように書きます。
変換後の大きさ = map( 変換したい気温 , 0, 40, 0, 200);
少し複雑な形をしていますが、後ろの4つの引数は「0〜40℃を0〜200pxに」というルールを表現しています。この変換した大きさを使って、四角形を描いてみます。
let n = map(table.get(0,"temp"), 0, 40, 0, 200);
rect(20,20,n,20);
map関数によって17.6℃という気温は約88pxに変換され、四角形の横幅として表現されたのがわかるでしょうか。
すべての気温データを長さに変換する
このように、気温を長さに変換する仕組みがわかれば、後は、forループを使ってすべてのデータを変換しながら図形を描くことができます。
for(let i=0; i<table.getRowCount(); i++){
let n = map(table.get(i,"temp"), 0, 40, 0, 200);
rect(20,10+30*i,n,20);
}
長さだけでなく、色や形に変換するルールを考え、組み合わせることでさまざまな表現が生まれます。ここではそのようなグラフィックとそのコードのほんの一例を載せておきます。
、 、 、
データをどんな視覚要素に適用し、どんなルールで変換するか、その組み合わせは無数にあり、多様な表現を生み出すことができます。また、出来上がったグラフィックを見て楽しむだけでなく、背後にあるデータの特性やそれらの意味についても深く考察する入り口にもなるのです。
データの可視化をプログラミング教育に活用する道
2020年度からはじまった新しい学習指導要領では「学びに向かう力」「社会生活に生きる知識と技能」「思考力、判断力、表現力」の3つの力を柱として、バランスのよい学びと生きる力を育むことをうたっています。
「小学校学習指導要領（平成 29 年告示）解説算数編」によれば、算数科の目標についてもこの理念に寄り添い、「事象を数量や図形及びそれらの関係などに着目して捉え、根拠を基に筋道を立てて考え、統合的・発展的に考えること」を「数学的な見方・考え方」として捉え直し、データ活用や、数学（算数）のおもしろさに気づくことを後押しする方針を打ち出しています。
情報可視化プログラミングは、ビジネスや産業にとって不可欠な技術としての側面だけではなく、多様な表現を探求することで、数学的な学びや楽しみを実感するとともに、身の回りにあるデータとの距離を縮め、プログラミング学習のモチベーションを高める手段としても有効に働く可能性を秘めているのです。
表紙のグラフィックについて
筆者が講師を担当する情報科学芸術大学院大学「メディアデザイン演習」で作成された学生作品の一点。日本の5地点（北海道、東京、岐阜、広島、沖縄）の1987〜2017年にかけての30年間の月ごとの平均気温・平均降水量のデータをプログラミングで可視化し、布製品のようなパターンを表現している。（制作：松村明莉）
これまでの【やらずに死ねないプログラミング】は
