Від таблиці до висновку: зведені, діаграми, юніт-економіка

Що робимо сьогодні

Модуль I · IT Skills (Cloud Services & Design) · тема 3, урок 2 з 2 · 120 хвилин · проєкт STARTUP LAUNCH

Мета. Учора ти зробив чисту таблицю data/market.csv. Сьогодні дістанемо з неї два числа.

Перше: скільки грошей лишається тобі з одного продажу. Друге: скільки продажів треба зробити, щоб вийти в нуль.

Обидва числа поїдуть на сервер — сторінкою analytics.html.

Рахувати їх учить юніт-економіка. Формул тут дві, кожна в один рядок. Ті самі дві формули рахують і кіоск із кавою, і застосунок на мільйон користувачів.

Після уроку ти вмієш

• згортати сотні рядків market.csv у таблицю на кілька чисел і бачити, який сегмент приносить найбільше грошей;
• рахувати, скільки гривень лишається тобі з одного продажу;
• рахувати, скільки продажів треба зробити, щоб вийти в нуль, і казати, скільки це продажів на день;
• обирати ціну трьома різними способами й називати причину свого вибору;
• малювати діаграму просто в коді сторінки й підписувати її реченням, у якому є число.

Слова «юніт-економіка», «маржа», «точка беззбитковості» і <svg> поки нічого не означають — розберемо кожне тоді, коли воно знадобиться.

Хід уроку

Зведена таблиця: триста рядків у кілька чисел

Згорнути рядки в групи й порахувати. Усе інше — інтерфейс

У market.csv один рядок — один запис. Поки їх десять, ти читаєш очима. Коли їх триста, очі здаються.

Тоді береш колонку «клас» і кажеш: склади всі рядки, де стоїть 9-А. Потім те саме для 10-Б і для 11-А. Замість трьохсот рядків лишається три числа.

Це й робить зведена таблиця. Вона збирає рядки з однаковим значенням в одну групу й рахує підсумок групи.

Нових даних вона не додає й нічого не вигадує. Сума в зведеній дорівнює сумі в сирій таблиці. Так найшвидше перевірити, що нічого не загубилося.

Яке питання ставить зведена

Перед тим як тягнути поля в зони, скажи вголос одне речення: «скільки чого у розрізі чого».

Наприклад: «скільки грошей у розрізі класів». Речення склалося — зведена підходить. Не склалося — тобі потрібен фільтр або сортування.

Юніт-економіка: чи заробляє одна штука

Питання, яке інвестори ставлять першим, а школярі — останнім

Ти продав одну наліпку. Скільки грошей із неї лишилося тобі? Не за місяць і не «в цілому» — з однієї штуки.

Розрахунок на одну штуку зветься юніт-економікою (від unit — одиниця).

Навіщо рахувати саме штуку. Якщо одна наліпка приносить збиток, тисяча наліпок принесе тисячу збитків. Продавати більше тут не рятує.

Тому питання «скільки ми продамо» ставлять другим. Першим — «скільки ми заробляємо з однієї».

Що таке одиниця у твоєму продукті

Дві категорії витрат, які не можна плутати

З ціни 200 грн ти віддаєш 120 грн за папір, друк і пакет. Тобі лишається 80 грн.

Ці 80 грн і звуться маржею з одиниці.

Постійні витрати і точка беззбитковості

Твої постійні витрати вже пораховані — на першому уроці

На уроці 1 ти збирав у калькуляторі свою конфігурацію хостингу. Ось «комфортна» з того калькулятора. Тепер це не довідка, а перший рядок твоєї юніт-економіки.

Мінімальна конфігурація з уроку 1 — 68,04 $ на рік. Це 5,67 $ на місяць, приблизно 240 грн. Далі рахуємо за комфортною: 400 грн на місяць.

І це все одно нижня межа. За ці гроші сайт просто доступний, більше нічого.

У реального продукту зазвичай є ще щось щомісячне: підписка на редактор, полиця в майстерні, реклама. Ось повний розклад для продукту цього уроку.

Формула і одне важливе округлення

Точка беззбитковості — це кількість продажів, за якої дохід дорівнює витратам. Ні збитку, ні прибутку.

Чому CEILING, а не звичайне округлення. Постійні витрати 4050, маржа 80. Ділення дає 50,6.

П’ятдесятьма продажами ти закриєш лише 4000. Лишиться 50 грн збитку. А половини продажу не буває.

Тому округлюють завжди вгору: 51. Автоперевірка звіряє це число точно, без похибки — округлення вниз вона не прийме.

Калькулятор юніт-економіки

Постав свої числа — і подивись, скільки продажів на день це означає

Це той самий розрахунок, що на схемі вище, тільки живий. Тягни повзунок ціни — графік перемальовується одразу.

