이번 새로운 글에서는 성능, 유연성 및 기능의 풍부함을 신중하게 분석한 뒤 나에 의해 판단된 가장 진보된 강력한 웹 기반 데이터 시각화 및 분석 라이브러리에 대한 결과물을 제시하고자 합니다.

내가 선택한 일부 라이브러리는 전혀 인기가 없지만 놀랄만한 기능과 장점을 제공하여 다른 다양하게 알려진 대안들을 완전히 암시합니다. 발표할 라이브러리는 실제로 기능이 매우 풍부하여 몇 가지 놀라운 포인트에 초점을 맞추기 어려울 정도이며, 일반적으로 알려진 대안들보다 강조되는 강점에 중점을 두며 서로 비교함으로써 직접 테스트하도록 초대합니다. 이 라이브러리들은 무료로 시도할 수 있으며, 학계 및 교육용 무료 버전을 제공하는 것도 있습니다!

이 게시물을 읽은 후에 내 선택에서 선택된 사례에 대해 더 세부적으로 다루는 향후 기사에 주목하고 계십시오. 데이터 시각화 라이브러리의 “크림 드 라 크림"입니다.

데이터 시각화는 데이터 분석의 핵심에서 어디에서든지 나타납니다. 초기 탐색적 브라우징부터 가장 진보된 처리까지, 그리고 결과 및 분석에서 산출된 결과와 결론의 시각적이고 상호 작용적이며 매력적인 보고 및 의사 소통을 포함합니다. 나는 모든 단계에서 웹 기반 데이터 솔루션이 시각화에 가장 강력한 수단을 제공한다고 주장합니다. 이는 그렇게 큰 의미이니까요. 파이썬이나 R과 같은 시스템을 기반으로 수학 또는 통계 처리에 사용되는 가장 진보된 프로그램조차 웹 기반의 시각화 방식을 선택할 정도로 이를 너무 많이 활용합니다. 예를 들어 R에 대한 Shiny 앱을 생각해보십시오.

웹 기반 시각화가 내 시각에서 왜 성공적이고 강력한지 궁금하다면? 다음과 같은 여러 이유로입니다:

• 극도의 휴대성: 웹 브라우저 내에서 실행되므로 같은 코드는 현대적인 웹 브라우저가 탑재된 모든 기기에서 네이티브로 실행할 수 있습니다. 정말로, 어떤 트릭도 필요 없이요!
• 매우 간편한 배포: URL에 액세스하기만 하면 됩니다! 이 기능으로 인해 설치, 업데이트 등과 관련된 어떤 장애물도 손쉽게 제거됩니다.
• 모듈성: 라이브러리는 필요할 때 동적으로 로드되어 …
• 동일한 웹 페이지에 여러 시각화를 통합할 수 있는 가능성을 제공하며, 경우에 따라 프로그램적으로 결합하여 아주 완벽한 응용 프로그램을 만들 수 있습니다.
• 그래픽 상호 작용이 가능하여 플롯이 사용자 클릭 및 마우스 제스처에 반응할 수 있습니다. 비웹 기반 시각화에는 있는 해당 상호 작용이 웹의 경우 DOM의 다른 요소와 상호 작용하도록 하여 매우 복잡한 응용 프로그램을 가능하게 합니다.

웹 기반 시각화가 성능 (즉, 대량의 데이터를 처리하고 표시하는 능력), 입력 및 출력 형식의 유연성 등 심각한 문제로 인해 심각하게 사용되지 못할 것이라고 생각하신다면, 여기에서 여러분을 설득해 보겠습니다. 100% 브라우저를 기반으로 하는 웹 기반 시각화를 위해 특별히 선택된 네 가지 매우 신중히 선택된 라이브러리의 힘을 보여드릴 것입니다. 특히 웹 기반의 시각화를 목적으로 하는 라이브러리에 중점을 두며, 데이터 분석을 위한 데스크톱이나 서버 기반 프로그램에서 웹 배포를 다루지 않겠습니다.

위에서 매우 신중하게 선택했는데, 그 이유는 무엇일까요? 왜냐하면 웹 데이터 시각화 라이브러리에 대해 Google이나 ChatGPT에 문의하면 항상 일관성 있는 목록이 제공되지만 매우 강력하지만 매우 인기 없는 옵션들을 항상 제외하는 것을 경험하기 때문입니다. 이것들이 바로 여기서 이야기할 라이브러리들이며, 알파벳 순으로 amCharts, CanvasJS, CanvasXpress, 그리고 HighCharts입니다. 모두 유료이지만 학술 및 교육 목적을 위한 무료 라이선스나 브랜드 로고가 포함된 무료 버전을 제공하는 경우도 있습니다. 실제로 그 중 일부는 무료로 사용할 수 있는데, 예시 코드와 함께 나의 지출 없이 배포된 것을 볼 수 있을 것입니다.

본 문서에서 선택한 네 라이브러리에 대해 상세히 소개하면서, Google Charts, Plotly, D3 등의 보다 널리 알려진 라이브러리들에 대해서도 간단히 언급할 것입니다. 비교 목적으로 다뤄보면서, "선택한 네 라이브러리"가 뛰어난 기능을 갖추고 있음을 강조하되, 더 인기 있는 라이브러리들에 대해서도 공정하게 살펴볼 것입니다.

무의식적인 편견을 피하기 위해 라이브러리를 알파벳 순서대로 설명하겠습니다. 중요한 소개 이후에 시작하겠습니다.

소개: 왜 이 라이브러리를 선택했는가?

D3.js와 같이 문법이 지루한 특징을 가지고 있는, Taucharts나 Techan과 같이 사용이 더 쉬운 도출물을 제공하는 파생 라이브러리들을 포함해 다양한 파생물들로 널리 사용되고 있는 데이터 시각화 라이브러리가 존재합니다. (예를 들면) 금융 차트에 특화된 것들, 널리 사용되고 있는 Chart.js나 Plotly, Google의 대표적인 Google Charts 등이 있습니다.

