D3 v4 with data from Google Sheets

Googleスプレッドシートからデータを取得して、D3.jsを使って棒グラフを描画するサンプル。

元データ
https://docs.google.com/spreadsheet/ccc?key=0ArOQLX5U1kUqdFYxUzcwTDB0UUVnZHBKRnRzbUc3aGc

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
</head>

<body>
<p>人口３００万人以上の県</p>
    
<svg></svg>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

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 rendering(data) {
		var margin = {top:0, left:0, bottom:20, right:0}
		
		var width = 940;
		var height = 400;
		
		var plotWidth  = width - (margin.left + margin.right);
		var plotHeight = height - (margin.top + margin.bottom);

var x = d3.scaleBand()
			.domain(data.map(function(d){ return d[0] }))
			.range([0, plotWidth])
            .paddingInner(0.1)
            .paddingOuter(0.5)
			;

var y = d3.scaleLinear()
			.domain([0, d3.max(data, function(d) { return d[1]; })])
			.range([0, plotHeight]);

// グラフを表示するsvgエリアを作成
		var svg = d3.select("svg")
			.attr("width", width)
			.attr("height", height)
			;

var xAxis = d3.axisBottom().scale(x);
		axisLayer
			.attr("transform", "translate("+[0, plotHeight]+")")
			.call(xAxis)
		
		
	}

})();
</script>
    
</body>
</html>

Modified http://www.google.com/jsapi to a secure url

https://www.google.com/jsapi

https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js