"Network Graph in Wiki"의 두 판 사이의 차이

2018년 7월 16일 (월) 09:25 기준 최신판

김현
한국학중앙연구원 인문정보학 교수

1 위키 문서로 네트워크 그래프를 만드는 방법
2 온톨로지 설계 스크립트 파일 작성 방법
- 2.1 Script 예시: Celery4.lst
- 2.2 네트워크 그래프 표시
3 스크립트 작성 방법 1: 섹션 설명
4 스크립트 작성 방법 2: 노드와 링크의 모양 지정 방법
- 4.1 노드 모양: #Class 섹션에서 지정
- 4.2 링크 모양: #Relation 섹션에서 지정
5 스크립트 작성 방법 3: 이미지 아이콘의 표시
- 5.1 이미지 아이콘 사용 방법
- 5.2 이미지 아이콘 표시 옵션
6 스크립트 작성 방법 4: 관계성(링크)의 표시 방법
7 中文教程

위키 문서로 네트워크 그래프를 만드는 방법

온톨로지 설계 스크립트를 위키 문서로 저장하면 바로 네트워크 그래프 시각화 결과물을 얻을 수 있는 방법을 제공합니다. (2018. 7. 15. 한국학중앙연구원 디지털 인문학 연구소) 아래의 방법으로 실행하세요.

(1 단계) 네트워크 그래프로 표현할 온톨로지 설계 스크립트를 위키 문서로 작성하여 저장합니다.

√ 이 문서의 제목은 일반적인 위키 문서와 구별되도록 '.lst'를 붙이세요. (권장 사항)

√ 문서의 끝에 분류 정보 '[[분류: Network Graph Script]]'를 첨가하세요. (권장 사항)

√ 스크립트 코드는 위키 텍스트로 인식되지 않도록 시작과 끝에 부분<pre>....</pre> 태그를 첨가하세요. (권장 사항)

(2 단계) 네트워크 그래프를 보일 위키 문서 상에서 다음과 같이 입력하면, 그 곳에 네트워크 그래프가 표시됩니다.

    {{NetworkGraph | title=스크립트 문서 제목}}

온톨로지 설계 스크립트 파일 작성 방법

온톨로지 설계 스크립트를 Celery4.lst라는 이름으로 이 위키에 저장하였습니다.
이 예시를 참고하여 아래의 설명을 읽으시기 바랍니다.

Script 예시: Celery4.lst

#Project
h1 World of Cocktails: Garnish for Cocktails

#Class
Category	gold	circle
Cocktail   	magenta box
Spirit		red	ellipse
Liqueur		blue	ellipse
SoftDrink	orange	ellipse
Garnish		green	ellipse
Glass   	silver  ellipse
Method		cyan	ellipse

#Relation
hasCategory	 ~에_속하다	arrow  2
hasMember	 ~를_포함하다	arrow  2		
isGarnishedWith	~로_장식하다	arrow  2 	
or 		또는		both   0	

#Nodes
Cocktail	Category	Cocktail
BloodyMary 	Cocktail 	Bloody_Mary http://dh.aks.ac.kr/Edu/wiki/index.php/Bloody_Mary http://dh.aks.ac.kr/~tutor/Graph/Cocktail/images/Cocktail/BloodyMary_xs.png 
LemonSlice 	Garnish 	Lemon_Slice null http://dh.aks.ac.kr/~tutor/Graph/Cocktail/images/Garnish/LemonSlice_xs.png 2                                                    
Celery 		Garnish 	Celery 	null http://dh.aks.ac.kr/~tutor/Graph/Cocktail/images/Garnish/Celery_xs.png 2                                                         

#Links
BloodyMary	Cocktail	hasCategory
Cocktail	BloodyMary 	hasMember
BloodyMary	Celery		isGarnishedWith
BloodyMary	LemonSlice	isGarnishedWith
Celery		LemonSlice 	or

#End

네트워크 그래프 표시

다음과 같은 방법으로 'Celery4.lst에 담은 내용을 네트그래프를 표현할 수 있습니다.

    {{NetworkGraph | title=Celery4.lst}}