Дивись не на плашки з числами, а на останній рядок — вердикт. Він рахує не «скільки продати», а «яка частина твоєї аудиторії має купити». Саме тут більшість планів і розсипається.

Чому «продамо 1000 штук» — це не план

План — це число, яке ти можеш захистити. Решта — побажання

У пітчах постійно трапляється рядок «за перший місяць продамо 1000 підписок». Питання до нього завжди одне й те саме: звідки 1000? Якщо у відповідь звучить «ну, школа велика» — це не план, а бажання.

Хороше число будується у зворотному напрямку. Спершу рахуєш, скільки треба для нуля. Потім дивишся, яка це частка від реальної аудиторії. І аж тоді говориш, скільки продаси.

Число вийшло нереальним. Що робити

Це не поразка, а результат розрахунку. Важелів рівно три, і кожен видно у формулі.

Підняти ціну — найсильніший важіль. Ціна 200 при змінних 120 дає маржу 80. Піднімеш ціну до 220 — це плюс 10 %.

А маржа стане 100. Це вже плюс 25 %. Точка беззбитковості впаде з 50 до 40.

Чому так. Змінні витрати нікуди не поділися, і вся надбавка пішла в маржу. Тому маленький крок по ціні дає великий крок по маржі.

Три підходи до ціни

Ціна — це рішення, а не наслідок. Її обирають, а не знаходять

Коли треба поставити ціну, майже всі роблять одне й те саме. Беруть собівартість і додають «скільки не шкода».

Це один із трьох підходів. І зазвичай найслабший.

Чому найдешевше не завжди виграє

• Дешевша ціна ріже маржу непропорційно. Знизив ціну з 200 до 180 — це мінус 10 % ціни, але мінус 25 % маржі (з 80 до 60). Точка беззбитковості підскочила з 50 до 67 продажів.
• Ціна — це сигнал якості. Значок за 5 грн і значок за 60 грн люди сприймають як різні речі, навіть якщо вони однакові.
• У війні цін виграє той, у кого нижчі витрати. Якщо конкурент друкує партіями по 500, його змінні витрати нижчі за твої — і в цій війні ти програєш ще до початку.
• Дешево привертає не тих покупців. Ті, хто прийшов лише через найнижчу ціну, підуть до наступного, хто зробить ще дешевше.

Діаграма для висновку, а не для краси

Одна діаграма — одна думка. Підпис містить висновок, а не назву

Діаграму ставлять на сторінку не тому, що «має бути картинка». Вона доводить одну конкретну думку швидше за текст.

Прочитай свою діаграму й скажи, що з неї випливає. Не виходить — діаграма тут зайва.

Ще одна перевірка. Опиши одним реченням, що діаграма показує. Якщо в реченні з’явилося «а ще» або «і водночас» — це дві діаграми, які злиплися в одну.

Формула підпису-висновку

Три частини, усі обов’язкові:

1. Число — конкретне, з твоєї таблиці, а не «більшість» і не «значно».
2. Порівняння або частка — 56 із 80, у чотири рази, кожен дванадцятий.
3. Наслідок — що ми через це робимо або не робимо.

Чому діаграму пишуть кодом, а не вставляють картинкою

Інлайновий <svg> замість скриншота — і це не примха вчителя

Спокуса зрозуміла. Побудував діаграму в Sheets, зняв екран, вставив <img> — готово.

Але знімок екрана — це сітка кольорових крапок. Число 34 на ньому вже не число, а візерунок. Виправити його на 36 не вийде: доведеться перебудовувати діаграму й знімати екран заново.

«Інлайновий» означає «прямо в HTML» — не окремим файлом і не через <img src="chart.svg">.

Тільки так діаграма підхоплює колір і шрифт сторінки. І тільки так до неї дістається твій CSS.

Три речі, які автоперевірка шукає у твоєму SVG

• <title> усередині <svg> — це назва діаграми для скрінрідера, і саме її шукає автоперевірка. Якщо <title> порожній або його немає зовсім, пункт лишиться червоним, поки ти його не допишеш.
• viewBox замість жорстких width і height — інакше діаграма не масштабується і ламає верстку на телефоні.
• fill="currentColor" замість кольору літералом — тоді діаграма сама перефарбовується під світлу й темну тему. Відтінки робляться через opacity, а не через десять різних кольорів.

Генератор діаграми

Свої дані → інлайновий SVG → готовий код для analytics.html

Устав свої числа, обери тип, напиши підпис-висновок — і забери код.

Генератор малює діаграму власним кодом сторінки, без жодної бібліотеки. Те, що ти скопіюєш, — звичайна розмітка. В analytics.html вона працюватиме так само.

