JavaScript 라이브러리의 Heatmaps에 대한 벤치마킹 비교가 2021년 9월 초에 있었습니다.  주요 목적은 다양한 상용 차트 라이브러리의 Heatmaps과 업계에서 가장 빠른 LightningChart의 JS Heatmaps과의 성능과 데이터 처리 능력을 비교, 입증하는 것이었습니다.

3차원 데이터의 기반 하에 색으로 구분되는 지정된 X와 Y의 위치에 2차원을 플로팅하여 3차원으로 시각화 하는데 Heatmaps이 많이 사용됩니다. 3가지 유형으로 범주화 할 수 있는 2D 그리드 Heatmaps 안에서 성능 비교를 하였습니다. 3가지 Heatmap유형은 Static과 Refreshing, Appending  입니다. 

각 유형의 Heatmap에는 차트 라이브러리 간의 성공/실패 벤치마크를 설정하는 특정 성능 수치가 있으며, 테스트한 오픈 소스 프로젝트 모두를 GitHub에서 볼 수 있습니다.

Static Heatmap의 경우 데이터 세트를 컬러 참조 테이블(Look-up Table) 기반으로 로드 및 렌더링 합니다.

1. 렌더링(Rendering)
Heatmap을 주어진 데이터 차원이나 양으로 렌더링 하는지를 명확하게 알려 주는 측정 항목입니다.

2. 로딩 스피드(Loat-up Speed)

다음 이미지에서 X축은 LightningChart JS 버전 3.0.0과 최신 버전 3.1.0, 각 경쟁사의 차트 라이브러리가 수행한 테스트 및 각각의 라이브러리에서 처리할 수 있는 데이터의 양을 보여 줍니다.

반면, Y축은 로딩 속도를 나타내며 플롯에서 선의 위치가 높을수록 로딩 속도가 빨라집니다.

개별 선 그리기는 각 라이브러리가 처리할 수 있는 데이터의 양을 나타내며 최신 버전인 Lightning Chart JS V3.1.0이 가장 많은 데이터를 처리하는 것을 보여 줍니다.

테스트 결과를 다음 표에 집계하였습니다. 각 셀은 특정 매개 변수의 의미에 따라 색으로 표현하였습니다.

Green = 좋음(Good). Yellow = satisfactory(만족). Red = struggling(힘듬)

다음 3 개의 이미지에서 Static Heatmap과 관련하여 6 개의 JavaScript 차트 라이브러리를 비교한 것을 볼 수 있습니다. 첫 번째 이미지에서는 Heatmap 크기 50x50(2,500 개 데이터 포인트)에서 모든 라이브러리가 렌더링에 성공하지만 초기 렌더링 지연 시간(초 단위 측정)은 모두 다릅니다. LightningChart JS V3.1의 초기 렌더링 지연 시간은 150ms 입니다.

두 번째 이미지는 각각 4, 9, 1600만 데이터 포인트에서 6개 라이브러리의 초기 렌더링 지연 시간을 보여 줍니다. 

Static Heatmap의 경우, 데이터 세트를 컬러 참조표(Look-up Table) 기반으로 로드하고 렌더링 했습니다.  

1. 초당 프레임 : Frames Per Second(FPS)
Heatmap이 주어진 데이터 차원이나 양으로 렌더링 되는지 여부를 명확하게 알려주는 측정 항목 입니다.

2. CPU 사용율(CPU Usage %)
이 항목은 초 단위로 측정되는데 렌더링을 시작한 후 차트가 사용자에게 완전히 표시될 때까지 걸리는 시간(초)을 알려 줍니다.  

3. 데이터의 최대 양(Max. Amount of Data)

막대 차트 결과

Green = 좋음(Good). Yellow = satisfactory(만족). Red = struggling(힘듬)

다음 두 개의 이미지 안에 FPS와 CPU를 특정 Heatmap 크기로 표시합니다.

테스트 시작 후 모든 차트 라이브러리는 각각의 FPS와 CPU 사용량을 보이며 렌더링을 성공적으로 수행하였습니다. 가장 높은 FPS를 가진 세 개의 라이브러리 중 두 개는 LightningChart V3.1과 V3.0 입니다.

100x100(1백만) 데이터 포인트 시각화의 경우, LightningChart의 두 개 버전과 경쟁사 D가 대단한 성능을 보였으나, 경쟁사 C는 테스트에서 실패하였습니다.

Green = 좋음(Good). Yellow = satisfactory(만족). Red = struggling(힘듬)

JS 라이브러리에 대한 세 번째 테스트에서는 Heatmap을 추가하는 것이 주어진 데이터 포인트의 양과 FPS 및 CPU 점유율과 관련하여 어떻게 동작하는지를 보여 줍니다. 예를 들어, 히트맵을 추가하는 테스트에서 모든 라이브러리는 렌더링에 성공하지만, 놀랍게도 경쟁사 A와 B가 가장 낮은 FPS를 보입니다.

CPU 점유율을 보면 경쟁사 A, B와 C는 CPU를 최대한 사용하면서도 가장 낮은 데이터 포인트를 갖는 저조한 성능을 보입니다.

다양한 Charting 라이브러리에는 고유한 강점과 이점이 있지만, LightningChart의 강점은 특출난 렌더링 성능으로, 데이터 집약적인 고성능 애플리케이션을 구축하고 거의 모든 유형의 애플리케이션에서 Headtmap 차트를 시각화 할 수 있다는 점 입니다.  

이번 성능 비교는 LightningChart JS 라이브러리를 Workflow에 구현하게 될 때 개발자와 엔드유저가 즐길 수 있는 성능과 기능을 보여주기 위한 것 입니다. LightningChart JS를 통해 데이터 시각화 애플리케이션 개발 프로젝트를 향상하는 방법에 대해 자세히 알라 보십시오.

압도적인 성능/결과
정적 Heatmaps :

• LightningChart JS V3.1은 단 5초 만에 13,000 x 13,000 데이터 포인트를 시각화 할 수 있습니다.
• LightningChart JS V3.1은 하드웨어 가속을 사용하지 않는 경쟁 제품의 평균보다 700배 더 많은 데이터를 시각화 할 수 있습니다
• LightningChart JS 라이브러리는 바로 아래에 있는 하드웨어로 가속하는 경쟁 제품보다 136배 더 많은 데이터를 시각화 할 수 있습니다.  
• 500 x 500 데이터 포인트를 시각화 할 때, LightningChart V3.1은 경쟁 제품보다 최대 10배 더 빠릅니다.

실시간 Heatmaps (새로고침 및 추가/Refreshing & Appending)

• LightningChart JS는 25 x 25 데이터 포인트만 시각화 할 때도 성능이 매우 낮은 경쟁 제품에 비해 뛰어난 성능을 보입니다. (이런 유형의 저 성능 라이브러리를 사용하는 애플리케이션은 대화형 웹 문서에 사용할 수 업으며 작업을 수행하지 못 합니다.)  
• 새로 고침(Refreshing) 애플리케이션에서 LightningChart는 경쟁 제품의 평균보다 378배 더 큰 데이터 세트로 수행할 수 있습니다.  

Full performance comparison report (PDF)

Learn more about LightningChart JS