스크립트 작성 방법 1: 섹션 설명

온톨로지 설계 스크립트는 #Project, #Class, #Relation, #Nodes, #Links 등 5개 섹션과 스크립트 종료 표시자 #End로 구성됩니다.

#Project

네트워크 그래프의 제목, 주제 등을 표시합니다.
h1 ~ h7의 헤딩 표시자를 사용하여 문자의 크기를 지정할 수 있습니다.
프로젝트 헤딩은 2줄 이상, 최대 10줄까지 쓸 수 있습니다.

#Class

그래프로 표시하고자 하는 대상 세계의 범주(Class)를 지정합니다.
범주(Class) 개념에 대해서는 이 위키의 온톨로지의 이해를 참고 하세요.

#Relation

노드 사이의 관계성을 지정합니다.
관계성(Relation) 개념에 대해서는 이 위키의 온톨로지의 이해를 참고 하세요.

#Nodes

대상 세계에 존재하는 각각의 노드(Node)를 지정합니다.
노드(Node) 개념에 대해서는 이 위키의 데이터의 시각화: 네트워크 그래프를 참고 하세요.
노드 지정을 위한 필수 요소는 노드 식별자, 범주, 노드 레이블 등 3 가지입니다.
노드 식별자는 컴퓨터가 하나의 노드를 유일하게 식별할 수 있게 하는 이름입니다. 중복된 이름이 있어서는 않됩니다.
노드 레이블은 그래프 상에서 노드의 이름으로 표시하기 위한 이름입니다. 중복이 있어도 무방합니다.
네 번째 요소 DATA URL을 추가할 경우, 네트워크 그래프 상에서 노드를 클릭하면, 해당 URL로 이동합니다.
각 노드의 범주 이름은 반드시 #Class 섹션에서 정의된 것이어야 합니다. 그렇지 않은 경우 그래프 생성이 이루어지지 않습니다.

#Links

노드(Node)와 노드(Node)를 잇는 링크(Link)를 지정합니다.
링크(Link) 개념에 대해서는 이 위키의 데이터의 시각화: 네트워크 그래프를 참고 하세요.
링크 지정은 첫번째 노드 식별자(Domain), 두번째 노드 식별자(Range), 두 노드 사이의 관계성(Relation) 이름 순으로 기술합니다.
두 노드 사이의 관계성 이름은 반드시 #Relation 섹션에서 정의된 것이어야 합니다. 그렇지 않은 경우 그래프 생성이 이루어지지 않습니다.

#End

스크립트의 끝을 알리는 표시자입니다.

❖ 예시1: 가장 단순한 형태의 스크립트 ☞ Celery1.lst

스크립트 작성 방법 2: 노드와 링크의 모양 지정 방법

노드 모양: #Class 섹션에서 지정

#Class 색션에서 범주 이름 뒤에 이 범주에 속하는 노드의 표시 색상, 노드 표시 모양을 추가로 지정할 수 있습니다.
노드 표시 색상: HTML 문서에서 쓸 수 있는 모든 색상을 사용할 수 있습니다. red, blue, green ....
노드 표시 모양: box(사각형), circle(원), ellipse(타원), star(별), triangle(삼각형), square(정사각형), dot(점), text(문자열)

링크 모양: #Relation 섹션에서 지정

#Relation 색션에서 관계성 이름 뒤에 관계성의 다른 이름, 관계성 표시 화살표의 모양을 추가로 지정할 수 있습니다.
관계성의 다른 이름: 예를 들어, 'isRelatedTo'라는 관계성 '이름'에 대해 '~와_관계가_있다'라는 '다른 이름 (또는 설명)'을 병기해 줄 수 있습니다. 그래프 상에서 '이름'과 '다른 이름(설명)'은 선택적으로 표시될 수 있습니다. (스크립트 작성 방법 4에서 설명)
화살표의 모양: arrow(--->), inverse(<---), both(<-->), moving-arrows(->->), line(----) 중에서 선택할 수 있습니다.

❖ 예시2: 노드와 링크의 모양을 지정한 스크립트 ☞ Celery2.lst

스크립트 작성 방법 3: 이미지 아이콘의 표시

이미지 아이콘 사용 방법

#Nodes 섹션 에서 Hyperlink URL 뒤에 ICON 이미지 URL을 지정하면 해당 노드를 ICON으로 표시한 그래프가 출력됩니다.
Hyperlink URL을 지정하지 않고, ICON 이미지 URL만 지정하고 싶을 때에는 Hyperlink URL 자리에 null을 입력하면 됩니다.

이미지 아이콘 표시 옵션

#Nodes 섹션에서 이미지 URL 뒤에 노드 표시 옵션을 지정할 수 있습니다.
0: 아이콘 감춤. 노드 위치에 ICON을 표시하지 않고, Text Label만 표시합니다. 이 경우, 노드 위치에 커서를 올려 놓을 때만 (hover) ICON 이미지가 표시됩니다.
1: 기본 값. 노드를 ICON으로 표시합니다. 이 경우, 노드 위치에 커서를 올려 놓으면 노드 레이블 텍스트를 담은 말풍선이 표시됩니다. 이 텍스트에 밑줄이 있는 것은 클릭 시 Hyperlink가 된다는 표시입니다. (※ Hyperlink URL이 null인 경우 밑줄이 나타나지 않습니다.)
2: Circular Icon: 노드 ICON을 원형으로 표시합니다.

❖ 예시3: 이미지 아이콘으로 노드를 표시하는 스크립트 ☞ Celery3.lst

스크립트 작성 방법 4: 관계성(링크)의 표시 방법

#Relation 섹션에서 화살표 모양 지정 뒤에 관계성 이름 표시 방법을 숫자로 지정할 수 있습니다.
0: 관계성 이름이 보이지 않게 합니다. 노드와 노드를 잇는 화살표만 표시됩니다.
1: 기본 값. 관계성 이름이 그래프의 링크 화살표 밑에 표시됩니다. 화살표 위에 커서를 놓으면(hover) 다른 이름(설명)을 보이는 말풍선이 표시됩니다.
2: 그래프 상에 관계성 이름 대신 다른 이름(설명)이 표시됩니다. 화살표 위에 커서를 놓으면 관계성 이름을 보이는 말풍선이 표시됩니다.
3: 그래프 상에 관계성 이름과 다른 이름(설명)이 함께 표시됩니다. '

❖ 예시4: 관계성 이름 대신 다른 이름 표시 ☞ Celery4.lst
❖ 예시5: 관계성 이름과 다른 이름을 함께 표시 ☞ Celery5.lst

中文教程

维基网络图制作教程

@@ 1번째 줄: / 1번째 줄: @@
-<p align="right">[http://dh.aks.ac.kr/Edu/wiki/index.php/김현 김현]<br/>한국학중앙연구원 인문정보학 교수<br/>
+{|class="metadata" style="width:300px" align="right"
+|-
+|style="text-align:right" | <html><img width="240" src="http://dh.aks.ac.kr/Edu/wiki/images/c/cb/MakeGraphLogo.jpg"/></img></html>
+|-
+|style="text-align:right" |[http://dh.aks.ac.kr/Edu/wiki/index.php/김현 김현]<br/>한국학중앙연구원 인문정보학 교수
+|}
 ==위키 문서로 네트워크 그래프를 만드는 방법==
 온톨로지 설계 스크립트를 위키 문서로 저장하면 바로 네트워크 그래프 시각화 결과물을 얻을 수 있는 방법을 제공합니다. (2018. 7. 15. 한국학중앙연구원 디지털 인문학 연구소) 아래의 방법으로 실행하세요.
@@ 142번째 줄: / 148번째 줄: @@
 <font color='green'>❖ 예시4: '''관계성 이름''' 대신 '''다른 이름''' 표시</font> ☞ [[Celery4.lst]]<br/>
 <font color='green'>❖ 예시5: '''관계성 이름'''과 '''다른 이름'''을 함께 표시</font> ☞ [[Celery5.lst]]
+==中文教程==
+[[维基网络图制作教程]]
 [[분류:Network Graph Script]]