Розділ підручника:§ 31• с. 189

§ 31⏱ 25 хвСкладність: ⭐⭐🏆 +100 XPПрограма МОН 100%

Візуалізація елементів табличної величини

За підручником: О. О. Бондаренко, В. В. Ластовецький, О. П. Пилипчук, Є. А. Шестопалов. «Інформатика, 9 клас» (Видавництво «Ранок», 2026)• друкована с. 189

Розробник платформи:Гончарук Олександр

👩‍🏫Методичні акценти для вчителя • План проведення уроку на 45 хвНУШ

▼

🎯 Очікувані результати навчання (НУШ):

Формування предметних компетентностей за темою «Візуалізація елементів табличної величини», розвиток критичного мислення, вміння аналізувати причинно-наслідкові зв'язки та застосовувати набуті знання на практиці.

💬 Провокативне питання для старту:

Використайте блок «Гачок (Hook)» нижче для 2-хвилинної розминки з класом перед поясненням нового матеріалу.

⏱️ Рекомендований таймінг 45-хвилинного уроку:

0–5 хв

Гачок & Місія

5–20 хв

Теорія & Інтерактив

20–30 хв

Робота «У зошит»

30–40 хв

Бос-тест уроку

40–45 хв

Рефлексія & XP

📋 Готовий запис для електронного журналу (НЗ.ua / Human / Єдина Школа):

Тема: § 31. Візуалізація елементів табличної величини. Д/з: опрацювати матеріал уроку та завдання «У зошит» на платформі EZZ-SCHOOL BOOKS.

⚡ Фронтальне бліц-опитування класу на початку уроку (2 хв):

Що є ключовим поняттям теми «Візуалізація елементів табличної величини» і чому воно важливе?
Де у повсякденному житті, науці чи IT ми стикаємося з цим явищем/алгоритмом?
Яка найпоширеніша помилка виникає під час першого знайомства з матеріалом?

🏠 Диференційоване домашнє завдання:

