📰 DataTables + Scrollytelling

// ① CDN: jQuery + DataTables (CSS도 추가)
// <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css"/>
// <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
// <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>

// ② 일반 HTML 테이블 — 행만 자기 데이터로 교체
// <table id="myTable">
//     <thead><tr><th>시도</th><th>사고건수</th><th>사망률</th></tr></thead>
//     <tbody>
//         <tr><td>서울</td><td>34215</td><td>0.74</td></tr>
//         ...
//     </tbody>
// </table>

// ③ JS 한 줄로 활성화
$(document).ready(function() {
    $('#myTable').DataTable({
        language: {                            // 한글화
            search: '검색:',
            lengthMenu: '_MENU_ 개씩 보기',
            info: '_START_–_END_ / _TOTAL_ 개',
            paginate: { previous: '이전', next: '다음' }
        },
        order: [[1, 'desc']],                  // 초기 정렬: 1번 열, 내림차순
        pageLength: 7                          // 페이지당 행 수
    });
});

// ── fetch로 데이터 동적 로드 (실무) ──
// fetch('data.json').then(r => r.json()).then(rows => {
//     const tbody = document.querySelector('#myTable tbody');
//     tbody.innerHTML = rows.map(r =>
//         `<tr><td>${r.시도}</td><td>${r.사고건수}</td><td>${r.사망률}</td></tr>`).join('');
//     $('#myTable').DataTable({...});
// });

🔍 해보기: 헤더 클릭으로 정렬, 검색창에 시도명 입력.

// ① CDN 불필요 ─── 브라우저 기본 API
// ② 감시할 요소들과 컨테이너 준비
// <div id="container">
//     <div class="item">...</div> (여러 개)
// </div>

// ③ Observer 생성
const observer = new IntersectionObserver(
    entries => {                                 // 콜백: entries는 변화 있는 요소들
        entries.forEach(e => {
            e.target.classList.toggle('visible', e.isIntersecting);
            // e.isIntersecting === true → 화면에 들어옴
        });
    },
    {
        root: document.getElementById('container'),  // null이면 브라우저 뷰포트
        threshold: 0.5                            // 50% 이상 보일 때 발동
    }
);

// ④ 감시할 요소들 등록
document.querySelectorAll('.item').forEach(el => observer.observe(el));

▼ 아래 박스를 스크롤해 보세요. 화면 안에 들어오면 보라색으로 변합니다.

// ① CDN: Scrollama + Chart.js
// <script src="https://cdn.jsdelivr.net/npm/scrollama@3.2.0/build/scrollama.min.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

// ② HTML 구조 ─── sticky 차트 + 텍스트 step들
// <div class="scroll-demo">
//     <div class="sticky-stage"><canvas id="stage-canvas"></canvas></div>
//     <div class="scroll-steps">
//         <div class="scroll-step">...텍스트 1...</div>
//         <div class="scroll-step">...텍스트 2...</div>
//     </div>
// </div>

// ③ 데이터 + 단계별 차트 빌더 함수
const years    = [2016,2017,2018,2019,2020,2021,2022,2023];
const 사고건수 = [220917,216335,217148,229600,209654,203130,196836,191418];
const 유형     = ['차대차','차대사람','차량단독','기타'];
const 유형건수 = [142350, 42580, 6380, 108];

let chart = null;
function showStage(idx) {
    if (chart) chart.destroy();                  // 매번 destroy → 재생성
    const canvas = document.getElementById('stage-canvas');

    if (idx === 0) {                              // 단계별로 다른 차트
        chart = new Chart(canvas, { type:'line', data:{ labels: years,
            datasets:[{ label:'사고건수', data: 사고건수, borderColor:'#7c3aed' }] } });
    } else if (idx === 1) {
        const minIdx = 사고건수.indexOf(Math.min(...사고건수.slice(3,6)));
        const colors = 사고건수.map((_,i) => i===minIdx ? '#ef4444' : 'rgba(124,58,237,0.35)');
        chart = new Chart(canvas, { type:'bar',
            data:{ labels: years, datasets:[{ data: 사고건수, backgroundColor: colors }] } });
    } else if (idx === 2) {
        chart = new Chart(canvas, { type:'doughnut',
            data:{ labels: 유형, datasets:[{ data: 유형건수 }] } });
    }
    // ... 단계만큼 추가
}
showStage(0);                                     // 첫 진입 시

// ④ Scrollama 연결 ─── step이 화면 50% 지점에 오면 발동
const scroller = scrollama();
scroller
    .setup({ step: '.scroll-step', offset: 0.5 })
    .onStepEnter(({ element, index }) => {
        document.querySelectorAll('.scroll-step')
                .forEach(s => s.classList.remove('is-active'));
        element.classList.add('is-active');
        showStage(index);                          // 차트 전환
    });
window.addEventListener('resize', scroller.resize);

// ── 새 창에 HTML 통째로 작성하는 패턴 (개발용) ──
function openArticle() {
    const html = `<!DOCTYPE html>
<html><head>
  <title>교통사고 — 데이터로 보는 1년</title>
  <script src="https://cdn.jsdelivr.net/npm/scrollama@3.2.0/build/scrollama.min.js"><\/script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"><\/script>
  <style>
    .sticky-stage { position: sticky; top: 0; height: 100vh; ... }
    .step { min-height: 90vh; ... }
  </style>
</head><body>
  <div class="hero">...</div>
  <div class="scroll-section">
    <div class="sticky-stage"><canvas id="art-canvas"></canvas></div>
    <div class="steps">
      <div class="step" data-step="0">...</div>
      ... 5단계 ...
    </div>
  </div>
  <script>
    function showStep(s) { ... 차트 갱신 ... }
    showStep(0);
    scrollama().setup({step:'.step',offset:0.5})
               .onStepEnter(({index}) => showStep(index));
  <\/script>
</body></html>`;

    const w = window.open('', '_blank');
    w.document.write(html);
    w.document.close();
}

// ── 실무 권장 ──
// article.html 파일로 저장하고 Live Server 등으로 직접 열기.
// 그 쪽이 디버깅·캐싱·SEO 모두 유리.