3d-force-graph는 3차원 공간에서 그래프 데이터 구조를 나타내는 웹 컴포넌트이다. 3D 렌더링에는 ThreeJS/WebGL을 사용하고, 기본 물리 엔진에는 d3-force-3d 또는 ngraph를 사용한다. 우리는 공개된 소스코드 중 기본적인 형태의 ‘Basic’ 소스코드를 기반으로 노드를 이미지로 표현하는 ‘Images as nodes’ 등의 소스코드를 추가해 사용하였다. 3d-force-graph는 공식 깃허브 ^링크에 소스코드가 오픈되어 있다.

3d-force-graph는 노드(nodes)와 간선(links)이 정의된 json 파일을 필요로 한다. 따라서 앞서 구축한 rdf 파일이 아닌 메타데이터를 포함한 csv 데이터의 일부를 json 파일로 변환하여 사용 하였다. 이 과정에서 시각적 표현을 위해 참조한 데이터의 정보, literal 등은 표현되지 않는 한계가 있다.

구축한 rdf를 기반으로 국보1호 '서울 숭례문' 한 개의 표현은 다음과 같다. 문화재분류1~4와 재질, 재질상세는 각각 skos:braoder와 skos:narrow로 계층관계를 나타내었다. VisualArtWork, PeriodOfTime, Concept는 연결된 개체들의 type을 의미한다.

• id: 데이터 프레임의 ‘문화재명_지정호수’
• hover: 데이터 프레임의 ‘문화재분류’, ‘재질’, ‘시대’, ‘소재지’, ‘출토지’에 관련된 정보
• group: '문화재명’, ‘문화재분류’, ‘재질’, ‘시대’, ‘소재지’, ‘출토지’를 각각 1에서 6까지의 숫자로 매칭한 값
• icon: ‘문화재명’을 id값으로 가지는 항에 대해 각 문화재의 대표 이미지의 파일경로

• source: 링크의 시작점
• target: 링크의 도착점
• value: target의 유형
• description: 해당 링크의 속성(property)과 속성의 출처 어휘

다음은 국보 총 351개의 데이터들을 연결하여 나타낸 네트워크 시각화이다. 각 노드들은 '국보', '문화재명’, ‘문화재분류1’, ‘문화재분류2’, ‘문화재분류3’, ‘문화재분류4’, ‘문화재분류5’, ‘재질’, '재질분류', ‘시대’,'시대상세', ‘소재지시도_시명’, '소재지도명', ‘출토지시도_시명’, '출토지도명' 으로 구성되어 있다.

국보를 나타내는 노드들의 경우, '3D로 구현된 원모양'의 노드대신 '이미지 파일'을 노드로 적용했다. 시각화에 사용된 모든 이미지 파일은, 문화재청에서 제공하는 '문화재 이미지검색 API'를 활용했다.
대부분의 국보는 2개 이상의 이미지를 제공하고 있으므로, 다음 기준으로 하나의 이미지를 선택하였다.

• 1순위 : 국보의 전체적인 모습을 보여주는가
• 2순위 : 가장 최근의 사진인가

각각의 노드를 연결하는 링크(엣지, 간선)에는 해당하는 property를 적어주었다. 각 노드에 마우스를 올렸을 때 등장하는 팝업은 해당 노드의 정보 혹은 국보 노드의 경우 시각화 상에서 표현되지 않는 세부 정보들에 대한 내용이다.

앞서 언급했든 해당 시각화는 국보 간의 연결정도를 확인하기 위한 목적을 가지고 국보 데이터를 활용한 지식그래프 시각화의 한 가지 예시 자료이다. Team.Cayley가 구축한 데이터를 사용하여 더욱 효과적인 시각화 및 서비스를 개발하길 바란다.