■ 브라우저 환경의 한계
⛔ 브라우저에 할당된 메모리 내에서만 동작
ㅁ SVG
- 빠르고 높은 퀄리티의 2D 벡터 그래픽을 제공
- 브라우저 메모리 사용
- d3, amChart, cytoscape 등 대부분의 차트 라이브러리가 svg 를 사용
- 그려야 하는 객체의 개수가 늘어날 수록(10만 개 ↑ ) 브라우저 과부하
ㅁ WebGL
- 브라우저에 무언가를 렌더링 할 때 그래픽 하드웨어(GPU) 성능을 이용할 수 있음
- 렌더링 기능에 특화되어있어 svg 와 비교해 인터랙션 성능은 떨어짐
- (이벤트 핸들러 지원 X)
대부분의 고성능 네트워크 그래프 라이브러리가 WebGL 로 노드와 엣지를 렌더링하고 툴팁, 라벨, 축 등은 SVG 로 그리는 방식을 사용 → 기본적인 인터랙션 구현 가능
ㅁ 10만건 Scatter 성능비교
https://www.grapecity.com/wijmo/demos/Chart/Performance/WebGL/Scatter/purejs
** 그래프 성능 비교 아티클 - Interactive media lab (sigma.js 제작 팀)
■ 자체 개발 시 고려요소
- WebGL 러닝커브
- 렌더링 위치 결정, 노드 엣지 렌더링 엔진
- 애니메이션 엔진 (레이아웃 알고리즘)
- 렌더링 & UI 요소 간 위치 매칭 알고리즘
→ cluster 끼리 비슷한 위치에 렌더링되어야함
→ 관련도가 적을수록 떨어져 위치해야함
→ edge 의 교차가 적어야 분석이 수월함
& 그래프DB를 써도 결국 노드-엣지 관계 데이터를 받아와야 하고 하나씩 그리긴 해야함 (툴, 자체개발 모두)
■ 툴 후보군 조사
위 조사에서 얻은 내용을 바탕으로 후보군을 선정해 비교함
선정기준 (파랑: 후보군 모두 충족)
- WebGL 사용여부 (+성능)
- 알고리즘 → 빅데이터 네트워크 분석 기업 cylynx 레포트 참조
- 커스터마이징 유연성
- 인터랙션
- 커뮤니티 규모
- 레이아웃 다양성
- Neo4j 연동 플러그인 지원
- .gexf (gephi 파일형식) 입출력 지원 여부
웹 환경의 네트워크 그래프 툴이 적어 거의 모든 툴 조사 진행
✅ Keyline
개발 커뮤니티에서 평이 좋지만 데모를 제공하지 않아서 trial 버전을 요청해둠.
사용 전이라 자료 기반으로 작성
pros
- 타 라이브러리 대비 좋은 성능
- 다양한 레이아웃 제공(8가지)
- 노드 내 노드 제공
- 준수한 인터랙션 탑재
cons
- 유료
- 일반적인 네트워크 그래프 라이브러리와 데이터 구조 상이
- (Neo4j 와 연결 플러그인은 지원)
- gephi 파일 형식 (.gexf) 지원 X
✅ Sigma.js
- https://www.sigmajs.org/
- https://codesandbox.io/s/github/jacomyal/sigma.js/tree/main/examples/large-graphs (성능테스트)
pros
- 오픈소스 (MIT License)
- 준수한 성능
- gephi 파일 형식 지원
cons
- 상대적으로 떨어지는 인터랙션
- 레이아웃이 2D 레이아웃 하나만 존재
✅ Ogma
- https://linkurious.com/
- https://doc.linkurious.com/ogma/latest/examples/performance.html (성능테스트)
- https://doc.linkurious.com/ogma/latest/examples/demo-performance2.html (성능테스트2)
pros
- 타 라이브러리 대비 좋은 성능
- 다양한 스타일 옵션
- 공식문서 깔끔
- gephi 파일 형식 (.gexf) 지원
cons
- 유료
✅ Vivagraph
- 그래프 렌더링 엔진에 가까움
- 인사이트 도출을 위한 네트워크 그래프에 적합하지 않음
✅ G6
- https://g6.antv.vision/zh
- https://g6.antv.vision/zh/examples/performance/perf#moreData/gallery (성능테스트)
pros
- 오픈소스 (MIT License)
- 다양한 스타일 옵션
- 다양한 레이아웃
cons
- 커뮤니티 & 문서가 중국어
- 데모 실행 중에도 프레임 저하 발생
✅ ElGrapho
pros
- 오픈소스 (MIT)
- 인터랙션을 극한으로 배제하여 매우 빠른 속도
cons
- 인터랙션이 너무 없어 인사이트 도출에 부적합
- 커뮤니티가 작음
■ 정리
ㅁ 데이터
- 네트워크 그래프를 그리려면 클라이언트 측의 데이터 요청/응답은 불가피
- 다만 모든 노드와 엣지에 대한 정보를 가져오는게 아닌 관계를 알 수 있는 테이블을 가져오고 노드 별 관계는 차트 툴 알고리즘에 맡겨야 함
- 따라서, 웹단 최적화를 위해선 데이터 후처리 절차를 최대한 배제하고 neo4j 로부터 받아온 데이터 그대로 렌더링하는 구조가 필요
ㅁ 가능성 체크를 위한 유사서비스
CosmoGraph - 네트워크 그래프 웹 렌더링 툴/서비스
- Massive 네트워크 그래프 웹 렌더링 가능성 확인용
- https://cosmograph.app/run/?data=https://cosmograph.app/data/184R7cFG-4lv.csv
- https://cosmograph.app/#examples
Retina
- https://ouestware.gitlab.io/retina/beta/
- ⇒ 테스트용 파일 (우클릭 이용 다운로드)
※ Resources
- 동국대 통계학과/융합소프트웨어 오성과한음 작성.
'▶ Data Architect > DW•BI•DL•DLH' 카테고리의 다른 글
| [BI] 자율주행 기술의 네트워크 분석 과정 (0) | 2024.08.18 |
|---|---|
| [BI] 소셜 네트워크 분석 전략 (0) | 2024.08.18 |
| [BI] 소셜 네트워크 사례 (0) | 2024.08.18 |
| [BI] 차트 선택 (Chart Suggestion) (0) | 2024.08.18 |
| [BI] 막대그래프 vs. 히스토그램 (0) | 2024.08.18 |