Згенерований код навмисно використовує currentColor і opacity замість конкретних кольорів: така діаграма однаково читається у світлій і темній темі та не тягне за собою brand.css, якого на уроці 4 ще немає.

Практика: збираємо analytics.html

Виконуй по черзі. Галочки зберігаються — сторінку можна закрити

Автоперевірка

Друга частина check11 3. Спроби не обмежені

Демонстраційний режим: результат згенеровано для показу. На сервері ця кнопка запускає check11 3 від імені учня — утиліта робить реальний запит на твій сабдомен, парсить analytics.html і звіряє числа з data/market.csv.

Що вчитель дивиться на твоєму екрані

• зведена в Sheets жива: він просить змінити фільтр і дивиться, чи змінилися числа;
• показники пораховані формулами, а не вписані руками;
• чернетки й скриншоти діаграм — у тебе на машині, а не в ~/www/;
• ти вголос називаєш свою точку беззбитковості й пояснюєш, скільки це на день.

Шкала виконання

Це те, що бачить учитель, коли виставляє оцінку

Чотири речення, які варто запам’ятати

• Зведена таблиця згортає рядки в групи й рахує підсумок — і завжди перераховується сама.
• Ціна мінус змінні витрати — це маржа з одиниці. Маржа ще не прибуток.
• Постійні витрати ділимо на маржу і округлюємо вгору — це точка беззбитковості.
• Підпис під діаграмою містить число і наслідок, інакше це просто назва.

Де найчастіше помиляються

• Кругова діаграма для динаміки в часі — час не є частками цілого.
• Висновок-переказ («сегмент А найбільший») без числа й без наслідку.
• break_even_units округлено вниз замість ceil.
• Реклама вписана у змінні витрати, хоча вона постійна.
• Скриншот діаграми замість інлайнового <svg>.

Домашнє завдання

1. Переписати найслабший із трьох висновків так, щоб у ньому було число з market.csv і відповідь на питання «і що з цього випливає для продукту?».
2. Порахувати в калькуляторі два сценарії: постійні витрати лише з уроку 1 (400 грн) і повні. Записати обидві точки беззбитковості у CHANGELOG.md одним рядком із датою.
3. Знайти ціну, за якої точка беззбитковості падає рівно вдвічі. Потім одним реченням пояснити, чому ціна, піднята на 10 %, опускає точку беззбитковості більш ніж на 10 %. Приклад із уроку: ціна 220 замість 200 дає маржу 100 замість 80, і точка беззбитковості падає з 50 продажів до 40.

Звідки взяті факти

Усе, що можна перевірити, — з відкритої документації й довідників. Перевіряти дозволено й корисно

• Зведені таблиці: зони «рядки / колонки / значення / фільтр» — довідка Google Таблиць. support.google.com · Create and use pivot tables
• Те саме в Excel — довідка Microsoft. support.microsoft.com · Create a PivotTable
• Маржинальний дохід з одиниці (contribution margin) — означення й формула. investopedia.com · Contribution Margin
• Точка беззбитковості та її формула — investopedia.com · Break-Even Point, corporatefinanceinstitute.com · Break-Even Analysis
• Постійні й змінні витрати: у чому різниця — investopedia.com · Fixed vs Variable Costs
• Три підходи до ціноутворення (від витрат, від конкурентів, від цінності) — відкритий підручник OpenStax «Principles of Marketing», розділ про ціну. openstax.org · Principles of Marketing
• Cost-plus pricing і його межі — investopedia.com · Cost-Plus Pricing
• Вибір типу діаграми під тип питання — довідник Data Visualisation Catalogue. datavizcatalogue.com
• Підпис як висновок, а не як назва — блог Cole Nussbaumer Knaflic «storytelling with data». storytellingwithdata.com · blog
• Класична стаття про способи зіпсувати графік — H. Wainer, «How to Display Data Badly», The American Statistician, 1984. tandfonline.com · How to Display Data Badly
• SVG: viewBox, масштабування й система координат — MDN. developer.mozilla.org · viewBox
• currentColor як значення кольору — MDN. developer.mozilla.org · currentColor
• Доступність SVG: <title> і role="img" — специфікація SVG 2 і рекомендації W3C. w3.org · SVG 2, title
• CEILING у Google Таблицях — довідка функції. support.google.com · CEILING
• Ціни на VPS, домен і сертифікат — ті самі джерела, що на уроці 1: прайси хостерів і letsencrypt.org (сертифікат безкоштовний).

Повний список із поясненнями — у файлі urok-04-джерела.md поруч із цією сторінкою. Усі суми в гривнях на сторінці, крім рядка «хостинг» з уроку 1, — ілюстративні: вони показують хід розрахунку, а не реальний прайс. Курс 42 грн за долар узятий округлено; підстав поточний курс НБУ, і числа зміняться.