안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 막대그래프를 통해 데이터의 높낮이를 비교하는 법을 배웠죠? 오늘은 전체 중에서 각각이 얼마만큼의 비중을 차지하는지 한눈에 보여주는 ‘파이 차트(Pie Chart) 마법’을 배워보겠습니다. 마치 맛있는 피자나 케이크를 나누는 것 같은 재미있는 차트랍니다!
[IMAGE_1]
1. 파이 차트란 무엇인가요? ‘데이터 피자 나누기’
파이 차트는 전체를 100%로 보고, 각 항목이 차지하는 크기를 조각으로 나누어 보여줘요. 어떤 항목이 절반을 넘는지, 혹은 아주 작은 조각인지 한눈에 알 수 있죠. 우리 학교 마법사들이 하루 일과 중 공부와 놀이에 쓰는 시간의 비율을 보여줄 때 아주 딱이겠죠?
2. 파이 차트 소환하기 (코드)
Chart.js 도서관을 그대로 사용하면서, 타입(type)만 'pie'로 바꾸면 마법처럼 동그란 차트가 나타납니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2 style="text-align:center;">🍕 마법사 하루 일과 비율</h2>
<div style="width: 350px; margin: auto;">
<canvas id="magicPieChart"></canvas>
</div>
<script>
const ctx = document.getElementById('magicPieChart');
new Chart(ctx, {
type: 'pie', // 동그란 파이 차트 주문!
data: {
labels: ['주문 공부', '빗자루 비행', '낮잠', '간식 시간'],
datasets: [{
data: [40, 25, 15, 20], // 합치면 100이 되는 비율 데이터
backgroundColor: [
'#ff6384', // 분홍
'#36a2eb', // 파랑
'#ffce56', // 노랑
'#4bc0c0' // 민트
]
}]
}
});
</script>
</body>
</html>3. 파이 차트의 매력: 비중 확인
파이 차트를 쓸 때는 데이터의 합이 전체가 되는 것이 중요해요.
1. 비율: 무엇이 가장 큰 비중을 차지하는지 즉시 알 수 있어요.
2. 색깔: 각 조각을 예쁜 색으로 칠하면 데이터가 훨씬 맛있어 보이죠!
사용자님께서 만드시는 ‘EduPad’에서 아이가 학습한 과목별 비중(수학 50%, 영어 30%, 국어 20%)을 보여줄 때 이 마법을 꼭 써보세요!
[IMAGE_2]
4. 아이들과 함께하는 ‘나의 하루 도넛’ 놀이
종이 접시를 준비해서 아이가 오늘 하루 동안 무엇을 했는지 구역을 나눠 색칠하게 해보세요. “네가 오늘 게임을 이만큼 했으니, 공부 조각은 조금 작아졌네?”라고 대화하며 한정된 자원(시간)의 배분을 시각적으로 이해하게 도와주세요. 수학적 감각과 시간 관리 능력을 동시에 키워주는 아주 훌륭한 코딩 놀이가 됩니다.
마치며: 조각조각 모여 완성되는 데이터
오늘은 데이터를 맛있게 나누는 파이 차트 마법을 배워보았습니다. 이제 숫자들이 단순한 목록이 아니라 하나의 커다란 그림으로 보이기 시작했을 거예요! 다음 시간에는 시간이 지남에 따라 숫자가 어떻게 변하는지 보여주는 ‘시간의 흐름 마법: 꺾은선 그래프’를 배워보겠습니다. 성장하는 마법 학교의 모습을 그려볼까요? 다음 시간에 만나요!
