【D3.js】Googleスプレッドシートに入力したデータを可視化する

概要

Google Visualization APIには、Googleスプレッドシートを簡易DBとして外部から呼び出して使うことのできる機能が備わってます。

Google Visualization API Reference

参考
Google Visualization API 詳細、および Gadgets-in-Docs の作り方

このAPIを使ってGoogleスプレッドシートのデータをD3.jsで可視化してみました。

サンプル

example

ポイント

スプレッドシートからデータを読み出している部分は以下。

google.load("visualization", "1");
google.setOnLoadCallback(init);

function init() {
	var query = new google.visualization.Query("https://docs.google.com/spreadsheet/ccc?key=0ArOQLX5U1kUqdFYxUzcwTDB0UUVnZHBKRnRzbUc3aGc");
	query.setQuery("select *  where B &gt; 3000000  "); //SQLに似た構文でフィルタをかけることができる。
	query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
	// データ取得
	var data = response.getDataTable();
	
	//DataTableオブジェクトを二次元に変換
	var DataArray = new Array(data.getNumberOfRows());
	for (var row = 0; row &lt; data.getNumberOfRows(); row++) {
		 DataArray[row] = new Array(data.getNumberOfColumns());
		for (var col = 0, n = data.getNumberOfColumns(); col &lt; n; col++) {
			if(col &gt; 0){
				DataArray[row][col] = Math.floor(data.getFormattedValue(row, col) / 10000); //万人単位に変換
			}else{
				DataArray[row][col] = data.getFormattedValue(row, col);
			}
		}    
	}
	
	//変換した配列をD3.jsに渡す
	rendering(DataArray);
}

google.load("visualization", "1");

google.setOnLoadCallback(init);

function init() {

var query = new google.visualization.Query("https://docs.google.com/spreadsheet/ccc?key=0ArOQLX5U1kUqdFYxUzcwTDB0UUVnZHBKRnRzbUc3aGc");

query.setQuery("select * where B > 3000000 "); //SQLに似た構文でフィルタをかけることができる。

query.send(handleQueryResponse);

}

function handleQueryResponse(response) {

// データ取得

var data = response.getDataTable();

//DataTableオブジェクトを二次元に変換

var DataArray = new Array(data.getNumberOfRows());

for (var row = 0; row < data.getNumberOfRows(); row++) {

DataArray[row] = new Array(data.getNumberOfColumns());

for (var col = 0, n = data.getNumberOfColumns(); col < n; col++) {

if(col > 0){

DataArray[row][col] = Math.floor(data.getFormattedValue(row, col) / 10000); //万人単位に変換

}else{

DataArray[row][col] = data.getFormattedValue(row, col);

}

//変換した配列をD3.jsに渡す

rendering(DataArray);

}

【D3.js】Googleスプレッドシートに入力したデータを可視化する

概要

サンプル

ポイント

投稿者: shimizu

コメントを残すコメントをキャンセル

概要

サンプル

ポイント

投稿者: shimizu

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル