oleh/dataviz-portfolio-template
1
0
Fork 0
mirror of https://github.com/olehomelchenko/dataviz-portfolio-template.git synced 2026-09-24 23:41:46 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
dataviz-portfolio-template/README.md
T

20 KiB
Raw Permalink Blame History

Портфоліо · шаблон

Сайт для ваших робіт із курсу «Візуалізація даних». Читач відкриває посилання і бачить роботи одразу.

Сайт вбудовує графіки й дашборди з 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.
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.
---
title: "Назва роботи"
---

**Питання:** на яке питання відповідає графік.

![Підпис під графіком](https://public.tableau.com/app/profile/ваш.профіль/viz/Книга/Аркуш)

**Рішення:** що ви вирішили і чому.

**Що видно:** що з цього побачив читач.

Роботи стоять на сторінці за іменем файлу, за абеткою. Ставте число попереду: 01-, 02-, 03-. Пункт у бічній панелі з'являється сам.

Найсильнішу роботу ставте першою: її побачать усі.

Три способи поставити графік

Кожен спосіб — один рядок у тексті роботи.

Графік із Tableau Public

Скопіюйте адресу з адресного рядка і поставте її в текст:

![Підпис під графіком](https://public.tableau.com/app/profile/ваш.профіль/viz/Книга/Аркуш)

Специфікація в тексті роботи

Файл завантажувати не треба. Вставте специфікацію між двома рядками з трьох зворотних апострофів. На першому рядку допишіть vega-lite:

```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. Поставте в текст роботи рядок:

    ![Підпис під графіком](specs/my-chart.json)

Текст у квадратних дужках стає підписом під графіком. Якщо підпис не потрібен, лишіть дужки порожніми: ![](specs/my-chart.json).

Поставте кілька графіків в одній роботі

Кожен графік стоїть у тексті на своєму місці. Кількість не обмежена.

Два графіки стають в один ряд, коли їхні рядки йдуть підряд, без порожнього рядка між ними:

![Ліворуч](specs/chart-a.json)
![Праворуч](specs/chart-b.json)

Ряд ставте тоді, коли читач має порівняти два графіки. Порожній рядок між ними дає два окремі графіки, один під одним. На вузькому екрані ряд теж розпадається на два графіки один під одним.

Усі чотири записи стоять поруч у роботі-прикладі _works/02-embedding.md. Заготовка для власної роботи — _works/01-template.md.

Ширина і висота

Графік займає ширину колонки тексту.

Специфікація без поля width підлаштовується під колонку. Якщо поле width є, графік лишається такої ширини. Якщо графік ширший за колонку, з'являється горизонтальна прокрутка.

Дашборд Tableau ширший і вищий за колонку. Допишіть у лапках після адреси слово wide і висоту в пікселях:

![Дашборд продажів](https://public.tableau.com/…/viz/Книга/Дашборд "wide 1150")

Слово 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. Сторінку видно через хвилину після коміту.

Поля в шапці роботи

Шапка стоїть між двома рядками з трьох дефісів, на початку файлу.

Поле Навіщо
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. Вставте текст:

    ---
heading: "Про мене"
---

Аналітик у ритейлі. Тут коротко про досвід і контакти.

  3. Натисніть Commit changes.

  4. Відкрийте _config.yml і допишіть сторінку в список nav:

    nav:
  - name: "Про мене"
    file: "about.html"

  5. Натисніть Commit changes.

Графік на такій сторінці ставте тим самим рядком, що й у роботі:

![Підпис під графіком](specs/my-chart.json)

У полі 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. Текст описує, як влаштований сайт, тому модель відповідатиме по суті. Свою проблему допишіть у кінці.

Допоможи розібратися з моїм сайтом-портфоліо. Відповідай українською,
покроково, і пам'ятай: я працюю тільки через сайт 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. Графік стоїть просто
  в тексті одним рядком:
  ![Підпис](specs/файл.json) — специфікація Vega-Lite з папки specs/;
  ![Підпис](https://public.tableau.com/…) — графік 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 вбудовує графіки. Правити не треба
Reference in New Issue View Git Blame Copy Permalink