xxxxxxxxxx
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>人口</title>
<div class="container"></div>
</head>
<body>
<script type="text/javascript">
//var gDataset;
d3.csv("choka.csv", function(error, dataset) {
var w = 1200;
var h = 600;
var container = d3.select('.container');
var svg = container.append('svg')
.attr('width', w)
.attr('height', h);
// background fill
svg.append('rect')
.attr('class', 'background')
.attr('width', '100%')
.attr('height', '100%')
.attr('fill', 'ivory');
console.log(dataset);
//gDataset = dataset;
// set category label
//var categoryLabels = ['biscuit', 'chocolate'];
var categoryLabels = Object.keys(dataset[0]);
categoryLabels.some(function(v, i){
if (v === 'ken') { categoryLabels.splice(i, 1);}
});
//nendailavel-console.log(categoryLabels);
svg.selectAll('text.categoryLabel')
.data(categoryLabels)
.enter()
.append('text')
.attr('class', 'categoryLabel')
.attr('x', function(d, i){return (i + 0.5) * w / categoryLabels.length;})
.attr('y', 20)
.attr('text-anchor', 'middle')
.attr('font-size', 9)
.attr('font-family', 'Helvetica')
.attr('font-weight', 'bold')
.attr('value', function(d){return d;})
.style('cursor', 'pointer')
//.attr('onclick', function(d){return "updateBar('" + d + "')";})
.text(function(d){return d + '年';});
d3.selectAll('text.categoryLabel').on('click', function(){
updateBar(this.getAttribute('value'));
});
// set ken text
svg.selectAll('text.ken')
.data(dataset)
.enter()
.append('text')
.attr('class', 'ken')
.attr('x', function(d, i){return (i + 0.5) * w / dataset.length;})
.attr('y', h * 0.8 - 2)
.attr('text-anchor', 'middle')
.attr("font-family","sans-serif")
.attr("font-size","6px")
.text(function(d){return d.ken;});
//updateBar('chocolate');
var updateBar = function(category) {
var svg = d3.select('svg'); // svg要素
//var dataset = gDataset; //svg.selectAll('rect.bar').data;
var chartHeight = h - 430; // グラフの高さ:svgの高さマイナス20(430に変更)ピクセル
var maxvalue = d3.max(dataset, function(d){return +d[category];}); // カテゴリの値の最大値
console.log(maxvalue);
// 高さをスケールする関数 (0~2500 を 0~chartHeight-20 に収める)
var scaleheight = d3.scale.linear()
.domain([-80000, 0, 80000])
.range([h * 0.8 - 20, 0, h * 0.8 - 20]);
// 色の彩度をスケールする関数 (0~2500 を 20~80 に収める)
var scaleSaturation = d3.scale.linear()
.domain([-2500, 0, 2500])
.range([80, 20, 80]);
// barクラスのrectを全選択し、データをセットする
var bar = svg.selectAll('rect.bar')
.data(dataset);
// 作成
bar.enter()
.append('rect')
.attr('class', 'bar')
.attr('fill', function(d) { return 'none'; }) // 色の初期値はなし
.attr("x", function(d,i){
return i*(w/dataset.length)
})
.attr("y", function(d){
if(d>0){
return h * 0.8 - 12; // h * 0.8 を基準の高さにする
} else {
return h * 0.8 + 2; // h * 0.8 を基準の高さにする
}
})
.attr('width', Math.floor(w / dataset.length))
.attr("height", 0) // 高さの初期値はなし
.on('mouseover', function(){ // マウスオーバーイベント
d3.select(this)
.attr("fill",function(d){
if (d[category] > 0){ //プラスの場合
return "orange";
} else { //マイナスの場合
return "cyan";
}});
})
.on('mouseout', function(){ // マウスアウトイベント
d3.select(this)
.transition() // アニメーション
.duration(200) // 200ミリセカンド
.attr('fill', function(d) {
if (d[category] > 0) {
// プラスの場合、赤色(彩度変化)
return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)';
} else {
// マイナスの場合、青色(彩度変化)
return 'hsl(240, '+ scaleSaturation(d[category]) +'%, 50%)';
}
});
})
// 削除
bar.exit().remove();
// 更新
bar.transition()
.delay(function(d,i){return i*50;})
.duration(300)
.attr('fill', function(d) {
if (d[category] > 0) {
// プラスの場合、赤色(彩度変化)
return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)';
} else {
// マイナスの場合、青色(彩度変化)
return 'hsl(240, '+ scaleSaturation(d[category]) +'%, 50%)';
}
})
// 高さはscaleheigtで計算
.attr('height', function(d){return scaleheight(d[category]);})
.attr('y', function(d) {
if (d[category] > 0) {
// プラスの場合のy座標
return h * 0.8 - 12 - scaleheight(d[category]);
} else {
// マイナスの場合のy座標
return h * 0.8 + 2;
}
})
};
d3.select(self.frameElement).style("height", h + "px");
});
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js