Googleスプレッドシートからデータを取得して、D3.jsを使って棒グラフを描画するサンプル。
Created
September 21, 2017 10:33
-
-
Save shimizu/733513c348f2a4bd6c8aef749ab8b556 to your computer and use it in GitHub Desktop.
D3 v4 with data from Google Sheets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> | |
<title></title> | |
</head> | |
<body> | |
<p>人口300万人以上の県</p> | |
<svg></svg> | |
<script type="text/javascript" src="http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment