농업 지역 경쟁력 분석 대시보드

한국 농업 지역의 경쟁력을 다각도로 분석하고 시각화하는 인터랙티브 웹 대시보드입니다.

• https://t0mark.github.io/JST_Do-Dream

🌟 주요 기능

📊 다차원 데이터 분석

• 종합 점수: 농업 전반의 종합적인 평가 점수
• 생산량 지수: 10a당 쌀 생산량 기준 생산성 지표
• 인프라 지수: 농기계 보유량과 저수 시설 종합 평가
• 유통 역량: 유통망과 미곡처리장 수 기반 유통 인프라
• 귀농 활성도: 전체 농가 대비 귀농 인구 비율

🗺️ 인터랙티브 지도 시각화

• Leaflet 기반 한국 지도 표시
• 데이터 유형별 색상 구분 (Blues, Greens, Oranges, Reds, Purples)
• 지역 클릭으로 상세 정보 표시
• 최대 2개 지역 동시 선택 및 비교

📈 실시간 차트 분석

• 산업 현황: 정곡, 현미, 조곡 생산량 비교 (막대 차트)
• 인구 통계: 농가 수 vs 귀농 인구 (이중 축 막대 차트)
• 유통 인프라: 유통망, 미곡처리장, 종합점수 (레이더 차트)
• 농업 시설: 임대 농기계 수, 저수 시설 수 (이중 축 막대 차트)

🏆 순위 분석 시스템

• 종합 점수 기준 상위 5개 지역 순위
• 전북 전주시와의 비교 분석
• 메인 순위 차트 (지도 영역 전체 표시)
• 상세 순위 정보 사이드바

🛠️ 기술 스택

Frontend

• HTML5: 시맨틱 마크업 구조
• CSS3: 현대적인 반응형 디자인
  • Flexbox 레이아웃
  • CSS Grid
  • 부드러운 애니메이션 효과
  • Glassmorphism 디자인
• Vanilla JavaScript: 순수 자바스크립트로 구현

라이브러리

• Leaflet.js: 인터랙티브 지도 렌더링
• Chart.js: 다양한 형태의 차트 시각화
• GeoJSON: 한국 행정구역 지리 데이터

데이터

• CSV 파일: 154개 시군별 농업 데이터
• GeoJSON 파일: 한국 행정구역 경계 데이터

📁 프로젝트 구조

농업-경쟁력-대시보드/
├── index.html              # 메인 HTML 파일
├── styles.css              # 스타일시트
├── script.js               # 메인 JavaScript 로직
├── total.csv               # 농업 데이터 (154개 시군)
├── map/
│   └── skorea-mixed-2018-geo.json  # 한국 지도 GeoJSON
└── README.md               # 프로젝트 설명서

🔍 데이터 구조

CSV 데이터 컬럼 (14개)

1. 시군별: 지역명
2. 2023년 농가: 농가 수
3. 2023년 귀농 인구: 귀농 인구 수
4. 귀농 비율: 전체 농가 대비 귀농 비율(%)
5. 정곡_10a당_생산량_kg: 정곡 생산량
6. 현미_10a당_생산량_kg: 현미 생산량
7. 조곡_10a당_생산량_kg: 조곡 생산량
8. 10a당 총 쌀 생산량: 총 쌀 생산량
9. 종합 점수: 농업 종합 평가 점수
10. 유통망 수: 유통 인프라 수
11. 미곡처리장 수: 미곡 처리 시설 수
12. 총 임대 농기계 수: 농기계 임대 수
13. 총저수량: 저수 용량
14. 총 저수량 규모별 (개): 저수 시설 개수

🚀 실행 방법

1. 파일 준비

# 프로젝트 디렉토리 생성
mkdir 농업-경쟁력-대시보드
cd 농업-경쟁력-대시보드

# 필요한 파일들 배치
# - index.html
# - styles.css  
# - script.js
# - total.csv
# - map/skorea-mixed-2018-geo.json

2. 웹 서버 실행

# Python 3.x 사용 시
python -m http.server 8000

# Python 2.x 사용 시  
python -m SimpleHTTPServer 8000

# Node.js 사용 시
npx http-server

# VS Code Live Server 확장 사용
# 또는 기타 로컬 웹 서버

3. 브라우저에서 접속

http://lcalhost:8000

📱 사용법

기본 사용법

1. 데이터 유형 선택: 사이드바에서 원하는 데이터 유형 선택
2. 지역 탐색: 지도에서 마우스 오버로 지역 정보 미리보기
3. 지역 선택: 지역 클릭으로 상세 차트 패널 표시
4. 지역 비교: 최대 2개 지역 동시 선택하여 비교 분석

고급 기능

• 순위 분석: "🏆 종합 순위 보기" 버튼으로 전체 순위 확인
• 패널 닫기: 차트 패널 우상단 X 버튼으로 닫기
• 뷰 전환: 순위 뷰와 지도 뷰 간 자유로운 전환

🎨 디자인 특징

시각적 요소

• 색상 스킴: 데이터 유형별 고유 색상 (Blue, Green, Orange, Red, Purple)
• Glassmorphism: 반투명 배경과 블러 효과
• 부드러운 애니메이션: CSS transition과 transform 활용
• 반응형 디자인: 다양한 화면 크기 지원

UX/UI 개선사항

• 직관적인 범례: 실시간 업데이트되는 색상 범례
• 툴팁: 마우스 오버 시 상세 정보 표시
• 로딩 인디케이터: 데이터 로드 상태 표시
• 접근성: 키보드 내비게이션 및 스크린 리더 지원

⚡ 성능 최적화

• 메모리 관리: 차트 인스턴스 재사용 및 정리
• 이벤트 최적화: 디바운싱으로 불필요한 렌더링 방지
• 데이터 캐싱: 한 번 로드된 데이터 메모리 보관
• 지연 로딩: 필요한 시점에 차트 생성

🔧 커스터마이징

데이터 추가/수정

1. total.csv 파일의 데이터 업데이트
2. 새로운 컬럼 추가 시 script.js의 데이터 매핑 수정
3. 색상 스킴은 colorSchemes 객체에서 조정

새로운 차트 타입 추가

1. updateChart1-4 함수 참조하여 새 차트 함수 생성
2. HTML에 새 캔버스 요소 추가
3. CSS에서 레이아웃 조정

지도 영역 변경

1. skorea-mixed-2018-geo.json 파일 교체
2. initMap() 함수의 중심 좌표 및 줌 레벨 조정

🐛 알려진 이슈

• 대용량 데이터: 500개 이상 지역 데이터 시 성능 저하 가능
• 모바일 브라우저: 일부 구형 모바일 브라우저에서 애니메이션 성능 이슈
• IE 호환성: Internet Explorer는 지원하지 않음 (모던 브라우저 권장)

📈 향후 개발 계획

• 시계열 데이터 분석 기능 추가
• 데이터 내보내기 (Excel, PDF) 기능
• 실시간 데이터 연동 API
• 모바일 앱 버전 개발
• 다국어 지원 (영어, 중국어, 일본어)

---

농업 지역 경쟁력 분석 대시보드로 한국 농업의 현황을 한눈에 파악하고 데이터 기반 의사결정을 지원합니다! 🌾