그리고 이러한 라이브러리가 많은 것처럼, 시각화를 위한 라이브러리를 나열하는 "리스트 기사"도 많이 있습니다. 이 기사들은 종종 어떤 라이브러리도 심층적으로 다루지 않고 작성되었을 수 있으므로 통찰력과 가치가 없을 수 있습니다. 하지만 "좋은" 리스트 기사들도 있지만, 저는 그 중에서도 뭔가 마음에 들지 않는 부분이 있습니다. 주로 다음과 같은 것에 초점을 맞추곤 합니다:

• 전적으로 무료 라이브러리에만 초점을 맞추는데, 이는 완전히 괜찮은 일이지만 더 나은 옵션을 제공해주는 유료 라이브러리의 존재를 가리게 합니다. 게다가, 이러한 고급 라이브러리 중 일부는 전적으로 유료인 것도 있지만, 다른 것들은 무료(전면 기능 제공) 라이선스를 제공하거나 교육, 테스트, 비영리적인 환경에서의 전체 사용을 허용하는 라이선스를 제공하기도 합니다.
• 다운로드 수, 채택자, 스택 오버플로우에서의 토론 양 등을 측정하여 인기를 결정하는 다소 주관적인 요소들.
• 산포도, 파이 차트, 캔들스틱, 지리 데이터 매핑, 플로 차트, 이러한 차트들의 3D 변형 등을 지원하는 시각화의 다양성.
• 개체 기반 대 캔버스 기반의 렌더링 기술, 후자는 대규모 데이터셋에 대해 보다 우수하지만 그래픽 품질이 낮을 수 있음 — 하지만 이 모든 것은 논쟁의 여지가 있습니다!
• 라이브러리가 처리하고 표시할 수 있는 데이터셋의 크기에 따른 성능.
• 사용 편의성, 제 선택한 네 개의 라이브러리는 더 강력하고 성능이 더 우수하며 내장된 데이터 분석 기능을 활용하기 위해 어느 정도 희생을 할 수도 있는 매우 중요한 포인트를 갖추고 있습니다. 후자는 전문적인 데이터 분석을 적은 또는 전혀 코딩 없이 가능하게 해주는 것이 중요하며, 이는 인기 있는 라이브러리들이 네이티브로 지원하지 않는 기능입니다.

특히, D3.js와 같은 SVG를 통한 플로팅은 상호작용 및 동적 그래픽에 적합하지만, 많은 요소가 시각화에 포함될 때 성능적인 문제로 직면할 수 있습니다. 반면, 캔버스 기반 플로팅은 많은 요소를 렌더링하는 데 훨씬 효율적이지만 상호작용적이고 동적인 시각화에는 적합하지 않을 수 있습니다. 제가 선택한 네 개의 라이브러리 중 일부는 빠르고 상호작용적인 그래픽을 제공하며 캔버스를 사용하여 SVG 또는 다른 객체 기반 형식을 내보낼 수 있는 최상의 기능을 제공합니다.

가장 인기 있는 라이브러리들의 큰 한계는, 제가 선택한 몇 가지 라이브러리에는 해당되지 않는 한, 데이터를 플로팅하는 데만 제한되어 있고 어떠한 직접적인 데이터 분석 기능도 제공하지 않는다는 것입니다. 예를 들어, 일련의 숫자에 대한 히스토그램을 플로팅하려면, 빈과 그 개수를 구하는 코드를 작성하고 이를 라이브러리의 막대 플로팅 함수에 전달해야 합니다. 마찬가지로, 선형 회귀가 있는 산포도를 표시하려면, 적합을 수행할 코드를 작성하고 데이터와 선형 회귀를 위한 두 개의 그래프를 라이브러리에 전달해야 합니다. 제가 선택한 몇 가지 라이브러리는 단순히 플로팅 라이브러리가 아닌 데이터 분석 및 시각화를 수행할 수 있는 전체적인 데이터 분석 라이브러리입니다. 몇 가지 라이브러리는 내장된 다양한 수학 및 통계 분석도 진행할 수 있음을 강조할 수 없을 만큼 많습니다!

인기 있는 라이브러리를 선호하는 경우, 대부분(모두는 아니지만) 무료이며, 이는 많은 사용자 기반을 갖게 해 학습 및 문제 해결을 크게 용이하게 합니다. 마찬가지로, 인터넷에 매우 인기 있는 라이브러리에 대한 Q&A가 풍부하기 때문에 대형 언어 모델이 이에 대해 충분히 알고 있어 코드를 작성하는 데 도움을 줄 수 있습니다. 여기서 논의된 보다 강력하지만 인기 없는 라이브러리들에 대해서는 그 밖의 하나를 제외하고는 해당되지 않는다는 것을 주목하세요. 대형 언어 모델이 알고 있는 라이브러리를 사용하는 것은 매우 유용할 수 있습니다; 예를 들어 GPT-3의 Google Charts 라이브러리에 대한 탁월한 숙달 덕분에 해당 라이브러리를 사용하여 자연어로 물어보거나 요청한 질문에서 사용자 정의 플롯을 만들 수 있는 챗봇을 만들었습니다.

인기 없는 라이브러리를 사용하는 경우 예제를 많이 요청하거나 귀하의 언어 모델을 "가르치기" 위해 특정 라이브러리 사용 방법을 세밀하게 조정해야 할 수도 있습니다. 여기서 제시된 경우 중 하나만, 개발자들이 이미 그것을 위해 수행했습니다!

작업에 대해

내가 선택한 네 가지 라이브러리 각각에 대해 제공해 드리겠습니다:

• 각 라이브러리에 대한 기본 사항을 알 수 있는 소개 부분.
• “특징을 구별하는” 부분, 다른 대부분의 라이브러리에 부족한 강조점 또는 매우 특별한 기능에 대한 섹션입니다. 이 섹션은 내 탐구 결과에 따라 길이가 다양합니다.
• 라이브러리의 프로그래밍 및 사용에 대한 섹션, GUI를 통해 사용해 보거나 웹 앱에 코딩하여 사용해 본 후 나의 인상을 전달하려고 노력하는 부분입니다.
• 성능에 대한 섹션, 개발자들이 말하는 바와 제가 작성한 코드를 통해 이 중요한 측면을 파헤칩니다. 후자의 경우, 툴팁 텍스트로 x, y, z 값을 (풍선 반지름으로 나타낸) 버블 플롯을 생성하는 코드를 작성하고 버블의 색상을 다르게 설정하여 각 라이브러리가 버블 수를 증가시킬 때 얼마나 안정적인지 테스트했습니다.
• 마지막으로, 라이선스 및 비용에 관한 섹션.

당신이 이러한 라이브러리 중 하나의 개발자인 경우 짧은 고지사항

만일 이를 읽는 독자 중 해당 라이브러리 개발자이고, 정보가 잘못되었거나 예제나 제 해석에 문제가 있다고 생각되거나 매우 중요한 기능이 빠졌다고 생각하는 경우:

• 개인적으로 받아들이지 마세요. 이 라이브러리들은 모두 매우 방대하고 기능이 풍부하기 때문에 당연히 전체 세부 내용을 모두 탐구할 수 없었을 수 있습니다!
• 제게 댓글 또는 이메일을 통해 연락하여 발견한 사항이나 원하는 수정을 알려주세요.

amCharts

amCharts는 차트 작성을 위한 전용 모듈로 구성된 패키지입니다 (핵심 amCharts), 지도에 데이터를 표시하기 위한 모듈 (amCharts maps) 및 금융 분석용 모듈 (amCharts 주가 차트).

일반 데이터 그래픽 핵심은 표준 종류의 플롯(막대, 선, 면, 산점도, 파이, 도넛, 히트 맵, 버블 또는 레이더 플롯)부터 다른 라이브러리가 지원하지 않는 굴절, 게이지, 퍼넬, 피라미드, 코드, 산키, 선버스트 플롯 등과 같은 좀 더 복잡한 플롯까지 다양하게 지원합니다. 심지어 타임라인, 트리맵 및 기타 계층 그래프, 워드 클라우드, 벤 다이어그램 등의 도구로도 숫자가 아닌 데이터의 시각화에 도움을 줍니다.

매우 중요한 점은 대부분의 경쟁 업체와 달리 이 라이브러리가 데이터 시각화에만 제한되지 않고 일부 연산을 스스로 수행할 수 있다는 것입니다. 예를 들어, 워드 클라우드 도구를 사용하려면 단어 목록과 해당 단어의 빈도수를 입력할 필요가 없으며, 단어 클라우드가 도구에 의해 자동으로 계산되는 텍스트 문자열만 입력하면 됩니다. 다른 라이브러리인 CanvasXpress는 많은 데이터 처리 방법을 포함하여 이 능력을 극대화하였음을 알 수 있습니다.

미적으로나 상호작용 측면에서 볼 때, 이 라이브러리는 그다지 돋보이지 않습니다. 그러나 매우 완성도가 높고 시각화는 멋지고 간단합니다. 차트와 맵의 여러 요소들의 외관과 동작을 사용자 정의할 수 있어서 색상, 패턴, 애니메이션, 툴팁 텍스트, 범례, 레이블, 축과 그리드, 마커, 주석 등이 가능합니다.

amCharts는 CSV, JSON, XML 데이터 불러오기와 조작 기능 측면에서 매우 유연합니다. 또한 맵 데이터를 위해 GeoJSON을 사용할 수도 있습니다. 또한, PNG, JPG, PDF, SVG와 같은 그래픽 형식 및 JSON, CSV, 그리고 MS Excel에서 직접 열 수 있는 XLSX와 같은 데이터 형식으로 내보내기 옵션이 있습니다.

특징

여러 라이브러리 중에서도 지도 차트 기능을 제공하는 것들이 많이 있습니다. amCharts는 다양한 수준의 배율로 나라부터 매우 지역적인 지도까지 포함된 다양한 번들 맵을 제공합니다. GeoJSON 표준을 활용하여 이러한 맵은 쉽게 접근할 수 있으며, 플랫폼은 포함되지 않은 원하는 맵의 사용자 정의 맵의 생성을 지원합니다. 만약 당신이 지도 차트를 원한다면, 탐험할 가치가 있는 다양한 기능이 있습니다.

모든 주요 플로팅 라이브러리들이 적어도 하나 이상의 금융 전용 차트를 제공하지만, amChart의 금융 전용 모듈은 이를 가장 많은 기능을 갖춘 것 중 하나로 만듭니다. 이 모듈은 금융을 위해 완전 자동화된 30가지 이상의 지표를 제공하며(예: 이동평균 수렴/발산, 볼린저 밴드, 거래량 프로필 등을 들 수 있음) 수평 평균, 피보나치 한계, 온라인 회귀 등과 같은 주석 도구를 포함하고 있습니다. 그리고 사용자가 자체 주석을 추가할 수 있는 옵션도 제공됩니다.

금융 모듈에 대해 이야기할 때, 다양한 자동변환과 형식 설정을 활성화할 수 있습니다. 예를 들어 비교 기능을 활성화하면, 비교되는 지수가 추가될 때 자동으로 차트를 "비율 모드"로 전환하도록 강제할 수 있습니다. 또한, 양초 그래프, 오픈-고-저-종 항목, 시간 단위 변경 스위치 등 금융에서 유용한 기능들과 상호작용을 향상시켜주는 여러 내장된 컨트롤이 제공됩니다.

성능, 프로그래밍 및 사용법

