shimizu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    クリックすると、四国がオーストラリアになります。もう一回押すと戻ります。

  
## australia.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              australia.geojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>四国　＝　オーストラリア</title>
<style>
html, body {
	width:100%;
	height: 100%;
	padding: 0px;
	margin:  0px;
}

svg {
    width: 100%;
    height: 100%;
}
</style>

</head>

<body>
<svg></svg>


<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
// Callback Hell!
d3.json("sikoku.geojson", function(sikoku){
	d3.json("australia.geojson", function(australia){
		d3.json("japan.geojson" ,function(japan){
			mapDraw(sikoku, australia, japan);
		})
	});
});


function mapDraw(shikoku, australia, japan) {

	/*** ポリゴンの頂点数を揃える *********************************************************/
	var tmp = australia.features[0].geometry.coordinates[1][0];
	var ausPointLength = tmp.length;
	australia.features[0].geometry.coordinates = [[tmp]];

	tmp = [];
	shikoku.features[0].geometry.coordinates[0][0].forEach(function(d, i){
		tmp.push([d[0]-0.00001,d[1]-0.00001]);
		tmp.push([d[0]+0.00001,d[1]+0.00001]);

		if(i%3==0){
			tmp.push([d[0]-0.00001,d[1]-0.00001]);
			tmp.push([d[0]+0.00001,d[1]+0.00001]);
		}
	});

	while(tmp.length != ausPointLength){
		tmp.push(tmp[tmp.length-1]);
	}

	shikoku.features[0].geometry.coordinates = [[tmp]];
	/*** end ********************************************************************/


	var svg = d3.select("svg");

	var base = svg.append("g").append("path")
		.attr({
			"fill": "#ccc",
			"stroke": "gray"
		});

	var map =  svg.append("g").append("path")
		.attr({
			"fill": "#ccc",
			"stroke": "gray"
		});


	//日本・四国用のプロジェクション
	var projection_japan = d3.geo
		.mercator()		//投影法の指定
		.scale(8000)	//スケール（ズーム）の指定
		.translate([1300,-200])
		.center([139.0032936, 36.3219088]); //中心の座標を指定

	//日本・四国用のパスジェネレーター
	var japan_path = d3.geo.path().projection(projection_japan);


	//ベースポリゴン(日本）を設置
	base.attr("d", japan_path(japan))

	//オーストラリア用プロジェクション
	var projection_australia = d3.geo
		.mercator()
		.scale(400)
		.translate([510,280])
		.center([133.77513599999997, -25.274398]);

	//オーストラリア用のパスジェネレーター
	australia_path = d3.geo.path().projection(projection_australia);

	//初期表示として四国を表示しておく
	map.attr("d", japan_path(shikoku));


	//クリックされたら、四国-オーストラリアに変化する（トグル）
	d3.select("svg").on("click", toggle(
		function () {
			map.transition().ease("elastic").duration(2000).attr("d", australia_path(australia.features[0].geometry));
		},
		function () {
			map.transition().ease("elastic").duration(2000).attr("d", japan_path(shikoku.features[0].geometry));
		}
	));

	//ラベルを設定
	var textPoint = projection_japan([133.38503349999996, 33.5610096])
	svg.append("text")
		.attr({
			"x":textPoint[0],
			"y":textPoint[1],
			"text-anchor":"middle",
			"dominant-baseline":"middle"
		})
		.attr("transform", "translate("+[20, -10]+")")
		.text("Click Me!")


}

function toggle(){
    var fn = arguments;
    var l = arguments.length;
    var i = 0;
    return function(){
        if(l <= i) i=0;
        fn[i++]();
    }
}

</script>


</body>
</html>

## japan.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              japan.geojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## sikoku.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              sikoku.geojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>四国　＝　オーストラリア</title>
	<style>
	html, body {
	width:100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	}

	svg {
	width: 100%;
	height: 100%;
	}
	</style>

	</head>

	<body>
	<svg></svg>



	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
	// Callback Hell!
	d3.json("sikoku.geojson", function(sikoku){
	d3.json("australia.geojson", function(australia){
	d3.json("japan.geojson" ,function(japan){
	mapDraw(sikoku, australia, japan);
	})
	});
	});



	function mapDraw(shikoku, australia, japan) {

	/* ポリゴンの頂点数を揃える *******************************************************/
	var tmp = australia.features[0].geometry.coordinates[1][0];
	var ausPointLength = tmp.length;
	australia.features[0].geometry.coordinates = [[tmp]];

	tmp = [];
	shikoku.features[0].geometry.coordinates[0][0].forEach(function(d, i){
	tmp.push([d[0]-0.00001,d[1]-0.00001]);
	tmp.push([d[0]+0.00001,d[1]+0.00001]);

	if(i%3==0){
	tmp.push([d[0]-0.00001,d[1]-0.00001]);
	tmp.push([d[0]+0.00001,d[1]+0.00001]);
	}
	});

	while(tmp.length != ausPointLength){
	tmp.push(tmp[tmp.length-1]);
	}

	shikoku.features[0].geometry.coordinates = [[tmp]];
	/* end ******************************************************************/


	var svg = d3.select("svg");

	var base = svg.append("g").append("path")
	.attr({
	"fill": "#ccc",
	"stroke": "gray"
	});

	var map = svg.append("g").append("path")
	.attr({
	"fill": "#ccc",
	"stroke": "gray"
	});





	//日本・四国用のプロジェクション
	var projection_japan = d3.geo
	.mercator() //投影法の指定
	.scale(8000) //スケール（ズーム）の指定
	.translate([1300,-200])
	.center([139.0032936, 36.3219088]); //中心の座標を指定

	//日本・四国用のパスジェネレーター
	var japan_path = d3.geo.path().projection(projection_japan);


	//ベースポリゴン(日本）を設置
	base.attr("d", japan_path(japan))

	//オーストラリア用プロジェクション
	var projection_australia = d3.geo
	.mercator()
	.scale(400)
	.translate([510,280])
	.center([133.77513599999997, -25.274398]);

	//オーストラリア用のパスジェネレーター
	australia_path = d3.geo.path().projection(projection_australia);

	//初期表示として四国を表示しておく
	map.attr("d", japan_path(shikoku));


	//クリックされたら、四国-オーストラリアに変化する（トグル）
	d3.select("svg").on("click", toggle(
	function () {
	map.transition().ease("elastic").duration(2000).attr("d", australia_path(australia.features[0].geometry));
	},
	function () {
	map.transition().ease("elastic").duration(2000).attr("d", japan_path(shikoku.features[0].geometry));
	}
	));

	//ラベルを設定
	var textPoint = projection_japan([133.38503349999996, 33.5610096])
	svg.append("text")
	.attr({
	"x":textPoint[0],
	"y":textPoint[1],
	"text-anchor":"middle",
	"dominant-baseline":"middle"
	})
	.attr("transform", "translate("+[20, -10]+")")
	.text("Click Me!")


	}

	function toggle(){
	var fn = arguments;
	var l = arguments.length;
	var i = 0;
	return function(){
	if(l <= i) i=0;
	fn[i++]();
	}
	}

	</script>





	</body>
	</html>