﻿<!--Simple Ontology Visualization VIS Script, generated by MakeGraph 3.0(2018.06.12)-->

<html>
<head>
	<title>Simple Ontology Visualization: w10</title>
	<meta property="og:title" content="Simple Ontology Visualization: w10"/>
	<meta property="og:image" content="http://dh.aks.ac.kr/Graph/vis/img/makeGraph.jpg"/>
	<meta name="description" content="vis.js Network API Script"/>
	<meta name="author" content="Center for Digital Humanities at AKS"/>
	<script type="text/javascript" src="http://dh.aks.ac.kr/Graph/vis/dist/vis.js"></script>
	<link href="http://dh.aks.ac.kr/Graph/vis/dist/vis.css" rel="stylesheet" type="text/css" />
	<link href="http://dh.aks.ac.kr/Graph/vis/dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
	<style type="text/css">
		#mynetwork {
			border: 1px solid lightgray;
		}
	</style>
</head>
<body>

	<div id="mynetwork"></div>

	<script type="text/javascript">

	var nodesArray = [], edgesArray = [];
	var nodes, edges, network, container, options, data;

	function draw() {

			nodesArray.push({
				id: '001',
        		group: 'visual',
        		label: '2.8독립선언',
        		title: '<img src="w10mxs.jpg"/>',
        		shape: 'circularImaget',
        		image: 'w10mxs.jpg',
        		url: 'http://hwiki.eumstory.co.kr/index.php/2.8_%EB%8F%85%EB%A6%BD%EC%84%A0%EC%96%B8'
			});

			nodesArray.push({
				id: '002',
        		group: '인물',
        		label: '백관수',
        		title: '<img src="정창섭xs.jpg"/>',
        		shape: 'circle',
        		image: '정창섭xs.jpg',
        		url: 'http://kadhlab102.com/wiki/index.php/%EC%A0%95%EC%B0%BD%EC%84%AD'
			});

			nodesArray.push({
				id: '003',
        		group: 'visual',
        		label: '이광수',
        		title: '<img src="이광수.jpg"/>',
        		shape: 'circularImage',
        		image: '이광수.jpg',
        		url: 'http://hwiki.eumstory.co.kr/index.php/%EC%9D%B4%EA%B4%91%EC%88%98'
			});

			nodesArray.push({
				id: '004',
        		group: '인물',
        		label: '안창호',
        		title: '<img src="안창호.jpg"/>',
        		shape: 'circle',
        		image: '안창호.jpg',
        		url: 'http://encykorea.aks.ac.kr/Contents/Index?contents_id=E0050867'
			});

			nodesArray.push({
				id: '005',
        		group: '사건',
        		label: '일제강점기',
        		title: '<img src="일제강점기.jpg"/>',
        		shape: 'star',
        		image: '일제강점기.jpg',
        		url: 'http://encykorea.aks.ac.kr/Contents/Index?contents_id=E0033249'
			});

			nodesArray.push({
				id: '006',
        		group: 'visual',
        		label: '무정',
        		title: '<img src="무정.png"/>',
        		shape: 'circularImage',
        		image: '무정.png',
        		url: 'http://encykorea.aks.ac.kr/Contents/Index?contents_id=E0018631'
			});

			nodesArray.push({
				id: '007',
        		group: 'visual',
        		label: '민족개조론',
        		title: '<img src="민족개조론.jpg"/>',
        		shape: 'circularImage',
        		image: '민족개조론.jpg',
        		url: 'http://encykorea.aks.ac.kr/Contents/Index?contents_id=E0002596'
			});

			nodesArray.push({
				id: '008',
        		group: '문헌',
        		label: '흙',
        		title: '<img src="흙.jpg"/>',
        		shape: 'rect',
        		image: '흙.jpg',
        		url: 'http://encykorea.aks.ac.kr/Contents/Index?contents_id=E0065946'
			});

			nodesArray.push({
				id: '009',
        		group: '장소',
        		label: '이광수 생가',
        		title: '<img src="이광수 생가.jpg"/>',
        		shape: 'rect',
        		image: '다산초당xs.jpg',
        		url: 'http://www.heritage.go.kr/heri/cul/culSelectDetail.do?VdkVgwKey=79,00870000,11&pageNo=5_2_1_0'
			});

			nodesArray.push({
				id: '010',
        		group: '장소',
        		label: '자강도',
        		title: '<자강도.jpg"/>',
        		shape: 'rect',
        		image: '조선민주주의인민공화국 자강도.jpg',
        		url: 'https://ko.wikipedia.org/wiki/%EC%9E%90%EA%B0%95%EB%8F%84'
			});

			nodesArray.push({
				id: '011',
        		group: '장소',
        		label: '평안북도 정주군',
        		title: '<img src="평안북도 정주군.jpg"/>',
        		shape: 'rect',
        		image: '평안북도 정주군.jpg',
        		url: 'https://ko.wikipedia.org/wiki/%EC%A0%95%EC%A3%BC%EC%8B%9C'
			});

			nodesArray.push({
				id: '013',
        		group: '장소',
        		label: '조선민주주의인민공화국',
        		title: '<img src="조선민주주의인민공화국.jpg"/>',
        		shape: 'rect',
        		image: '조선민주주의인민공화국.jpg',
        		url: 'https://ko.wikipedia.org/wiki/%EC%A1%B0%EC%84%A0%EB%AF%BC%EC%A3%BC%EC%A3%BC%EC%9D%98%EC%9D%B8%EB%AF%BC%EA%B3%B5%ED%99%94%EA%B5%AD'
			});

			nodesArray.push({
				id: '015',
        		group: '기관',
        		label: '동경 기독교청년회관',
        		title: '<img src="기독교청년회관.jpg"/>',
        		shape: 'square',
        		image: '기독교청년회관.jpg',
        		url: 'http://www.aks.ac.kr'
			});

                                   nodesArray.push({
				id: '017',
        		group: 'visual',
        		label: '오산학교',
        		title: '<img src="오산학교.jpg"/>',
        		shape: 'circularImage',
        		image: '오산학교.jpg',
        		url: 'http://www.aks.ac.kr'
			});

			edgesArray.push({
				from: '002',
				to: '001',
				label: '~이 지었다.',
				title: 'magenta',
				arrows: 'to',
			});

			edgesArray.push({
				from: '003',
				to: '001',
				label: '~이 지었다.',
				title: 'brown',
				arrows: 'to',
			});


			edgesArray.push({
				from: '001',
				to: '015',
				label: '~에서 발표했다.',
				title: 'cyan',
				arrows: '',
			});

			edgesArray.push({
				from: '003',
				to: '004',
				label: '~을 섬겼다',
				title: 'red',
				arrows: 'to',
			});

			edgesArray.push({
				from: '003',
				to: '005',
				label: '~을 겪었다',
				title: 'orange',
				arrows: 'to',
			});

			edgesArray.push({
				from: '003',
				to: '006',
				label: '~을 지었다',
				title: 'brown',
				arrows: 'to',
			});

			edgesArray.push({
				from: '003',
				to: '007',
				label: '~을 지었다',
				title: 'brown',
				arrows: 'to',
			});

			edgesArray.push({
				from: '003',
				to: '008',
				label: '~을 지었다',
				title: 'brown',
				arrows: 'to',
			});

			edgesArray.push({
				from: '003',
				to: '009',
				label: '~에 살았다',
				title: 'cyan',
				arrows: '',
			});

			edgesArray.push({
				from: '003',
				to: '010',
				label: '~에 잠들다',
				title: 'cyan',
				arrows: '',
			});

			edgesArray.push({
				from: '009',
				to: '011',
				label: '~에 있다',
				title: 'cyan',
				arrows: '',
			});

			edgesArray.push({
				from: '010',
				to: '013',
				label: '~에 있다',
				title: 'cyan',
				arrows: '',
			});

                                    edgesArray.push({
				from: '003',
				to: '017',
				label: '~에서 가르쳤다.',
				title: 'cyan',
				arrows: '',
			});

                                    edgesArray.push({
				from: '004',
				to: '017',
				label: '~에 있었다.',
				title: 'cyan',
				arrows: '',
			});

			nodes = new vis.DataSet(nodesArray);
			edges = new vis.DataSet(edgesArray);

			// create a network
			var container = document.getElementById('mynetwork');
			var data = { nodes: nodes, edges: edges };

			var options = {
				groups: {
					'작품': { shape: 'rect', color: { border: 'olive'} },
					'인물': { shape: 'circle', color: { border: 'crimson'} },
					'장소': { shape: 'rect', color: { border: 'blue'} },
					'사건': { shape: 'star', color: { border: 'orange'} },
					'문헌': { shape: 'rect', color: { border: 'brown'} },
					'기관': { shape: 'square', color: { border: 'violet'} },
				},
				nodes: { size: 30, margin: 5,
					color: { background: 'white',
						highlight: { border: 'gold', background: '#D2E5FF' },
						hover: { border: 'gold', background: '#D2E5FF' },
					},
					font: { face: '함초롬바탕', color: 'black', size: 15 },
					labelHighlightBold: true,
					shadow: false
				},
				edges: { length: 300, width: 1,
					color: { color: 'lightgray', highlight: 'grey', opacity: 1.0 },
					font: { face: '맑은 고딕', align: 'bottom', size: 12, color: 'darkcyan', strokeWidth: 5, strokeColor: 'white' },
					smooth: { enabled: true, type: 'dynamic', roundness: 0.1 }
				},
				layout: { randomSeed: 100,
					hierarchical: { enabled: false,
						direction: 'Left-Right',
						sortMethod: 'directed'
					}
				},
				interaction: { navigationButtons: true },
				physics: { stabilization: false }
			};

    		// initialize your network!
    		var network = new vis.Network(container, data, options);

    		// select a node to open a related web page.
    		network.on('selectNode', function(params) {
			var sel = params.nodes[0];
			var rows = nodesArray.length;
			for (var i = 0; i < rows; i++) {
				if (sel==nodesArray[i].id) {
					var destination=nodesArray[i].url;
					if( !nodesArray[i].url || nodesArray[i].url=='')break;
					else window.open(encodeURI(decodeURI(nodesArray[i].url)), '_self');
				}
			}
		});
	}

	draw();

	</script>
</body>
</html>