amCharts는 캔버스 렌더링을 사용하여 SVG를 피하고 DOM 작업을 최소화하며, 다른 요소들의 레이어링을 통해 불필요한 다시 그리기를 최소화하여 빠른 렌더링을 달성합니다. "미친 듯이 유연하고 빛나게 빠른" 차트로 자신을 판매하며, 아마도 "간단하면서도 강력하며 유연하며 자세한 문서와 효율적인 지원을 제공하는 데이터 시각화 솔루션"이라고 설명됩니다.

이 라이브러리의 프로그래밍은 빠른 데이터 구문 분석, 높은 메모리 효율성 및 낮은 이진 크기(전체 패키지용 400 kb)를 달성하기 위해 최적화되어 있어, 빠른 다운로드와 다수의 차트를 동일한 페이지에 혼자서 효율적으로 공존시킬 수 있는 높은 효율성을 가능하게 합니다. 또한, 각 세부 기능은 파일로 분리되어 있어 필요한 것만로드할 수 있습니다. 예를 들어 핵심 라이브러리와 맵 모듈만로드할 수 있습니다.

이 패키지는 인기있는 웹 개발 프레임워크 및 도구(예: Angular, React, Vue.js 등)와 통합되어 있어 개발자들이 강력한 데이터 시각화 기능을 복잡한 웹 앱에 손쉽게 통합할 수 있습니다.

저의 노트북에서 수행한 테스트에서 이 라이브러리가 상당히 견고하고 성능이 우수하다는 것을 발견했습니다. X, Y, Z 데이터 및 임의의 색상의 버블 플롯에서 최대 50,000 데이터 포인트까지 원활한 그래픽 표시와 데이터 레이블의 원활한 업데이트를 유지하면서 플롯을 탐색하는 동안 가능합니다. 100,000개의 데이터 포인트에서 성능 저하를 느낄 수 있으며, 200,000개의 포인트에서는 원활한 탐색이 불가능하며, 그러나 500,000개의 버블조차도 웹 페이지가 충돌하지 않습니다.

예를 들어 15,000개의 데이터 포인트로 실행된 부분에 대한 줌을 다음 링크에서 시도해 볼 수 있습니다:

웹사이트, 라이선스 및 비용

amCharts의 공식 웹사이트 https://www.amcharts.com/ 에서 데모, 튜토리얼 및 문서를 살펴볼 수 있습니다.

amCharts는 현재 버전 5 및 일부 레거시 버전을 모두 무료로 다운로드 및 사용할 수 있습니다. 무료 버전의 주요 단점은 차트가 작은 로고를 코너에 표시한다는 것입니다. 실제 목적에는 큰 문제가 되지 않지만 매우 전문적인 프로젝트에 대해서는 로고를 없애고 싶을 수도 있습니다. 로고 없이 차트를 사용하려면 상업용 라이선스가 필요하며, 모두 유료이지만 합리적인 가격부터 제공됩니다.

CanvasJS

CanvasJS는 높은 성능과 다양성으로 데이터 플로팅을 위한 간단한 API 기반의 JavaScript 라이브러리로 자신을 판매하고 있습니다. 다른 라이브러리들과 비슷한 수준이지만 30가지 이상의 차트 유형을 제공합니다. 이는 방대한 문서가 제공되며, 현재 NASA, Microsoft, Samsung 등과 같은 거대 기업들에 의해 사용되고 있다는 것이 중요한 판매 포인트입니다. 그러나 데이터 시각화를 위한 라이브러리에 있어서 인기가 가장 좋은 것이라는 보장은 아님을 기억해주시기 바랍니다.

CanvasJS는 선, 열, 막대, 스플라인, 영역, 파이, 도넛, 주식 차트 그림, 몇 가지 3D 차트 등과 같은 상당히 표준적인 차트 유형을 지원합니다. 또한 데이터 레이블, 툴팁, 주석, 줌, 스크롤, 여러개의 축, 로그 축, 동적 업데이트와 같은 다양한 기능을 지원합니다.

특징을 구분하는 요소

이 라이브러리는 극도로 가벼운 것을 제외하고는 구분되는 특징이 다소 제한적으로 보입니다 (아래 참조); 그러나 이는 다른 일부 라이브러리보다 적은 기능 수로 설명될 수 있습니다.

프로그래머와 사용자 양쪽 모두에게 중요한 점은 이 라이브러리의 사용이 상대적으로 간단하다는 점으로, 많은 측면에서 구글 차트와 유사하며 따라서 대형 언어 모델에 의해 이해될 수 있을 것으로 보입니다.

마지막으로, 이 라이브러리의 웹사이트는 이 라이브러리의 강력한 크로스 디바이스 호환성을 여러 번 강조하고 있습니다; 그러나 이것은 HTML5-JavaScript 코어에 내재된 특징으로, 여기서 제시된 모든 라이브러리와 관련이 있으며 아마도 웹 기반 데이터 시각화를 위한 대부분의 다른 라이브러리에도 해당될 것입니다. 그럼에도 불구하고, 이는 강조할 가치가 있는 중요한 점이며 경쟁사도 강조해야 할 부분입니다!

프로그래밍 및 사용법

CanvasJS는 차트를 쉽게 만들고 사용자 정의할 수 있도록 설계된 API 논리로 구축되었습니다. 또한 React, Angular, jQuery, PHP, ASP, JSP 등과 같은 클라이언트 및 서버 측 웹 개발 프레임워크와 호환됩니다.

그들의 주장에 따라 CanvasJS는 항상 새로운 아이디어와 해결책을 기여하는 많고 활발한 사용자 및 개발자 커뮤니티를 보유하고 있습니다. 제가 선택한 다른 라이브러리들보다 인기가 떨어져 덜 알려진 라이브러리들이 부족한 것입니다.

CanvasJS는 차트 모양과 행동의 다양한 측면을 제어할 수 있는 높은 수준의 사용자 정의가 가능합니다. 미리 설정된 테마 및 템플릿을 사용하여 미리 정의된 스타일과 설정을 빠르게 적용하거나, 플러그인 아키텍처 덕분에 쉽게 구축할 수 있는 완전히 사용자 정의된 차트 유형을 선택할 수도 있습니다.

