Ken

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

<html lang="ja">
   <head>
   <meta charset="utf-8">  
   
   <title>svg</title>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"> </script>
   
    <style type="text/css">
    
    div.bar {
				display: inline-block;
				width: 20px;
				height: 75px;	/* Gets overriden by D3-assigned height below */
				margin-right: 2px;
				background-color: teal;
				
			}

</style>
   
   
    
   
   </head>
  
  
   <body>
     
    
   <script type="text/javascript">

var w = 1800;
   var h = 1000;
   var barPadding=5;
  
  //https://www.stat.go.jp/data/idou/
  //https://www.stat.go.jp/data/idou/3.htm
   var dataset = [-8639, -6547, -3312, 2501, -4378, -3554, -1933, -6670, -2000, -1018, 18375, 6759, 76027, 14887, -5443, -1198, -734, -2101, -2720, -3703, -5480, -7114, 7978, -3134, -788, -1529, -1666, -7407, -3049, -2766, -1255, -1361, -1205, -3803, -3472, -1590, -1142, -3283, -2291, 1530, -2338, -6080, -3002, -2755, -3126, -4222, -249];

var kendata = ["北海道", "青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県", "茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県", "三重県", "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県", "鳥取県", "島根県", "岡山県", "広島県", "山口県", "徳島県", "香川県", "愛媛県", "高知県", "福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県"];

var svg = d3.select("body")
						   .append("svg")
						   .attr("width", w)
						   .attr("height", h);

svg.selectAll("rect")
			   .data(dataset)
			   .enter()
			   .append("rect")
			   .attr("x", function(d,i){
			     return i*(w/dataset.length)
			   })
         .attr("y", function(d){
           if(d>0){
             return h * 0.8 - 12 - (d / 100); // h * 0.8 を基準の高さにする
			     } else {
			       return h * 0.8; // h * 0.8 を基準の高さにする
  			   }
         })
			   .attr("width", w/dataset.length-barPadding)
			   .attr("height",function(d){
			     return Math.abs(d) / 100; // 高さは数値の絶対値から計算する
			   })
			   .attr("fill",function(d){
						  if (d > 0){
                return "blue"; //プラスの場合
              } else {
                return "red"; //マイナスの場合
              }
			   });

//ラベル
			svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d){
			     var nin = d3.format(',');
			     return nin(d);
			   })
			   .attr("x",function(d,i){
             return i*(w/dataset.length)+(w/dataset.length-barPadding)/2;
         })
         .attr("y",function(d){
           if(d>0){
             return h * 0.8 - 12 - (d / 100) - 4; // h / 2 を基準の高さにする
			     } else {
			       return h * 0.8 - (d / 100) + 14; // h / 2 を基準の高さにする
  			   }
         })
         .attr("font-family","sans-serif")
         .attr("font-size","8px")
         .attr("fill","black")
         .attr("text-anchor","middle");

//県のラベル
			svg.selectAll("text.ken")
			   .data(kendata)
			   .enter()
			   .append("text")
			   .text(function(d){
			     return d;
			   })
			   .attr("x",function(d,i){
             return i*(w/dataset.length)+(w/dataset.length-barPadding)/2;
         })
         .attr("y",function(){
             return h * 0.8 - 2;
         })
         .attr("font-family","sans-serif")
         .attr("font-size","8px")
         .attr("fill","black")
         .attr("class","ken")
         .attr("text-anchor","middle");

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js