Базовий рівень (обов'язковий): опрацювати конспект і блок «У зошит».
Достатній рівень: скласти власну шпаргалку та пройти MiniCheck.
Високий / STEM: виконати симуляцію у лабораторії та скласти BossQuiz на 100 XP.

📊 Критерії формувального оцінювання:

1–6 б: Відтворює означення, виконує вправи за алгоритмом.

7–12 б: Самостійно розв'язує проблеми, аналізує моделі.

🎯

Твоя місія на цей урок

Натискай на цілі у міру їх опанування:

4 цілей

1Зрозуміти математичний розрахунок координат і масштабних коефіцієнтів для побудови стовпчикових діаграм на Canvas.
Опанувати ➔
2Використовувати методи полотна create_rectangle(), create_line(), create_text().
Опанувати ➔
3Опанувати професійну бібліотеку Matplotlib (pyplot) для побудови швидких наукових графіків.
Опанувати ➔
4Поєднувати графічний інтерфейс Tkinter із візуалізацією даних через діаграми.
Опанувати ➔

🎯 Гачок уроку • Вгадай

💡 Числа — це нудно, графіки — це очевидно!

Поглянувши на довгий список із 50 температур або оцінок, наш мозок витрачає купу часу, щоб знайти піки чи спади. Але варто перетворити цей масив на яскраві стовпчики або лінійний графік — і тренд стає зрозумілим за пів секунди! Сьогодні ми навчимося креслити діаграми двома шляхами: вручну геометрією на Canvas та автоматично за допомогою бібліотеки Matplotlib.

1. Графічне полотно Canvas у Tkinter

Віджет Canvas (Полотно) — це векторне полотно для малювання геометричних фігур, діаграм, графіків функцій та анімації в мові Python.

Система координат Canvas:

На відміну від класичної декартової системи з уроків геометрії, у комп'ютерній графіці:
• Початок координат $(0, 0)$ розташований у лівому верхньому кутку полотна!
• Вісь $X$ спрямована праворуч (зростає горизонтально).
• Вісь $Y$ спрямована вниз (зростає вертикально донизу).

create_line(x1, y1, x2, y2)Малює пряму лінію або вісь зі стрілкою arrow=tk.LAST.

create_rectangle(x1, y1, x2, y2)Прямокутник за двома діагональними кутами (основа стовпчастої діаграми).

create_text(x, y, text="...")Виводить підпис категорії або числове значення стовпця.

Симулятор Tkinter GUI § 30–31 (ПР 9)

Список Listbox та Візуалізація на Полотні Canvas

Середнє: 20.9° Мін: 15° / Макс: 26°

🐍 Графік температур — Tkinter Canvas v8.6

Введення значення (Entry):

Список (Listbox): Клікніть для вибору

Елемент [0]: 15°C

Елемент [1]: 18°C

Елемент [2]: 22°C

Елемент [3]: 19°C

Елемент [4]: 25°C

Елемент [5]: 21°C

Елемент [6]: 26°C

Полотно (Canvas: width=320, height=220): canvas.create_rectangle()

💻 Ключові команди Tkinter:

from tkinter import *
root = Tk()
lb = Listbox(root, width=20, height=8)
lb.insert(END, 25)                    # Вставка в кінець списку
canvas = Canvas(root, width=320, height=220, bg="white")
canvas.create_rectangle(x1, y1, x2, y2, fill="orange") # Малювання стовпчика
root.mainloop()

2. Алгоритм побудови стовпчастої діаграми

Нехай у нас є список щомісячних температур або прибутку data = [40, 75, 20, 95, 60]. Як побудувати діаграму на Canvas висотою H = 300?

Розрахунок координат стовпчика:

Оскільки координата $Y$ зростає вниз, верхній край стовпчика обчислюється як різниця між базовою лінією низу полотна та висотою стовпця:

bar_width = 40
gap = 20
base_y = 250  # лінія горизонту

for i, val in enumerate(data):
    x1 = 30 + i * (bar_width + gap)
    y1 = base_y - val * 2  # коефіцієнт масштабування
    x2 = x1 + bar_width
    y2 = base_y
    # Малюємо кольоровий стовпчик:
    cv.create_rectangle(x1, y1, x2, y2, fill="#10b981", outline="#059669")
    # Підпис значення над стовпчиком:
    cv.create_text(x1 + bar_width/2, y1 - 10, text=str(val), fill="white")

3. Сучасна візуалізація: бібліотека Matplotlib

У професійній науці про дані (Data Science) ручне малювання діаграм на Canvas замінює бібліотека matplotlib.pyplot, яка будує графіки світового рівня за 3 рядки:

import matplotlib.pyplot as plt

months = ["Січ", "Лют", "Бер", "Кві", "Тра"]

temps = [-2, 1, 6, 12, 18]

plt.plot(months, temps, marker="o", color="blue") # Лінійний графік

plt.title("Динаміка температури")

plt.show()

💡А ти знав? (Цікавий факт)

Від пікселів до штучного інтелекту: Саме за допомогою Matplotlib та NumPy вчені візуалізували першу в історії людства фотографію чорної діри у галактиці M87 у 2019 році!

✓ Швидка перевірка (Mini-Check)

Які команди модуля matplotlib.pyplot будують відповідно стовпчикову діаграму та лінійний графік?

🗒️

У зошит (за підручником)

Вправи з підручника до цієї теми уроку. Виконуй у робочий зошит або за комп'ютером за вказівкою вчителя:

Домашка • 1 завд.

Вправа 31 (с. 197)

Візуалізація масиву продажів за місяцями у вікні Tkinter та бібліотеці Matplotlib

💡 Підказка від нас: Створити список sales = [11.0, 17.0, 18.0, 32.5, 22.5, 15.5] та month. Додати Listbox та дві кнопки для виклику plt.bar() і plt.plot().

Зроблено

📌

Шпаргалка уроку (головне в один екран)

Усе найважливіше для повторення перед уроком або самостійною роботою

⚡ cw, ch

Ширина (canvas width) і висота (canvas height) полотна у пікселях.

⚡ create_rectangle(x1, y1, x2, y2)

Малювання прямокутника стовпчика діаграми за діагональними координатами.

⚡ create_line(x1, y1, x2, y2, arrow=LAST)

Малювання лінії або осі зі стрілкою на кінці.

⚡ plt.bar(x, y)

Побудова стовпчастої діаграми в Matplotlib.

⚡ plt.plot(x, y)

Побудова лінійного графіка залежності значень.

⚡ plt.show()

Виведення вікна з побудованою діаграмою на екран.

👾

Бос-тест: Візуалізація даних на Canvas

Питання 1 з 3 • Завдай удару по босу теми

+100 XP Рахунок: 0/3

❤️ Здоров'я Боса (HP): 100% Питання 1/3