D3.js와 같은 다른 라이브러리들도 매우 유연하고 사용자 정의가 많이 가능하지만, 더 많은 코딩 및 데이터 과학 개념의 이해가 필요합니다. 반면에 Chart.js와 Plotly.js와 같은 대안들은 더 쉽게 사용하고 통합할 수 있지만, 덜 많은 사용자 정의 옵션을 제공합니다.

성능

CanvasJS는 가장 빠른 데이터 시각화 라이브러리 중 하나로 주장되며, 수백만 개의 데이터 포인트를 밀리초 단위로 렌더링할 수 있습니다. 이는 고성능 및 확장성이 필요한 응용 프로그램에 이 라이브러리가 적합하다는 것을 의미합니다.

저의 노트북에서의 테스트에서 CanvasJS는 강력하고 성능이 우수하다는 것을 발견했습니다. 적어도 500,000개의 버블을 매끄럽게 표시하면서 그래픽도 부드럽게 유지하고 데이터 라벨도 매끄럽게 업데이트했습니다. 이는 위에서 소개된 amCharts의 데이터 포인트보다 한 순서 높으나, CanvasXpress보다 적습니다. 또한, amCharts가 점진적으로 성능이 떨어지는 반면, CanvasJS는 제 노트북에서 내 테스트에서 700,000개의 포인트 주변에서 갑자기 멈추었습니다.

한 가지 덧붙이자면, 버블 플롯 테스트에서 이 라이브러리의 한 가지 불행한 제한사항이 드러났습니다: z 값의 자동 스케일링이 없으며, 이 값은 버블의 반지름을 조절합니다. 또한 최소값과 최대값을 직접 정의할 수 없습니다. 따라서 라이브러리의 탁월한 성능은 실제 사용에 너무 혼잡한 플롯에서는 상실됩니다. 더 심각한 문제는 플롯을 탐색하기 위해 스크롤이나 줌을 할 수 없다는 것입니다. 다른 모든 라이브러리는 이것을 허용하는 반면, CanvasJS는 허용하지 않습니다. 이 문제가 의미하는 예시로, 여기에서 시도해 볼 수 있는 100,000개의 버블을 포함한 예제의 스냅샷이 있습니다:

웹 사이트, 라이선스 및 비용

CanvasJS는 주로 유료 라이브러리이며 다양한 라이센스 계층이 제공됩니다. 일부 기능이 제한된 무료 버전도 제공되지만 상업적 이용 및 고급 기능에 대한 액세스는 유료 라이센스가 필요합니다.

CanvasJS는 공식 웹 사이트인 https://canvasjs.com/에서 다운로드할 수 있으며, 라이브러리를 설치, 문서를 확인, 갤러리를 둘러볼 수 있고 라이센스를 구매할 수 있습니다. 또한 NPM을 통해 CanvasJS를 설치하거나 CDN에서 직접 소스를 가져올 수도 있습니다.

CanvasXpress

이 라이브러리는 탁월한 데이터 시각화 기능을 가지고 있습니다 (정말 탁월해요. 곧 보게 될 거예요. 그래서 여기 목록에 들었답니다!). 하지만 실제로 CanvasXpress는 대부분 데이터 분석 라이브러리로 소개하고 있습니다. 그리고 실제로 CanvasXpress는 재현 가능하고 추적 가능한 데이터 분석을 목적으로 만들어진 독립적인 라이브러리로 작동합니다. 이것은 많은 데이터가 여러 사람들을 거치면서 흐르는 대규모 조직의 분석 파이프 라인에서 중요한 요소입니다. 실제로 이 라이브러리는 큰 제약 회사에서 탄생했는데, 우연히 알게 되었는데, 시각화 뒤에 있는 모든 조작을 문서화하는 것이 재현성과 추적 가능성을 위해서 필수적이었습니다.

차별화된 특징

더 놀라운 점은 CanvasXpress가 추적하는 조작의 종류가 데이터 정제부터 이상 값 제거, 히스토그램이나 히트맵으로 데이터를 구간화하거나 회귀 분석을 통해 데이터를 적합시키는 등 수많은 작업을 포함한다는 것입니다. 이러한 절차들과 그 결과가 모두 시스템에 의해 감사되고 있다는 사실은 이러한 절차들이 모두 라이브러리에 네이티브로 기본 코딩되어 있다는 것을 의미합니다. 이는 결과적으로 사용자가 복잡한 계산을 수행하기 위해 직접 코딩할 필요가 없다는 것을 의미합니다. 마치 amCharts의 워드 클라우드 도구에서 단어만 입력하면 모든 계산과 글꼴 크기 조절이 라이브러리에 의해 이루어지듯, 하지만 좀 더 극단적인 경우입니다 (자세한 내용은 아래에서 확인할 수 있습니다).

위의 기능들은 CanvasXpress에만 있는 방대한 데이터 감사 기능을 더했다는 점에서 내가 조사한 바로는 독특하다. 게다가, 라이브러리가 SVG 또는 PNG 파일과 같은 이미지 데이터로 가정되는 포맷으로 출력 그래픽을 작성할 때, 실제로 이러한 파일에 시작 데이터와 사용자나 소스 스크립트가 실행한 작업을 모두 주입하여 정확히 저장한 것이었다! 그것은 나에게는 미지의 일이었다.

