技術戦略部より、tipsやノウハウなど技術的な話題を発信いたします。d3.jsでデータ可視化Node.jsSailsこんにちは、開発チームのさわむらです。こちら弊社エントランスです。そのエントランスに置かれているのがこちら。visualizer」というものです。DELIVERY」というものがあります。export」の開発に私が所属するユニットは携わっていました。visualizerです。世界地図上にデータを円で描画して可視化をしています。visualizerですが、サーバー側をsails.js、地図、データの描画をd3.jsを使って作られています。今回はそのsails.jsとd3.jsを使ってのデータの可視化の部分をご紹介したいと思います。sails.jsとd3.jsについてsails.jsNode.jsのMVCフレームワーク。http://sailsjs.com/d3.jsデータをブラウザで可視化するためのライブラリ。データに基づいてSVGを操作してデータを可視化します。今回は以下の環境で進めていきます。-g早速sailsプロジェクトを作成してみましょう。アクセスするとデフォルトのプロジェクトページが表示されます。controller、viewの作成サーバーの稼働確認をしたところで、controllerの作成からはじめます。今回はRetailerCountというcontrollerとindexアクションを作成しています。indexここで、サーバーを再起動してhttp://localhost:1337/retailerCount/にアクセスすると以下のように表示されます。次にRetailerCountControllerのindexアクションに紐づくviewを作っていきます。indexアクションがHTMLページでレスポンスするように変更します。}};res.view()は常に小文字でviewファイルを探しにいくので、今回の場合だとviews/retailercount/index.ejsを見つけにいきます。(sailsのデフォルトのビューエンジンはEJSです。)views/retailercount/index.ejsを作成してhttp://localhost:1337/retailerCount/にアクセスしてみましょう。今回はサーバーの再起動は必要ありません。sails.js表示されました。Earth(http://www.naturalearthdata.com/)から入手できます。地図データをダウンロードします。■地図データの変換ここで、d3.jsで地図を描画できるのはGeoJSON(またはTopoJSON)形式となるので、先ほどダウンロードした地図データをGeoJSON形式へ変換する必要があります。今回はGDALというライブラリのogr2ogrというコマンドでGeoJSONへ変換します。Earthからダウンロードしたshape形式(.shp)のデータをworld.jsonという名前のGeoJSONに変換しています。適当な場所に配置します。そのファイルをd3.jsに読み込ませて世界地図を描画していきましょう。d3.jsでは様々な投影法で地形を描画できます。https://github.com/d3/d3-geo/blob/master/README.md今回はその中からd3.geo.mercatorで描画します。下に地図描画を行うjsを作成します。マップの表示領域の作成、d3.js等の読み込み、先ほど作成したdrawMap()の呼び出しを記述します。アクセスして地図を確認してみましょう。世界地図が描画されるはずです。■DB接続oracleが公開しているnode-oracledbドライバを使ってoracleに繋ぎます。ClientのbasicとSDKのrpmをダウンロードしてきます。http://www.oracle.com/technetwork/topics/linuxx86-64soft-092277.htmlダウンロードしてきたら、Debianパッケージに変換してインストールします。oracle-instantclient12.1-devel_12.1.0.2.0-2_amd64.deb下準備が整ったとこで、node-oracledbをインストールします。oracledb次にsailsプロジェクトのconfig下に接続情報のdbconfig.jsとapi/service下にDBに接続してsqlを実行するOracleService.jsを作成します。{reject(err.message);});});}}RetailerCountController.jsにsqlを実行してデータを取得するgetCountアクションを追加して取得したデータを確認してみます。alpha-2の国名コードを元に、その国の首都に会員数を円で描画します。そのためにはそれぞれの国の首都の緯度経度情報が必要になります。以下のアマノ技研さんのサイトからCSV形式でダウンロードできます。(今回はcountries.jsonという名前で作成しています。)■データの描画それではgetCountアクションに追記していきます。getCountアクションで取得した会員数を国名コードをもとにcountries.jsonに追加したものを返すようにしています。{console.error(err);});}};view側でgetCountアクションを呼び出して、結果のjsonをd3.jsに渡して円を描画します。アクセスして地図を確認してみます。データが描画できました。おわりに今回はsails.jsとd3.jsを使ってのデータの可視化のご紹介でした。visualizerはjsの知識を深めようということで、実務以外でユニットの目標として作ったものでしたが、データの可視化の経験がなかった身としてはすごくいい経験になったと思っています。