codefactory/html5_springy.html

## html5_springy.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Features</title>
	<style>
		html, body {
			height: 100%;
		}
	</style>
</head>
<body>

	<canvas id="html5-features"></canvas>

	<script src="jquery-1.9.0.min.js"></script>
	<script src="../springy/springy.js"></script>			<!-- http://getspringy.com/ -->
	<script src="../springy/springyui.js"></script>		<!-- http://getspringy.com/ -->
	<script>
		// 페이지 로드 후 canvas의 크기를 화면에 꽉차도록 조절
		$('#html5-features').attr({
			width: document.body.clientWidth,
			height: document.body.clientHeight
		});

		var graph = new Graph(),
				colors = ['#00A0B0', '#6A4A3C', '#CC333F', '#EB6841', '#EDC951', '#7DBE3C', '#00A0B0', '#6A4A3C', '#CC333F', '#EB6841'],
				colorsLen = colors.length,
				i, j, k, len,
				depth1, depth2, depth3;

		$.getJSON('data/html5.json', function (data) {		// http://codefactory.kr/demos/graphs/data/html5.json

			// 아래의 코드에서 newNode를 만들 때 depth 속성은 Springy 라이브러리에서 원래 제공하는 속성이 아니라 제가 사용하려고 임의로 넣은 것입니다.
			for (i in data) {

				depth1 = graph.newNode({label: i, depth: 1});		// depth1 node

				for (j in data[i]) {

					depth2 = graph.newNode({label: j, depth: 2});		// depth2 node
					graph.newEdge(depth1, depth2);	// depth1과 depth2 연결

					len = data[i][j].length;

					for (k = 0; k < len; k++) {

						depth3 = graph.newNode({label: data[i][j][k], depth: 3});		// depth3 node
						graph.newEdge(depth2, depth3, {color: colors[k % colorsLen]});		// depth2와 depth3 연결, 예쁘게 하려고 색상 넣음

					}

				}

			}

			// springy 만듬
			var springy = $('#html5-features').springy({
				graph: graph,
				nodeSelected: function(node){
					var url = 'https://www.google.com/#q=' + encodeURIComponent('html5 ' + node.data.label);

					// depth가 3인 경우 구글 검색 결과를 새 창으로 띄움
					if (node.data.depth == 3) {
						window.open(url);
					}
				}
			});

		});
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>HTML5 Features</title>
	<style>
	html, body {
	height: 100%;
	}
	</style>
	</head>
	<body>

	<canvas id="html5-features"></canvas>

	<script src="jquery-1.9.0.min.js"></script>
	<script src="../springy/springy.js"></script> <!-- http://getspringy.com/ -->
	<script src="../springy/springyui.js"></script> <!-- http://getspringy.com/ -->
	<script>
	// 페이지 로드 후 canvas의 크기를 화면에 꽉차도록 조절
	$('#html5-features').attr({
	width: document.body.clientWidth,
	height: document.body.clientHeight
	});

	var graph = new Graph(),
	colors = ['#00A0B0', '#6A4A3C', '#CC333F', '#EB6841', '#EDC951', '#7DBE3C', '#00A0B0', '#6A4A3C', '#CC333F', '#EB6841'],
	colorsLen = colors.length,
	i, j, k, len,
	depth1, depth2, depth3;

	$.getJSON('data/html5.json', function (data) { // http://codefactory.kr/demos/graphs/data/html5.json

	// 아래의 코드에서 newNode를 만들 때 depth 속성은 Springy 라이브러리에서 원래 제공하는 속성이 아니라 제가 사용하려고 임의로 넣은 것입니다.
	for (i in data) {

	depth1 = graph.newNode({label: i, depth: 1}); // depth1 node

	for (j in data[i]) {

	depth2 = graph.newNode({label: j, depth: 2}); // depth2 node
	graph.newEdge(depth1, depth2); // depth1과 depth2 연결

	len = data[i][j].length;

	for (k = 0; k < len; k++) {

	depth3 = graph.newNode({label: data[i][j][k], depth: 3}); // depth3 node
	graph.newEdge(depth2, depth3, {color: colors[k % colorsLen]}); // depth2와 depth3 연결, 예쁘게 하려고 색상 넣음

	}

	}

	}

	// springy 만듬
	var springy = $('#html5-features').springy({
	graph: graph,
	nodeSelected: function(node){
	var url = 'https://www.google.com/#q=' + encodeURIComponent('html5 ' + node.data.label);

	// depth가 3인 경우 구글 검색 결과를 새 창으로 띄움
	if (node.data.depth == 3) {
	window.open(url);
	}
	}
	});

	});
	</script>
	</body>
	</html>