CanvasXpress의 개발자들은 프로그래머들과 사용자들이 최소한의 코드나 아예 코드 없이 시각화를 넘어 완전한 데이터 분석을 통합할 수 있는 방법을 찾았다. 예를 들어, 값 배열을 입력하고 라이브러리에 히스토그램을 그리도록 요청할 수 있는데, 그때 라이브러리는 자동으로 bins와 counts를 계산할 것이다 — 이는 모든 다른 라이브러리와 다르다. 그 외의 라이브러리들은 히스토그램의 계산을 코딩하고 나서 bins와 counts를 히스토그램으로 표시하기 위해 라이브러리의 막대 그래프 도구를 사용해야 한다. CanvasXpress에서는 히스토그램을 계산하는 절차 뿐만 아니라 사용자가 그래픽 인터페이스를 통해 수행하는 그래프 수정, 데이터 선택 또는 필터링 등의 작업이 모두 시작 데이터와 함께 어떤 그래픽 출력 파일로도 이어진다. 그리고 나중에 다시 CanvasXpress를 실행할 때 PNG 또는 SVG를 로드하면 정적 이미지로 표시되는 것이 아니라 실제로 CanvasXpress 시각화 자체로 표시된다 (물론 SVG 또는 PNG가 프로그램에 의해 생성된 것인 경우).

지원해주는 측면에서 보면, CanvasXpress는 amCharts, Plotly 및 기타 라이브러리에서 지원하는 대부분의 시각화 유형을 cover한다. 단어 수 그래프와 같은 특정한 경우를 제외하고는 스캐터, 라인, 막대, 레이더, 버블 플롯, 히트맵, 파이 차트, 3D 버전, 지리 데이터 매핑, 플로우 차트, 상자 그림, 바이올린 플롯, 선형 플롯 등이 부족하지 않다. 로컬 회귀를 거쳐 다중 차원에서 심지어 로이스(LOESS)를 통한 로컬 회귀까지 이르기까지 라이브러리 자체에 의해 계산되는 데이터 적합을 위한 그래픽도 포함하며, 상관 분석 및 다양한 작업에 대한 검정을 포함한 통계 분석이 가능하다. 더불어, 제약업계와 관련된 데이터에 특별히 맞춘 시각화가 있는데, 이는 유전체학, 경로, 네트워크 등의 데이터에 특히 맞추어져 있다. 따라서 이 역시 여기에 독특한 특징들이 몇 가지 있다.

프로그래밍 및 사용법

위에 설명된 실용적인 기능들에 더해 CanvasXpress는 R 및 Python 코드와 완전히 통합되어 있으며, shiny 앱과도 결합되어 있어 예를 들어 R 또는 Python에 익숙한 데이터 분석가들이 시각화 라이브러리의 강력함을 활용할 수 있습니다. 라이브러리는 R 및 Python뿐만 아니라 PHP, Node.js, React, Angular와 같은 클라이언트 및 서버 측 웹 개발 프레임워크와도 통합되어 있습니다.

CanvasXpress는 여러 파일 형식의 읽기 및 쓰기를 지원하며, 출력물은 항상 원래 데이터 및 위에서 설명한 모든 조작을 주입한다는 점이 강조되었습니다 (감사 능력 및 편집 가능한 형태로 그래픽을 공유하기 위해 유용하지만, 파일 크기가 예상보다 훨씬 크게 만듭니다).

또 다른 흥미로운 기능은 동일한 웹페이지에서 실행 중인 다른 인스턴스 간에 이벤트를 브로드캐스팅할 수 있는 기능입니다. 예를 들어 D3.js 요소와 통합된 CanvasJS의 경우, 개발자들은 구글 차트 라이브러리에서 보여준 것처럼 매우 복잡한 앱을 쉽게 구축할 수 있습니다.

이 라이브러리로 코딩하는 장점 중 하나는 매우 고급 기능을 갖추고 있음에도 사용하기 비교적 쉽다는 점입니다. 뿐만 아니라 문서는 방대하며 40종류가 넘는 플롯 각각에 대해 적어도 3 또는 4개의 예제를 제공합니다. 게다가, 예제는 JavaScript, R 및 Python을 포함한 다양한 플랫폼에 대해 코드를 사용할 수 있도록 설정되어 있으며, Codepen이나 Jupyter 노트북과 같은 플랫폼에서 즉시 실행할 수 있는 코드 단편이 준비되어 있습니다.

이 라이브러리의 단점 중 하나는 일부 예제에 작은 오류가 포함되어 있을 수 있다는 것입니다. 이는 아마도 자동으로 생성되었기 때문인데, 다행히도 전문가가 아닌 나도 이를 수정하는 데 성공했습니다. 대부분의 문제는 잘못된 형식의 주석이나 라이브러리를 로드하는 URL에 있으며, 아마도 수많은 예제가 자동으로 생성되었다는 이유 때문입니다.

이 라이브러리는 다른 라이브러리와 비교했을 때 그래픽이 매우 부드럽지만, 이곳에서 논의한 다른 라이브러리들이나 다른 주류 라이브러리들만큼 매력적이지 않다는 점이 한 가지 단점입니다. 심지어 GUI 항목들도 매끄럽게 흘러가지 않는데, 이는 높은 기능을 제공하는 라이브러리의 많은 명령, 버튼 및 메뉴 때문에 더욱 복잡해지기 때문입니다. 이 라이브러리를 GUI를 통해 사용하려고 할 때 헷갈리기 쉽습니다. 물론 미래적으로 사용할 때 명령어에 익숙해지겠지만, 버튼에 대한 도움말 문구의 부재는 돕지 않습니다. 희망적으로, 라이브러리의 다음 버전에서는 이러한 부분을 보완하여 그 전체적이고 정말로 탁월한 잠재력을 발휘할 것입니다.

성능

데이터 분석과 감사를 위한 다양한 특별 기능들로 가득한 CanvasXpress를 시도해본 결과, 백만 개가 넘는 데이터 포인트를 표시하는 히트맵을 통해 이 라이브러리가 뛰어난 성능을 자랑한다는 것이 분명합니다.

버블 플롯 테스트에서 본인이 수행한 결과로는, CanvasXpress는 놀라울 정도로 2,000,000개의 버블에서 무거워지기 시작합니다! 그래도 5백만개일 때에도 정상적으로 작동하며, 다소 느린 속도로 작동합니다! 모든 경우에 부드러운 시각화, 줌 및 패닝이 여전히 반응적이며, 마우스를 이동할 때 툴팁 레이블이 순조롭게 업데이트됩니다. 이는 본 문서에서 다룬 4개의 라이브러리 중에서 가장 우수한 성능을 보여주며 아마도 현재 존재하는 모든 라이브러리 중에서 최고의 성능을 자랑합니다. 1백만개의 버블이 원활하게 실행되는 예다를 여기에서 확인할 수 있습니다:

웹사이트, 라이선스 및 비용

CanvasXpress는 개인 및 교육 목적으로 오픈 소스이며, 상업적 용도의 이중 라이센스를 제공합니다. 이는 교사, 학생 또는 비영리 연구를 수행하는 학계인이라면 라이브러리를 모든 기능을 갖춰 자유롭게 사용할 수 있다는 뜻입니다.

그 대신, 웹사이트에서 상업적 이용이 CanvasXpress의 명시적 허가와 라이선스 없이 금지된다고 명시하고 있습니다.

라이브러리를 받아보고, 10개 이상이나 아마도 100개 이상의 예시를 테스트하고 라이선스 모델에 대해 더 자세히 알고 싶다면, https://www.canvasxpress.org/에서 그들의 웹사이트를 방문해보세요.

하이차트

Highcharts는 "고도의 경쟁적인 데이터 시각화 시장에서 신기술 차트 도구를 위한 안전한 선택"으로 자신을 홍보합니다. 저는 이 분야가 실제로 매우 경쟁적이라는 점에 공감할 수밖에 없습니다.

아마도 여기에 제시된 라이브러리 중 가장 큰 개발팀으로 구성된 시스템인데, 일반 플로팅, 주식/금융, 지도, 대시보드, 간트 차트를 위해 특화된 다섯 개의 패키지로 구성되어 있습니다. 말처럼 몇몇 라이브러리에서도 간트 차트가 있지만 차트 스타일이 하나뿐입니다.

이 라이브러리는 또한 세계에서 가장 큰 100개 기업 중 80개에서 시각화에 사용되고 있습니다. 몇 번 말했듯이 이것이 품질을 보장하는 것은 아니지만, 라이브러리의 기능과 웹사이트의 브랜딩이 이 라이브러리를 고려해야 한다고 생각하게 만듭니다.

구별되는 특징

첫 번째로 눈에 띄는 긍정적인 특징은 라이브러리 자체가 아닌 그 웹사이트입니다. 대시보드 도구가 강력하게 갖추어져 있어 온라인에서 직접 차트를 신속하게 생성하거나 편집할 수 있고, 어떤 코드도 필요하지 않습니다. GPT 모델을 사용하여 자연어 지침을 통해 시각화를 작성하는 데 도움이 되는 도구도 있습니다. 또한 온라인 FAQ와 문제 해결을 위한 채팅 봇도 있어 질문을 해결할 수 있고, 시각화 설정을 도와줄 수 있는 제3자 회사에 대한 링크도 있는데, 데이터 시각화에 대한 몇 가지 흥미로운 게시물이 있는 블로그도 있습니다.

라이브러리 자체에서는 다른 라이브러리와 비교했을 때 다양한 종류의 간트 차트를 포함한 매우 다양한 그래픽 및 시각화 기능을 제공합니다. CanvasXpress보다는 개발이 덜 되어있지만, HighCharts는 몇 가지 기본 데이터 처리를 수행합니다.

HighCharts의 다른 독특한 기능 중 하나로 "음향화 모듈"이 있습니다. 이 모듈은 그림을 소리에 반응하도록 만들어 진행성을 향상시켜줍니다. 웹사이트의 예제에서 지도는 프랑스의 다양한 지역의 인구 밀도를 나타내고 사용자가 지도를 탐험할 때 시각화가 소리를 유도하여 인구 밀도의 차이를 나타내는 속도가 다른 소리를 발생시키고 프랑스 지역 이름을 말로 발표합니다.

마지막으로, 일부 상호작용형 차트 종류가 독특해 보입니다. 예를 들어, 사용자가 플롯과 직접 상호작용할 수 있도록 허용하는 이벤트 리스너를 추가하는 방법이 있습니다. 어떤 용도로 사용될지는 확신할 수 없지만, 한 예시에서는 사용자가 마우스 클릭을 통해 필요에 따라 대화식으로 점을 추가할 수 있습니다.

프로그래밍 및 사용법

HighCharts는 .Net, Node, PHP, Python, R, Java와 같은 프로그래밍 프레임워크 및 Angular, Vue, React와 같은 웹 개발 프레임워크와 같이 통합성에서 CanvasXpress와 격전하고 있습니다.

프로그래밍과 관련된 특별한 기능은 여기서 다루는 다른 라이브러리와는 달리 HighCharts는 CSS를 직접 사용하여 스타일을 지정할 수 있습니다. 이를 통해 디자이너들이 더 잘 알고 있는 방식으로 스타일을 적용할 수 있습니다.

일부 다른 플로팅 라이브러리와 같이 HighCharts는 여러 다른 유형의 플롯을 결합할 수 있습니다. 따라서 산점도와 회귀선을 함께 플롯할 수 있습니다. 하지만 CanvasXpress 예제와 달리, 이 경우에는 선형 적합을 수행하는 코드를 직접 작성해야 합니다.

프로그래머들에게 흥미로운 기능 중 하나는 예제가 Codepen에서 복사하여 붙여넣거나 테스트할 수 있는 형태로 제공되며, 제가 수행한 테스트에서 모두 문제없이 작동했습니다.

성능

내 노트북에서 버블 플롯을 사용하여 수행한 테스트에서, 이 라이브러리는 가장 성능이 떨어지는 것으로 나타났어요. 5,000개의 버블을 처리하는 데 문제없이 작동하지만 10,000개의 버블에서 이미 매우 느려지고, 20,000개 정도에서는 거의 사용할 수 없었어요. 이러한 숫자로 볼 때, 이 라이브러리는 다른 라이브러리들을 상당히 앞지르지 못합니다. 그러나 이 회사의 챗봇에서 알려준 해결책에 대해 계속 읽어보세요!

이 라이브러리를 찬성하는 한 가지 사실은, 시스템이 포화되어서 작업이 일어나는 것을 볼 수 없더라도 충분히 확대하여 줌을 만들었을 때 모두 스무스해진다는 점이었어요. 이 예제에서 10,000개의 버블로 시도해볼 수 있고, 여기서 고 확대로 보여지는 줌을 확인할 수 있어요:

해당 문제를 해결하기 위해 HighCharts의 지원 챗봇이 자연어를 통해 제안한 해결책은 WebGL을 활용한 "부스트 모듈"을 활성화하는 것입니다. 이 모듈을 통해 HighCharts가 수백만 개의 데이터 포인트를 렌더링할 수 있다고 합니다. 이 부스트 모드를 시도해본 결과 (보통 부스트되지 않은 버전에서 자동으로 제공되는 무작위 색상을 얻기 위해 추가 기능을 코드로 작성해야 했습니다), 라이브러리가 최대 1,000,000개의 버블까지 스무드한 시각화, 마우스 브라우징, 그리고 패닝/줌 인을 수행할 수 있음을 발견했습니다. 그러나 갑자기 성능이 급격히 떨어지기 시작합니다. 이 능력은 CanvasJS와 유사한데, CanvasJS는 많은 수의 버블을 허용하지만 줌 인 명령이 없었습니다.

이 링크에서 500,000개의 버블로 boost 모드를 시도해볼 수 있습니다. 줌 인하기 전에 다음과 같이 보일 것입니다:

웹사이트, 라이선싱 및 비용

학생들과 교육자들은 HighCharts를 무료로 사용할 수 있어요. 위에서 보여드린 것처럼 무료로 테스트를 실행할 수 있어요. 그러고 나면, 다양한 라이센스 수준이 있어요. https://www.highcharts.com/ 에서 확인하실 수 있어요.

결론

이 라이브러리들이 제공하는 기능의 양이 미친듯이 많다는 것을 보셨구요, 일반 및 전문 분야 애플리케이션을 위한 다양한 시각화의 가용성도 살펴봤어요. 또한 HighCharts의 접근성을 위한 독특한 기능, 강력하고 독특한 데이터 감사 기능 및 데이터 분석을 위한 다양한 내장 함수들을 살펴보았어요. 모든 이 라이브러리들이 상당히 성능이 좋다는 것도 확인했는데, 최고의 성능을 보인 것은 (적어도 내가 수행한 특정 테스트로는) HighCharts와 CanvasXpress였어요. 개인적으로 나는 amCharts와 HighCharts의 그래픽이 가장 매력적이라고 생각하지만, 제 예제들이 어떻게 보이는지에 대해 고민한 적이 없기 때문에 CanvasJS와 CanvasXpress를 적절히 조정하면 더욱 매력적으로 보일 수 있다는 점을 염두에 두세요.

또한, 이 글을 작성하면서 이러한 라이브러리들의 웹사이트와 블로그가 제공하는 매우 다양한 자료를 직접 경험했는데, 특히 24시간 내내 문제를 해결하는 데 도움을 주기 위해 특별히 설계된 HighCharts의 챗봇이 주목할 만한 리소스라는 것을 알았어요. 왜냐하면 ChatGPT와 같은 대형 언어 모델은 이러한 라이브러리에 대해 알고 있지만, Plotly나 Google Charts와 같이 매우 인기 있는 라이브러리처럼 깊이 이해하고 코드 작성에 도움을 줄 수 있을 만큼 충분히 알고 있는 것은 아니기 때문이에요.

여기에 소개된 네 라이브러리의 공통 기능은 컴파일을 위해 모듈로 로드하거나 CDN으로부터 스크립트 태그로 직접 로드할 수 있다는 것입니다. 일부 라이브러리들은 주어진 애플리케이션에 필요한 모듈만 로드할 수 있는 옵션을 제공하기도 하지만, 모든 라이브러리가 해당 기능을 갖추고 있는 것은 아닙니다. 또한 명시적으로 언급하지는 않았지만, 예제에서 분명히 확인할 수 있듯이, 모든 라이브러리들은 어떤 형태의 무료 테스팅 기능을 갖추고 있으며, 일부에는 각각 설명된 대로 무료 라이센스도 포함되어 있습니다.

데이터 시각화를 위한 웹 라이브러리의 영역은 극도로 경쟁적입니다. WWW에 심취하지 않고도 세어볼 수 있는 30여 개의 라이브러리가 존재합니다. 이는 사용자와 프로그래머들에게 다양한 선택지를 제공하므로, 우리가 원하는 것을 신중히 결정할 수 있습니다. 코딩할 때의 간편함? 사용할 때의 편의성? 아니면 매력적이고 상호작용 가능한 그래픽이 우리의 애플리케이션에 중요하다고 생각하시나요? 혹시 우리가 코드화하고 최적화하고 싶지 않은 복잡한 분석을 위한 내장 함수를 찾고 계신가요? 다양한 옵션들이 존재하며, 여기에서는 선택된 집합에 대해 심층적인 분석을 살펴보았습니다.

다른 블로그 글

www.lucianoabriata.com 에서는 제가 관심을 가지고 있는 모든 것에 대해 다루고 있습니다: 자연, 과학, 기술, 프로그래밍 등. 새로운 이야기를 이메일로 받아보려면 구독하세요. 작은 일들에 대해 상담하려면 서비스 페이지를 확인하세요. 피드백은 여기로 보내주세요. 혹시 후원하고 싶으시다면 여기로 이동해주세요.