sugi2000/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #都道府県別人口超過のグラフ
出典：住民基本台帳人口移動報告　統計表
Built with blockbuilder.org

  
## index.html
<html lang="ja">
   <head>
   <meta charset="utf-8">
   <!--"utf-8"とは日本語の文字エンコーディングの値,head内に書く）-->
   <title>svg</title>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"> </script>
   <!--d3のライブラリの在処-->
    <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>
   <!--style type ここでは、cssの内容を記述-->


   </head>


   <body>

    <!--JavaScript は、通常 <script>～</script> の間に記述-->
   <script type="text/javascript">

   var w = 1800;
   var h = 1000;
   var barPadding=5;

  //http://www.stat.go.jp/data/idou/
  //http://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>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<!--"utf-8"とは日本語の文字エンコーディングの値,head内に書く）-->
	<title>svg</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"> </script>
	<!--d3のライブラリの在処-->
	<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>
	<!--style type ここでは、cssの内容を記述-->



	</head>


	<body>

	<!--JavaScript は、通常 <script>～</script> の間に記述-->
	<script type="text/javascript">

	var w = 1800;
	var h = 1000;
	var barPadding=5;

	//http://www.stat.go.jp/data/idou/
	//http://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>