Модуль I · IT Skills (Cloud Services & Documents) · тема 3, урок 2 з 2 · 120 хвилин
На уроці 4 твоя форма зібрала відповіді однокласників. Вони лежать
у файлі ~/data/responses.csv. На уроці 5 ти зверстав каркас
презентації, а в ньому — два порожні слоти chart1
і chart2. Числа є, місце для них є. Немає самих діаграм.
Мета сьогодні. Заповнити ці два слоти живими діаграмами.
Живими — бо це не картинка, яку ти намалював і вставив. Це код. Він щоразу
бере числа з файлу data.json і малює діаграму заново.
Друга половина уроку — про чесність. Діаграма вміє брехати, не змінивши жодного числа: досить обрізати вісь або переставити стовпчики місцями. Ти навчишся впізнавати такі діаграми й перевіриш власні дві тим самим набором питань.
data.json — виправив там, і слайд оновився сам;Слова Chart.js, fetch і «обрізана вісь» поки нічого не означають.
Розберемо їх по черзі.
<script src="https://cdn…">. Бібліотека — це один
файл chart.min.js (близько 200 КБ), він живе поруч із презентацією
в ~/www/deck/assets/. У класі без мережі презентація з CDN просто
не відкриється — а це той самий кабінет, у якому ти виступатимеш.| Етап | Хв | Що робимо |
|---|---|---|
| Розминка | 10 | Переписані заголовки слайдів з ДЗ уроку 5 |
| Тип даних → тип діаграми | 20 | Дерево рішень, кругова проти стовпчикової |
| Як брехати діаграмою | 20 | Обрізана вісь, 3D, сортування, одиниці |
| JSON як джерело істини | 15 | Анатомія конфігурації Chart.js і fetch |
| Практика: дві діаграми | 40 | Свої дані в слоти chart1 і chart2 |
| Чесність і джерело | 10 | Слайд «звідки дані»: скільки людей, коли зібрано |
| Автоперевірка і підсумок | 5 | check 06 --why |
| Разом | 120 |
deck/data.json — реальні числа з твого опитування;
deck/index.html — оновлена презентація з двома живими діаграмами
різних типів; deck/deck.meta.json — паспорт презентації.
Плюс сама бібліотека deck/assets/chart.min.js. Усе це — текст,
FTP-приймальня приймає такі файли без питань.deck/, а урок — шостий
Теки практики звуться за темою, а не за номером уроку. Тема 3 — це уроки
5 і 6, і обидва складають роботу в одну теку ~/www/deck/.
Не шукай lesson-06: її немає.Спочатку питання «що я хочу, щоб глядач побачив», потім — форма
Діаграма — це не прикраса слайда. Це інструмент порівняння. Числа перетворюються на довжини стовпчиків, кути секторів або точки на шкалі. Глядач бачить різницю очима й не рахує в голові. Тому тип діаграми обирають не за смаком. Спершу вирішуєш, що саме глядач має порівняти.
| Тип | Що кодує число | Коли брати | Коли не брати |
|---|---|---|---|
| Стовпчики bar | довжина від нуля | порівняти між собою окремі категорії: предмети, міста, варіанти відповіді | коли категорія — це час і важлива форма кривої |
| Горизонтальні стовпчики bar + indexAxis: 'y' | довжина від нуля | те саме, але категорій багато або в них довгі назви | практично не буває помилкою там, де підходять звичайні стовпчики |
| Лінія line | позиція точки і нахил | зміна однієї величини в часі: дні, тижні, місяці | коли по осі X не час, а незалежні категорії — лінія натякне на зв’язок, якого немає |
| Кругова pie / doughnut | кут і площа сектора | 2—3 частки одного цілого, різниця між якими очевидна | майже завжди: див. наступний блок |
| Точкова scatter | дві позиції: X і Y | перевірити зв’язок двох чисел одного об’єкта: години сну і оцінка | коли в об’єкта лише одне число — тоді нема що ставити по X |
Пройди його зверху вниз для кожного зі своїх трьох дослідницьких питань з уроку 3. Відповідь — це і є тип діаграми для цього слайда.
Твоя форма працювала тиждень. Ти хочеш показати на слайді, як щодня росла кількість заповнень. Ось вони: 3, 5, 4, 9, 14, 6, 2. Який тип діаграми і чому саме він?
Питання «твій улюблений предмет» дало 12 різних відповідей. Назви довгі: «Захист України», «Зарубіжна література». Треба показати, які три найпопулярніші. Що ставиш на слайд?
Це не мода дизайнерів, а вимірюваний факт про людське око
У 1984 році Вільям Клівленд і Роберт Мак-Ґілл поставили дослід. Людям показували графіки й питали одне: у скільки разів одна величина більша за іншу?
Найточніше око вгадувало, коли числа стояли позиціями на спільній шкалі. Довжину воно читало трохи гірше. А кут — приблизно вдвічі гірше за позицію. Площу — ще гірше.
Кругова діаграма кодує число кутом і площею сектора. Це два найгірші способи зі списку. А стовпчикова кодує його довжиною від спільної нульової лінії — одним із найкращих.
На круговій діаграмі два сектори — 22% і 19%. Половина класу впевнена, що більший перший, половина — що другий. На стовпчиках із тими самими числами сперечатися не було б про що. Що саме сталося?
Найсильніша ілюстрація уроку: одні й ті самі два числа, дві діаграми, два протилежні висновки
Уяви заголовок у новинах: «Розрив між нами і конкурентом величезний». Під ним — діаграма з двома стовпчиками, і правий явно втричі вищий. А самі числа підписані чесно: 48 і 52. Ніхто не збрехав жодною цифрою — збрехала вісь.
Його можна порахувати. Береш два стовпчики. Дивишся, у скільки разів один виглядає вищим за інший. І ділиш це на те, у скільки разів він більший насправді:
Одиниця означала б чесну діаграму. Усе, що помітно більше за одиницю, — це вже не «краще видно різницю», а перебільшення. У конструкторі нижче цей коефіцієнт рахується для твоїх власних даних просто на очах.
У новинах показали графік, де стовпчик конкурента вдвічі нижчий за наш, хоча підписані числа — 48 і 52. Жодне число не перебріхане. Як таке взагалі можливо?
Це найпоширеніше виправдання, і воно працює гірше, ніж здається. Коррелл, Бертіні й Франконері перевірили це дослідом. Що вище починається вісь, то більшою людям здається різниця. Позначка про обрізання майже не допомагає. Хоч зигзаг малюй, хоч підпис став: перше враження вже склалося з довжини стовпчиків.
| Тип діаграми | Вісь значень має починатися з нуля? | Чому |
|---|---|---|
| Стовпчикова | Так, завжди | число закодоване довжиною; довжина без нуля нічого не означає |
| Лінійна (часовий ряд) | Не обов’язково, але підпиши | тут значення кодує позиція точки, а важлива форма кривої; курс валюти від нуля — просто пряма лінія |
| Точкова | Не обов’язково | показує зв’язок двох величин, а не їхню абсолютну величину |
| Кругова | Питання не виникає | у неї немає осі; ціле — це завжди 100% |
options.scales.y.beginAtZero. Для стовпчиків він має бути
true. Якщо в твоєму конфізі стоїть min: 46 або
beginAtZero: false на стовпчиках — автоперевірка це побачить.
Критерій лишиться відкритим, поки вісь не почнеться з нуля. Виправив рядок,
перезалив файл — і перевіряй знову, спроби не обмежені.Ти зробив стовпчики з віссю від 46 — «щоб краще було видно різницю». Вісь при цьому підписав чесно й додав значок розриву. Однокласник каже: «все чесно, ти ж нічого не сховав». Хто має рацію?
3D-ефект, порядок категорій і зникла одиниця виміру
Об’ємний стовпчик має два верхні краї — передній і задній. Значення відкладене по задньому, а око читає передній, бо він ближче й контрастніший. Помилка виходить не випадковою: усі стовпчики «недораховуються» на однакову висоту, і відсотково найдужче страждає найменший.
Дані ті самі, стовпчики ті самі, вісь від нуля — а висновок різний. Причина в тому, що око шукає сусідів. У неупорядкованому ряду воно порівнює кожен стовпчик із тим, що стоїть поруч. Найбільший стовпчик, який опинився далеко від сусіда-суперника, око легко пропускає.
Ти показав однокласникам дві діаграми зі своїх даних. Числа однакові, обидві осі від нуля, типи однакові. Після першої вони сказали «усе приблизно рівно», після другої — «біологія явно попереду». Що ти зробив між ними?
Підпис «Математика — 9» не означає нічого. Дев’ять чого: людей, відсотків, годин, балів? Якщо на слайді не написано, глядач додумає сам — і майже завжди додумає на твою користь, а потім образиться.
| Що підписати | Де це в Chart.js | Приклад |
|---|---|---|
| Назву діаграми — тезою, а не темою | options.plugins.title.text |
«Половина класу спить менше 7 годин», а не «Сон» |
| Одиницю по осі значень | options.scales.y.title.text |
осіб (усього 24) |
| Що по осі категорій | options.scales.x.title.text |
годин сну за добу |
| Джерело і дату збору | окремий слайд або підпис під діаграмою | «власне опитування 9-А, 24 відповіді, 12—14 лютого 2026» |
На слайді кругова діаграма: «Так — 62,5%, Ні — 37,5%». Учитель питає, скільки людей ти опитав. Ти відповідаєш: «вісьмох». Що не так із підписами на цьому слайді?
Проєктор вицвітає, принтер друкує сірим, а близько 8% хлопців погано розрізняють червоне й зелене
Твоя діаграма поїде на проєктор у кабінеті, де світло з вікна, і, можливо, на роздруківку. Це той самий випадок, що й контраст 4,5:1 з минулого уроку. Правило зроблене не для «особливих» глядачів, а для звичайних умов.
| Правило | Що це означає на практиці |
|---|---|
| Не тільки колір | колір може бути єдиною ознакою лише як дублювання. Легенда «синій — 9-А, зелений — 9-Б» на вицвілому проєкторі не читається; підпиши серії просто біля лінії або стовпчика |
| Підписуй значення | число прямо на стовпчику знімає половину питань і рятує, коли шкала розмита. Chart.js сам цього не робить — потрібен крихітний плагін (він нижче) |
| Контраст | текст на діаграмі — не менше 4,5:1 до тла, самі стовпчики й лінії — не менше 3:1. Це ті самі критерії WCAG, що й для тексту слайда |
| Текстова альтернатива | <canvas> для скрінрідера — порожня пляма. Дай aria-label з висновком одним реченням, а поруч — підпис із числами |
Твоя лінійна діаграма має дві лінії: 9-А і 9-Б. Різняться вони лише кольором — синя й зелена, а хто є хто, написано в легенді збоку. На проєкторі в класі однокласник не може сказати, яка лінія чия. Найдешевше виправлення?
fetchДані живуть у data.json, код живе в index.html, і вони ніколи не змішуються
Chart.js — це бібліотека, яка малює діаграму на елементі
<canvas>. Ти описуєш словами, що хочеш побачити, вона
рахує пікселі. Уся конфігурація — це один об’єкт із трьох ключів:
type, data і options.
labels і data зв’язані за
порядком: перший підпис стосується першого числа. Якщо їх різна кількість,
Chart.js не впаде — він мовчки намалює зайву порожню категорію.У твоєму конфізі labels має 5 елементів, а data —
4. Сторінка відкривається, помилок у консолі немає, діаграма
намалювалася. Що ти побачиш на слайді?
Числа можна було б вписати прямо в масив data. Так роблять —
і потім страждають. Прийшла нова відповідь у форму — лізь у HTML, шукай
потрібний рядок серед розмітки, виправляй вручну.
Один раз забудеш — і слайд покаже старі числа. Помилка тиха: сторінка працює, просто каже неправду.
cross в автоперевірці: сторінка
має справді робити мережевий запит по data.json, а не
тримати копію чисел у розмітці.data.jsonФормат придумуєш ти сам — це твій файл. Головне, щоб він був валідним JSON і щоб у ньому був паспорт даних: скільки людей, коли зібрано, звідки. Ось робочий каркас:
Числа в прикладі — демонстраційні: сума values у першій
діаграмі дорівнює 24, тобто respondents. У твоєму файлі
мають бути свої числа. Вони мають сходитися з файлом
~/data/responses.csv — тим, який зібрала твоя форма на уроці 4.
file:///…
fetch не працює: браузер блокує читання сусіднього файлу.
Підніми локальний сервер — і адреса стане http://localhost:8000.щось > data.json
створить файл, який чекер прочитати не зможе.<canvas> у прихованому слайді. reveal.js
ховає неактивні слайди, і Chart.js може порахувати розмір як нуль.-Encoding utf8 у PowerShell 5.1 додає на початок файлу
невидимий маркер BOM. Більшість JSON-парсерів його пробачають, але не всі.
Найнадійніше — просто набрати data.json руками у своєму
редакторі й зберегти як UTF-8 без BOM: файл маленький, це швидше,
ніж потім шукати помилку.Дай слоту фіксовану висоту в CSS і скажи Chart.js не тримати співвідношення сторін. Тоді діаграма займе слот, а не нуль пікселів:
У самого Chart.js підписів значень немає — тільки підказка при наведенні, а на слайді ніхто мишкою не водить. Ось плагін на десять рядків, який малює число над кожним стовпчиком:
На очній здачі вчитель відкриє твій data.json, змінить
одне число, збереже й перезавантажить слайд. Що має статися — і що
станеться, якщо ти продублював числа ще й у масиві data
всередині HTML?
Устав свої дані, покрути перемикачі — і забери готовий
data.json та конфіг Chart.js, які вже узгоджені між собою
Ця сторінка малює діаграму власним кодом, без Chart.js: вона має
відкриватися будь-де, навіть без мережі. Але конфігурацію вона генерує
справжню — ту, яку ти вставиш у deck/index.html. Спробуй
увімкнути «обрізати вісь Y» і подивись, що напише блок перевірки.
data.json, другий у index.html. Далі правиш
руками: конструктор дає каркас, а не готову здачу.Ти ввімкнув «обрізати вісь значень», і конструктор написав: «коефіцієнт перебільшення 4,1». Що це число означає для глядача, який побачить твій слайд?
Чотири файли в теці ~/www/deck/, усі — легкі й текстові
| Файл | Що в ньому | Звідки береться |
|---|---|---|
data.json | твої числа й паспорт даних | зводиш зі свого stats.json і ~/data/responses.csv з теми 2 |
index.html | презентація з уроку 5 плюс fetch і два конфіги |
дописуєш до того, що вже здав |
deck.meta.json | паспорт презентації для перевірки | пишеш руками, звіряючи з тим, що реально в DOM |
assets/chart.min.js | сама бібліотека, ≈200 КБ | копіюєш із /opt/school/vendor/chartjs/ або завантажуєш у себе й заливаєш по FTP |
Поле charts має описувати рівно ті типи, які чекер
знайде на сторінці. У deck.meta.json написано "pie",
а в коді стоїть type: 'bar'? Тоді критерій
json_schema лишиться відкритим, поки паспорт і код не зійдуться.
І це не прискіпливість: паспорт, який розходиться з роботою, гірший
за відсутній.
У презентації має бути окремий слайд із методикою. Три речення, які на ньому обов’язкові:
/form/, добровільно й анонімно.~/data/responses.csv лишається в приватній теці. Це
відповіді однокласників: у ~/www/ вони стануть доступні
всьому інтернету. У data.json кладуть лише зведені
числа — скільки людей обрало кожен варіант, — і жодного рядка,
за яким можна впізнати конкретну людину.Кроки 1—9 — у себе на комп’ютері, кроки 10—12 — на сервері. Галочки зберігаються, сторінку можна закрити.
type кожної діаграми і вимагає,
щоб вони не збіглися. Дві стовпчикові — це один критерій не пройдено,
навіть якщо обидві бездоганні.Чекер не оцінює красу. Він звіряє твої числа з твоїм же
responses.csv і дивиться, чи діаграма справді жива.
Спроби не обмежені.
Демонстраційний режим: результат згенеровано для показу. На сервері
ця кнопка викликає POST /api/check, який запускає
check 06 від імені учня.
deck/data.json, змінює одне число, зберігає
і перезавантажує слайд — діаграма мусить перемалюватися сама;Це те, що бачить учитель, коли виставляє оцінку.
| Складник | Вага | Результат |
|---|
data.json, код — в index.html,
і вони не дублюють одне одного;cross не проходить;fetch мовчки падає,
і на слайді порожній <canvas>;data.json збережено PowerShell-редиректом і вийшов у UTF-16.Додай третю діаграму на слайд «висновок» — типу, якого ще немає
в презентації. І допиши в ~/www/deck/outline.md один абзац
на два питання. Який висновок із твоїх даних виявився несподіваним?
Яке число тебе здивувало?
Пиши конкретно, з числами. «Усі багато сидять у телефоні» — так не годиться. А от так годиться: «я думав, що більшість спить менше 7 годин. Таких виявилося 9 із 24 — менше половини». І другим реченням: «зате 6 людей із 24 лягають після опівночі».
Усе, що на цій сторінці подано як факт, має джерело. Перевіряти дозволено й корисно.
type / data / options, типи діаграм,
налаштування осей і плагінів.
chartjs.org/docs/latestbeginAtZero і лінійна вісь.
chartjs.org/docs/latest/axes/cartesian/linear.htmlafterDatasetsDraw,
з якого зроблено підписи значень.
chartjs.org/docs/latest/developers/plugins.htmlfetch() — як браузер завантажує data.json
і чому це не працює з протоколу file://.
developer.mozilla.org/…/fetchsection,
локальне підключення, поведінка неактивних слайдів.
revealjs.comПовний список із поясненнями, що звідки взято, —
у файлі urok-06-джерела.md поруч із цією сторінкою.