mirror of
https://github.com/olehomelchenko/dataviz-portfolio-template.git
synced 2026-09-24 23:41:46 +00:00
374 lines
20 KiB
Markdown
374 lines
20 KiB
Markdown
# Портфоліо · шаблон
|
||
|
||
Сайт для ваших робіт із курсу «Візуалізація даних». Читач відкриває
|
||
посилання і бачить роботи одразу.
|
||
|
||
Сайт вбудовує графіки й дашборди з **Tableau Public** і специфікації
|
||
**Vega-Lite**. Кількість графіків в одній роботі не обмежена.
|
||
|
||
Одна робота — один файл у папці `_works/`. Текст пишете звичайним
|
||
Markdown, графік ставите одним рядком. HTML не потрібен.
|
||
|
||
Програм ставити не треба. Усі кроки робіть у браузері.
|
||
|
||
> **УВАГА. Сайт публічний.** Його бачить будь-хто в інтернеті, і на
|
||
> ньому стоїть ваше ім'я.
|
||
>
|
||
> 1. Беріть навчальні або відкриті дані.
|
||
> 2. Якщо графік зроблено на робочих даних, заберіть назви клієнтів
|
||
> і справжні суми.
|
||
> 3. У Tableau Public вимкніть **Allow Access**. Інакше книгу з
|
||
> даними можна завантажити.
|
||
|
||
---
|
||
|
||
## Крок 1. Зробіть із шаблону свій репозиторій
|
||
|
||
1. Угорі натисніть зелену кнопку **Use this template**.
|
||
2. Виберіть **Create a new repository**.
|
||
3. У полі **Repository name** напишіть `dataviz-portfolio`.
|
||
4. Виберіть **Public**. Приватний репозиторій GitHub не публікує.
|
||
5. Натисніть **Create repository**.
|
||
|
||
Далі працюйте у своєму репозиторії, а не в цьому.
|
||
|
||
## Крок 2. Увімкніть публікацію
|
||
|
||
1. У своєму репозиторії відкрийте вкладку **Settings**.
|
||
2. Зліва виберіть **Pages**.
|
||
3. У полі **Source** виберіть `Deploy from a branch`.
|
||
4. У полі **Branch** виберіть `main` і папку `/ (root)`.
|
||
5. Натисніть **Save**.
|
||
6. Зачекайте одну-дві хвилини й оновіть **Settings → Pages**.
|
||
|
||
Угорі з'явиться адреса вашого сайту:
|
||
|
||
```
|
||
https://ВАШ-ЛОГІН.github.io/dataviz-portfolio/
|
||
```
|
||
|
||
Відкрийте адресу. На сайті стоять дві роботи-приклади і список робіт
|
||
у бічній панелі. Приклади — це файли в папці `_works/`. Видаліть їх,
|
||
коли додасте свої роботи.
|
||
|
||
## Крок 3. Замініть ім'я на сайті
|
||
|
||
Ім'я стоїть тільки у файлі `_config.yml`.
|
||
|
||
1. Відкрийте `_config.yml`.
|
||
2. Замініть `title`, `role` і `tagline`.
|
||
3. Натисніть **Commit changes**.
|
||
|
||
```yaml
|
||
title: "Олена Ковальчук"
|
||
role: "Аналітик даних"
|
||
tagline: "Роботи з курсу «Візуалізація даних» KSE, 2026."
|
||
```
|
||
|
||
Сайт оновиться через хвилину.
|
||
|
||
Лапки навколо тексту обов'язкові. Усередині тексту беріть лапки «такі».
|
||
|
||
Якщо копію зроблено до 7 вересня 2026 і на головній сторінці лишилось
|
||
«Ім'я Прізвище», ім'я стоїть ще в одному місці: відкрийте `index.md`
|
||
і в рядку `heading` замініть «Ім'я Прізвище» на своє.
|
||
|
||
---
|
||
|
||
## Додайте роботу
|
||
|
||
Одна робота — один файл у папці `_works/`. Графік стоїть у тексті
|
||
роботи, на своєму місці.
|
||
|
||
1. Відкрийте папку `_works`.
|
||
2. Натисніть **Add file → Create new file**.
|
||
3. Напишіть ім'я файлу латиницею, з `.md` на кінці: `03-facets.md`.
|
||
4. Вставте текст нижче і замініть його своїм.
|
||
5. Натисніть **Commit changes**.
|
||
|
||
```markdown
|
||
---
|
||
title: "Назва роботи"
|
||
---
|
||
|
||
**Питання:** на яке питання відповідає графік.
|
||
|
||
|
||
|
||
**Рішення:** що ви вирішили і чому.
|
||
|
||
**Що видно:** що з цього побачив читач.
|
||
```
|
||
|
||
Роботи стоять на сторінці за іменем файлу, за абеткою. Ставте число
|
||
попереду: `01-`, `02-`, `03-`. Пункт у бічній панелі з'являється сам.
|
||
|
||
Найсильнішу роботу ставте першою: її побачать усі.
|
||
|
||
### Три способи поставити графік
|
||
|
||
Кожен спосіб — один рядок у тексті роботи.
|
||
|
||
#### Графік із Tableau Public
|
||
|
||
Скопіюйте адресу з адресного рядка і поставте її в текст:
|
||
|
||
```markdown
|
||
|
||
```
|
||
|
||
#### Специфікація в тексті роботи
|
||
|
||
Файл завантажувати не треба. Вставте специфікацію між двома рядками
|
||
з трьох зворотних апострофів. На першому рядку допишіть `vega-lite`:
|
||
|
||
````markdown
|
||
```vega-lite
|
||
{
|
||
"mark": "bar",
|
||
"data": { "values": [ { "місяць": "Січень", "продажі": 28 } ] },
|
||
"encoding": {
|
||
"x": { "field": "місяць", "type": "nominal" },
|
||
"y": { "field": "продажі", "type": "quantitative" }
|
||
}
|
||
}
|
||
```
|
||
````
|
||
|
||
#### Специфікація окремим файлом
|
||
|
||
Так робіть, коли специфікація довга або потрібна в кількох роботах.
|
||
|
||
1. Відкрийте папку `specs`.
|
||
2. Натисніть **Add file → Upload files**.
|
||
3. Перетягніть файл. Ім'я — латиницею, без пробілів.
|
||
4. Натисніть **Commit changes**.
|
||
5. Поставте в текст роботи рядок:
|
||
|
||
```markdown
|
||
|
||
```
|
||
|
||
Текст у квадратних дужках стає підписом під графіком. Якщо підпис не
|
||
потрібен, лишіть дужки порожніми: ``.
|
||
|
||
### Поставте кілька графіків в одній роботі
|
||
|
||
Кожен графік стоїть у тексті на своєму місці. Кількість не обмежена.
|
||
|
||
Два графіки стають в **один ряд**, коли їхні рядки йдуть підряд, без
|
||
порожнього рядка між ними:
|
||
|
||
```markdown
|
||
|
||
|
||
```
|
||
|
||
Ряд ставте тоді, коли читач має порівняти два графіки. Порожній
|
||
рядок між ними дає два окремі графіки, один під одним. На вузькому
|
||
екрані ряд теж розпадається на два графіки один під одним.
|
||
|
||
Усі чотири записи стоять поруч у роботі-прикладі
|
||
`_works/02-embedding.md`. Заготовка для власної роботи —
|
||
`_works/01-template.md`.
|
||
|
||
### Ширина і висота
|
||
|
||
Графік займає ширину колонки тексту.
|
||
|
||
Специфікація без поля `width` підлаштовується під колонку. Якщо поле
|
||
`width` є, графік лишається такої ширини. Якщо графік ширший за
|
||
колонку, з'являється горизонтальна прокрутка.
|
||
|
||
Дашборд Tableau ширший і вищий за колонку. Допишіть у лапках після
|
||
адреси слово `wide` і висоту в пікселях:
|
||
|
||
```markdown
|
||
|
||
```
|
||
|
||
Слово `wide` виводить графік за межі колонки тексту. Число задає
|
||
висоту рамки. Якщо низ дашборда обрізаний, збільшуйте число.
|
||
|
||
### Багато правок за раз: github.dev
|
||
|
||
Через сайт github.com зручно правити один файл. Коли файлів кілька,
|
||
відкрийте **github.dev** — той самий редактор VS Code, тільки
|
||
в браузері. Ставити нічого не треба.
|
||
|
||
1. Відкрийте свій репозиторій на github.com.
|
||
2. Натисніть клавішу **`.`** (крапка). Або замініть у адресі
|
||
`github.com` на `github.dev`.
|
||
3. Зліва — дерево файлів, посередині — редактор.
|
||
4. Правки відправте в панелі **Source Control** (третя іконка зліва):
|
||
напишіть повідомлення і натисніть **Commit & Push**.
|
||
|
||
Так за один коміт можна змінити кілька робіт, перейменувати файли
|
||
і знайти текст по всьому репозиторію одразу
|
||
(`Ctrl`/`Cmd` + `Shift` + `F`).
|
||
|
||
github.dev — редактор, а не сайт: графіків він не показує.
|
||
Щоб перевірити специфікацію до коміту, вставте її у
|
||
[Vega Editor](https://vega.github.io/editor/). Сторінку видно
|
||
через хвилину після коміту.
|
||
|
||
### Поля в шапці роботи
|
||
|
||
Шапка стоїть між двома рядками з трьох дефісів, на початку файлу.
|
||
|
||
| Поле | Навіщо |
|
||
|---|---|
|
||
| `title` | заголовок роботи. Обов'язкове поле |
|
||
| `wide: true` | робота на всю ширину сторінки. Для дашбордів |
|
||
| `example: true` | позначка «приклад» і рядок «замініть своєю роботою». У своїх роботах не пишіть |
|
||
|
||
Графіки в шапці не описують. Графік стоїть у тексті роботи.
|
||
|
||
Робота на сторінці згортається. За замовчуванням усі роботи
|
||
розгорнуті. У бічній панелі є кнопка «Згорнути всі».
|
||
|
||
Текст під шапкою — звичайний Markdown. Жирний шрифт, списки й
|
||
посилання працюють.
|
||
|
||
### Перед тим як вбудувати графік Tableau
|
||
|
||
1. Відкрийте графік на Tableau Public.
|
||
2. Натисніть шестерню у верхньому правому куті.
|
||
3. Вимкніть **Show Sheets**. Інакше поруч із графіком видно всі
|
||
аркуші книги, разом із чернетками.
|
||
|
||
### Дашборд ширший за графік
|
||
|
||
Дашборд не вміщується в колонку тексту. Виправте розмір у Tableau:
|
||
|
||
1. Відкрийте дашборд у Tableau.
|
||
2. У полі **Size** виберіть **Automatic**.
|
||
|
||
Якщо розмір змінити не можна, допишіть `wide` і висоту в лапках після
|
||
адреси. Дивіться розділ «Ширина і висота».
|
||
|
||
---
|
||
|
||
## Додайте ще одну сторінку
|
||
|
||
Наприклад, сторінку `about.md` — про себе.
|
||
|
||
1. Натисніть **Add file → Create new file**. Ім'я — `about.md`.
|
||
2. Вставте текст:
|
||
|
||
```markdown
|
||
---
|
||
heading: "Про мене"
|
||
---
|
||
|
||
Аналітик у ритейлі. Тут коротко про досвід і контакти.
|
||
```
|
||
|
||
3. Натисніть **Commit changes**.
|
||
4. Відкрийте `_config.yml` і допишіть сторінку в список `nav`:
|
||
|
||
```yaml
|
||
nav:
|
||
- name: "Про мене"
|
||
file: "about.html"
|
||
```
|
||
|
||
5. Натисніть **Commit changes**.
|
||
|
||
Графік на такій сторінці ставте тим самим рядком, що й у роботі:
|
||
|
||
```markdown
|
||
|
||
```
|
||
|
||
У полі `file` пишіть ім'я з `.html`, навіть якщо файл має `.md`.
|
||
Поки список `nav` порожній, у бічній панелі немає розділу сторінок.
|
||
Після першої сторінки поруч з'явиться посилання «Роботи» на головну.
|
||
|
||
---
|
||
|
||
## Якщо щось не показується
|
||
|
||
Спершу відкрийте вкладку **Actions** у своєму репозиторії. Зелена
|
||
галочка означає, що сайт зібрано. Червоний хрестик означає помилку
|
||
в якомусь файлі. Тоді сайт лишається таким, як був до помилки.
|
||
|
||
| Що бачите | Що робити |
|
||
|---|---|
|
||
| Червоний хрестик в **Actions** | Відкрийте останній запис і прочитайте рядок з `Error:`. Найчастіша причина — лапки в полі `title` |
|
||
| «Не вдалося прочитати адресу Tableau» | Відкрийте графік на Tableau Public і скопіюйте адресу з адресного рядка заново |
|
||
| У рамці англійське «Where's the viz?» | Адресу прочитано, графіка за нею немає. Книгу або аркуш перейменовано, приховано чи видалено |
|
||
| «Файл … не знайдено» | Перевірте, що файл лежить у папці `specs`, а ім'я в рядку збігається. Великі й малі літери мають значення |
|
||
| «Специфікація не читається як JSON» | Вставте специфікацію у Vega Editor. Він покаже, де зайва або пропущена кома |
|
||
| «Vega-Lite відмовилась малювати» | Специфікація читається, але Vega-Lite не розуміє полів. Текст помилки стоїть у самій підказці |
|
||
| У вкладці **Preview** на GitHub замість графіка значок битої картинки | Так і має бути. GitHub малює тільки текст. Графік з'являється тільки на самому сайті |
|
||
| На місці графіка порожньо | Адреса має закінчуватись на `.json` або вести на `public.tableau.com`. Інші адреси лишаються звичайними картинками |
|
||
| Два графіки стали один під одним | Між їхніми рядками є порожній рядок. Приберіть його |
|
||
| Дашборд обрізаний | Виберіть **Size → Automatic** у Tableau або допишіть `"wide 1150"` після адреси |
|
||
| Робота не з'явилась | Перевірте, що файл лежить у папці `_works` і має `.md` на кінці |
|
||
| Роботи стоять не в тому порядку | Роботи йдуть за іменем файлу. Перейменуйте: `01-`, `02-`, `03-` |
|
||
| Сайт не оновився | Зачекайте хвилину й оновіть сторінку через `Ctrl`/`Cmd` + `Shift` + `R` |
|
||
|
||
### Спитайте ШІ
|
||
|
||
Скопіюйте текст нижче в ChatGPT, Claude або Gemini. Текст описує,
|
||
як влаштований сайт, тому модель відповідатиме по суті. Свою
|
||
проблему допишіть у кінці.
|
||
|
||
```text
|
||
Допоможи розібратися з моїм сайтом-портфоліо. Відповідай українською,
|
||
покроково, і пам'ятай: я працюю тільки через сайт github.com у
|
||
браузері — через github.com і редактор github.dev, без командного
|
||
рядка і без програм на комп'ютері.
|
||
|
||
Як влаштований сайт:
|
||
- Це GitHub Pages з Jekyll. Репозиторій публічний, гілка main, папка
|
||
публікації — корінь.
|
||
- Налаштування сайту в _config.yml: title, role, tagline, footer і
|
||
список сторінок nav (у кожної name і file).
|
||
- Головна сторінка — index.md, вона показує всі роботи одразу.
|
||
Розмітка одна: _layouts/default.html.
|
||
- Кожна робота портфоліо — окремий файл у папці _works/. У його шапці
|
||
між --- стоїть title і необов'язкові wide та example. Полів для
|
||
графіків у шапці немає.
|
||
- Текст роботи під шапкою — звичайний Markdown. Графік стоїть просто
|
||
в тексті одним рядком:
|
||
 — специфікація Vega-Lite з папки specs/;
|
||
 — графік Tableau Public;
|
||
блок ```vega-lite з JSON усередині — специфікація прямо в тексті.
|
||
Два таких рядки без порожнього рядка між ними стають парою графіків
|
||
в один ряд. У лапках після адреси можна дописати wide і число
|
||
(висота рамки Tableau).
|
||
- Файл assets/embed.js знаходить ці рядки вже в браузері й замінює їх
|
||
на графіки. Бібліотеки Vega-Lite він вантажить сам.
|
||
- Кожна робота на сторінці — це <details class="work">, тобто її можна
|
||
згорнути. Розгорнуті за замовчуванням.
|
||
- Оформлення в assets/style.css, вбудовування графіків — у
|
||
assets/embed.js. Ці два файли я не змінюю.
|
||
- Сторінка сама збирає список робіт і бічну панель.
|
||
|
||
Що мені треба:
|
||
[опишіть, що ви робили, що очікували побачити і що побачили насправді]
|
||
|
||
Текст помилки з вкладки Actions, якщо він є:
|
||
[вставте сюди]
|
||
```
|
||
|
||
Якщо модель радить поставити Ruby, Jekyll чи Node або запустити щось
|
||
у терміналі, скажіть їй, що ви працюєте тільки в браузері на
|
||
github.com. Попросіть інший шлях.
|
||
|
||
---
|
||
|
||
## Що в папці
|
||
|
||
| Файл або папка | Навіщо |
|
||
|---|---|
|
||
| `_config.yml` | ім'я, підпис, список сторінок |
|
||
| `_works/` | ваші роботи, по одному файлу на кожну |
|
||
| `specs/` | файли специфікацій Vega-Lite |
|
||
| `index.md` | сторінка з роботами. Її бачать першою |
|
||
| `_layouts/default.html` | спільна розмітка сторінок. Правити не треба |
|
||
| `assets/style.css` | оформлення. Кольори — у змінних на початку файлу |
|
||
| `assets/embed.js` | вбудовує графіки. Правити не треба |
|