웹 상에서 네트워크를 가시화 하기 좋은 굉장한 pacakge를 발견
react 기반의 가시화 패키지: react-force-graph
https://github.com/vasturiano/react-force-graph
다음 예제는 VR버전 예제
우주를 떠다니는 느낌..!
json 형식의 data만 있으면 바로 html로 삽입해서 바로 사용할 수 있음.
밑의 graph는 Apach EChart의 Les-miserables.json를 가시화한 예
VR이 아닌 경우: 키보드 방향키로 이동, 마우스로 시선 전환
HTML
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/3d-force-graph-vr"></script>
</head>
<body>
<div id="3d-graph"></div>
<script>
// 방향키 입력시, page 움직이는거 방지하기 위함
window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
// Url로 직접 받는 방법 : .jsonURL(url) 가시화에 사용한 데이터는 echart의 les-miserables.json 파일을 CORS proxy server를 거쳐 가져옴
// Data 직접 넣는 방법 : .jsonURL 대신 .graphData(data)
const Graph = ForceGraphVR()
(document.getElementById('3d-graph'))
.jsonUrl('https://api.codetabs.com/v1/proxy?quest=https://echarts.apache.org/examples/data/asset/data/les-miserables.json')
.nodeLabel('name')
.nodeAutoColorBy('category')
.width(700)
.height(700);
</script>
</body>
반응형
'공부 > 네트워크과학' 카테고리의 다른 글
| [논문소개] 수평적 팀이 과학적 혁신을 이끈다? (0) | 2022.07.08 |
|---|---|
| [공부 자료] Structural Roles in Networks (0) | 2022.03.01 |
| [생각] Social network에서 허브가 생기는 이유와 그 의의. (0) | 2022.02.16 |
| [관찰기] 커뮤니티 성장 과정 가시화 (0) | 2021.12.06 |
| [네트워크이론] 여러가지 Modularity 들 (0) | 2021.09.24 |
댓글