표나 다이어그램은 횡스크롤로 만들어서 관심 있는 사람은 상세히 볼 수 있게 만들기
**첨부한 그래프에서 로우데이터를 추출해줘
- 사람이 데이터를 읽기 좋도록 마크다운으로 추출한 버전과
- 그래프 라이브러리로 시각화하기 좋도록 코드로 추출한 버전을 둘 다 만들어줘**
**@business-profile-merged.html:928-931 해당 이미지는 가독성이 나쁘기 때문에, 그래프로 변경하고 싶어. 그래프 데이터는 아래와 같아**
---
'20~23년 키즈노트 광고매출' 그래프의 Y축 눈금(2억 원 단위) 및 X축 시계열(2020년 1월 ~ 2023년 7월, 총 43개 데이터 포인트)을 정밀 분석하여 추출한 로우데이터입니다.
---
### 1. 사람이 읽기 좋은 마크다운 테이블 (정수 처리 및 천 단위 콤마 표기)
| 기간 | 광고매출 (원) | 비고 |
| --- | --- | --- |
| **20년 01월** | 280,000,000 | |
...
| **23년 07월** | 830,000,000 | 데이터 끝 지점 |
---
### 2. 시각화 라이브러리(Python Pandas/Matplotlib/Plotly 등) 활용 목적 코드 구조
데이터 프레임으로 즉시 변환하여 시각화에 사용할 수 있는 Python 코드 스니펫입니다. 데이터 분석 환경(Jupyter Notebook 등)에 복사하여 바로 사용하실 수 있습니다.
```python
import pandas as pd
import matplotlib.pyplot as plt
# 1. 로우데이터 정의 (2020년 1월 ~ 2023년 7월, 총 43개 항목)
...
# 2. 판다스 데이터프레임 생성
...
그래프는 가로 막대가 현재 너무 좁은데, 충분히 가시성이 좋은 사이즈로 표시하고,
화면 가로 폭을 넘어가는 경우, 가로 스크롤로 그래프 전체가 보일 수 있게 해줘.
가로 스크롤의 경우, 사용자가 일부러 가로 스크롤을 하거나 마우스 동작을 하지 않아도 되도록, 스크롤 다운을 했을 때 가로로 넘어가는 인터랙션을 경험하도록 UX를 설정해줘.
```markdown
**마우스가 그래프 영역 위에 있을 때가 아니라 해당 섹션에 있을 때 계속 가로스크롤이 적용되는 것 같은데 정확히 마우스가 해당 그래프 영역에 있을 때만 기본 마우스 스크롤이 가로스크롤을 컨트롤하도록 해줘**
.png)
