기록 그래프

드래그로 돌리고 휠로 확대합니다. 점에 마우스를 올리면 이름이 나옵니다. 지금은 예시 데이터입니다. 전체 화면으로 열기 →

이렇게 만들었습니다

1. 01

   three.js 로 점과 선을 그립니다

   점 600개는 작은 구로, 선 1,800개 안팎은 한 덩어리 선분으로 그리고 매 장면 좌표만 바꿉니다. 선은 겹칠수록 밝아지게 해서 빽빽한 가운데가 빛납니다.

2. 02

   d3-force-3d 로 자리를 잡습니다

   점끼리 밀어내고 선으로 당기는 힘을 3차원으로 계산합니다. 선은 대부분 같은 무리 안에서만 잇고 가운데로 살짝 끌어당겨, 멀리서 보면 한 덩어리가 됩니다.

3. 03

   빛 번짐은 마지막에 한 번 겁니다

   다 그린 화면 위에 빛 번짐(bloom) 효과를 덧씌웁니다. 문장 글자는 번지지 않게 HTML 층에 따로 그려 점을 따라다니게 했습니다.