About

2016年12月1日から公開された津山市オープンデータを用いて何か作って欲しいという依頼を受け，ひとまず財政状況を可視化するという単純なウェブサイトを作成しました。

津山市財政見守り隊

そこで詰まったことをメモ的に書き留めています。

津山市のオープンデータ

もともと冊子で公開しているExcelデータをそのまま公開していたり，ものによってはCSVで公開されていたりと，多種多様です。（位置のオープンデータは衝撃を受けました。)

そのうち今回は 津山市_一般会計・決算_2015分_20161201 を使用します。

ファイルを見る

中身を見ると，色々と突っ込みたいところがあります。見た目を整えるための改行や，「平成」が付いているもの，ついていないものの表記ゆれ，また値が存在しないものに関しては0ではなく ー で埋められているなど…。

「とりあえず公開して，使ってもらいたい」というデータだと思いますので，これからの改善に期待です（私からも要望を幾つかお伝えしました）。

追記

津山市役所にて，「見守り隊」の作成およびオープンデータの改善点についてのプレゼンテーションを行いました。
http://www.slideshare.net/Raryosu/ss-71078777

具体的な作業

CSVファイルにする

ひとまず，このままではどうしようもないので，歳入と歳出のファイルをわけて，CSVに変換，そして無駄な改行を省きます。
なるべく元データを改変せずに，クライアントサイドでひたすら処理するようにします。

D3.jsで読み込む

d3.csv("/tsuyama/revenue.csv", function(csvdata) {
  // 具体的な処理内容
});

これだけでCSVファイルを読み込んでよしなにしてくれるなんて素敵な時代ですね…。

データを加工する

Javascriptで先程のCSVを読み込んで，適切な形に変更します。

d3.csv("/tsuyama/revenue.csv", function(csvdata) {
  // データセット(数値)を保存する配列
  var dataset = [];
  // グラフに表示するラベルを保存する配列
  var labelset = [];
  // グラフの最大長(ここでは最大のデータ)
  var max_width = 0;
  for(var count=0; count<csvdata.length; count++) {
    // ここでは26年度の決済データを読み込む
    // 正規表現でいらない文字列を消したり，置換
    var money = parseInt(csvdata[count]["26年度決算"]
        .replace(/,/g, "")
        .replace(/－/g, "0"));
    // ラベルデータを引っ張る
    var label = csvdata[count]["款"] + " " + money.toLocaleString() + "千円";
    // 最大値を見つける
    if(max_width < money) {
      max_width = money;
    }
    // データセットをpush
    dataset.push(money);
    labelset.push(label);
  }
  // グラフを描画する要素を指定
  var canvas = d3.select("#h26gen-in");
  // グラフを描画
  make(dataset, labelset, max_width, canvas);
});

グラフを描画

グラフを描画する make 関数は以下のようにします。

/**
 * make - グラフを描画する
 *
 * @param dataset [] データセット
 * @param labelset [] ラベル
 * @param max_width int 最大長
 * @param canvas object グラフを描画するエリア
 */
function make(dataset, labelset, max_width, canvas) {
  // キャンバスサイズ(マジックナンバーが多いから直さないといけない)
  var svg = canvas.append("svg")
    .attr({
      width: parseInt(max_width) / 8000 + 50,
      height: dataset.length * 30,
    });
  // 棒グラフを描画
  svg.selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect')
    .attr({
      x : 0,
      y : function(d, i) { return 30 * i; },
      width : function(d) { return d/8000; },
      height : 25,
      fill : '#6fbadd'
    });
  // ラベルを表示
  svg.selectAll('text')
    .data(labelset)
    .enter()
    .append('text')
    .attr({
      x: 2,
      y: function(d, i) { return 20 + 30*i; },
    })
    .text(function(d) {
      return d;
    });
}

グラフを表示してみる

d3.js本体と，先程のスクリプトを読み込み，HTMLに以下を書くといとも簡単にグラフを表示することができます。

<div id="h26gen-in"></div>

まとめ

かなり荒削りなコードですが，思いの外簡単にd3.jsでグラフを描画することができました。（コードが汚すぎますが…）

津山市のオープンデータについては，現状では面白いデータがなく，また使いにくい形式ですが，ぜひ何か作ってそういったフィードバックなどをしてみるのも良いかと思います。

津山市のオープンデータを使って一般会計予算・決算を棒グラフで可視化する