Skip to content

Instantly share code, notes, and snippets.

@shimizu

shimizu/.block

Created September 21, 2017 10:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save shimizu/733513c348f2a4bd6c8aef749ab8b556 to your computer and use it in GitHub Desktop.
Save shimizu/733513c348f2a4bd6c8aef749ab8b556 to your computer and use it in GitHub Desktop.
Download ZIP
D3 v4 with data from Google Sheets
Raw
.block
license: mit
Raw
README.md
Raw
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="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