jinkou

#都道府県別人口超過のグラフ

<!DOCTYPE html>
<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'];

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) {
		        // プラスの場合のｙ座標
		        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