Rev. 2.73

사진 서비스인 Shutterstock에서 만든 Rickshaw는 시계열(Time-Series) 데이터를 웹페이지에 그래프로 그려주는 도구입니다. 히스토리컬 한 정적인 데이터 셋을 실시간으로 지속해서 갱신해 줍니다. 커브, 바, 라인, 퍼센트, 스트림 등의 다양한 그래프를 지원하며 그래프의 특정 구간을 확대하거나 곡선을 단순화 하거나 옵셋을 변경하거나 특정 타임셋에 이벤트를 발생시키고 정보를 조회하는 등의 상호작용이 실시간으로 반영되도록 설계되었습니다.

Rickshaw는 Mike Bostock씨의 D3.js를 래핑하는 형식으로 구축되었으며, D3.js는 데이터 기반 문서(Data-Driven Documents)의 작성을 돕기위한 목적으로 만들어진 작은 라이브러리입니다. 상호작용이 용이하고 데이터의 흐름을 부드러운 애니메이션으로 처리할 수 있도록하여 실시간 데이터를 다루는데 제격입니다. 백번 말하는것보다 한번 보는게 낫겠죠. 이 인터랙티브 슬라이드를 죽 훓터보세요.

아래 데모는 커스터마이즈 된 것으로 기존 데모의 버그를 수정하고 jQuery 의존성을 제거했으며 스택이 150건이 쌓이면 오래된 순서로 타임셋이 드랍되도록 했습니다. 때마침 시계열 데이터 그래프에서 특정 타임셋에 발생하는 이벤트를 효율적으로 표시할 수 있는 수단을 찾고 있었는데 잘 나와주었네요. 개인적으로 운영하는 firejune.io의 실시간 서버 상황에 에 우선적으로 적용해 볼 예정입니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar