910개 시계열 데이터의 효율적 시각화를 위한 Vertical Area Chart 설계

Context

80년 이상의 장기 시계열 데이터를 Horizontal Chart로 표현 시 발생하는 데이터 압축 및 가독성 저하 문제 분석. 특히 세로 스크롤 기반 웹 페이지 내에서 넓은 가로 레이아웃이 사용자 흐름을 방해하는 제약 사항 식별.

Technical Solution

• Vertical Orientation 채택을 통한 시간축의 Y축 배치로 데이터 압축 문제 해결 및 스크롤 흐름 최적화
• Disapproval 데이터를 Negative Value로 저장하여 Zero Baseline 기준의 Mirrored Area Series 구조 설계
• String 형태의 날짜 데이터를 JavaScript Date Object로 변환하여 Time Scale Axis의 정밀도 확보
• Tooltip 내 Math.abs() 로직을 적용해 내부 저장용 음수 값을 사용자 노출용 양수 백분율로 역변환
• anychart.onDocumentReady 래퍼 사용을 통한 DOM 렌더링 시점과 차트 초기화 시점의 동기화 보장

Impact

1941년부터 2025년까지 총 910개의 월별 데이터 포인트(Monthly Data Points)를 단일 뷰에 고밀도로 시각화함.

Key Takeaway

데이터의 특성과 사용자 인터페이스의 흐름(Scrolling Flow)에 따라 표준 좌표계를 변경함으로써 정보 밀도를 높이고 인지 부하를 줄이는 레이아웃 최적화 전략의 중요성.