D3 v4 with data from Google Sheets by shimizu

index.html

<!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="//www.google.com/jsapi"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>    


<script>
 !(function(){
	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();
		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);
				}
			}    
		}
		rendering(DataArray);
	}

	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 plotLayer = svg.append("g")
			.attr("width", plotWidth)
			.attr("height", plotHeight)
			.attr("transform", "translate("+[margin.left, margin.top]+")")
			; 
			
		var axisLayer = svg.append("g")
			.attr("width", plotWidth)
			.attr("height", plotHeight)
			.attr("transform", "translate("+[margin.left, margin.top]+")")
			
			
		//棒グラフの表示    
		plotLayer.selectAll("rect")
		  .data(data)
		  .enter()
		  .append("rect")
		  .attr("x", function(d, i) { return x(d[0]); })
		  .attr("y", function(d) { return plotHeight - y(d[1]); })
		  .attr("height", function(d) { return y(d[1]); })
		  .attr("width", x.bandwidth())
		  .attr("fill", "#2d578b")
		  ;
			
		
		plotLayer.selectAll("text")
			.data(data)
			.enter()
			.append("text")
			.attr("fill", "white")
			.attr("y", "1em")
			.attr("text-anchor", "middle")
			.attr("dominant-baseline", "middle")
			.attr("transform", function(d){ return "translate("+[x(d[0]) + x.bandwidth()/2, plotHeight - y(d[1])] + ")"; })
			.text(function(d){ return d[1] })
			;

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

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