mirror of
https://github.com/olehomelchenko/dataviz-portfolio-template.git
synced 2026-09-24 23:41:46 +00:00
Шаблон портфоліо для курсу «Візуалізація даних»
This commit is contained in:
+380
@@ -0,0 +1,380 @@
|
||||
/* Вбудовує графіки у сторінку.
|
||||
*
|
||||
* Цей файл правити не треба. Графік ставиться в тексті роботи одним
|
||||
* рядком, там, де він потрібен:
|
||||
*
|
||||
*  — специфікація Vega-Lite
|
||||
*  — графік Tableau Public
|
||||
* ```vega-lite … ``` — специфікація просто в тексті
|
||||
*
|
||||
* Два таких рядки поруч, без порожнього рядка між ними, стають парою
|
||||
* графіків в один ряд. У дужках після адреси можна дописати wide
|
||||
* (на всю ширину) і число (висота рамки Tableau).
|
||||
*
|
||||
* Блок із помилкою показує підказку і не ламає решту сторінки.
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
/* Бібліотеки Vega-Lite. Вантажаться, лише коли на сторінці є
|
||||
специфікація: сторінці з самим Tableau вони не потрібні. */
|
||||
var VEGA = [
|
||||
"https://cdn.jsdelivr.net/npm/vega@5",
|
||||
"https://cdn.jsdelivr.net/npm/vega-lite@5",
|
||||
"https://cdn.jsdelivr.net/npm/vega-embed@6"
|
||||
];
|
||||
|
||||
function box(el, kind, title, hint) {
|
||||
var d = document.createElement("div");
|
||||
d.className = "viz-msg viz-msg--" + kind;
|
||||
d.innerHTML = "<b></b><span></span>";
|
||||
d.querySelector("b").textContent = title;
|
||||
d.querySelector("span").textContent = hint || "";
|
||||
el.replaceChildren(d);
|
||||
}
|
||||
|
||||
/* ── що це за адреса ───────────────────────────────────────────── */
|
||||
|
||||
function isSpec(src) { return /\.json(\?|#|$)/i.test(src || ""); }
|
||||
function isTableau(src) { return /public\.tableau\.com/i.test(src || ""); }
|
||||
function isChart(src) { return isSpec(src) || isTableau(src); }
|
||||
|
||||
/* ── Tableau Public ────────────────────────────────────────────── */
|
||||
|
||||
/* Адреса графіка Tableau Public → адреса, яку можна вбудувати.
|
||||
Приймає і те, що видно в адресному рядку, і готову адресу /views/. */
|
||||
function tableauEmbedUrl(raw) {
|
||||
var url = String(raw).trim().split("?")[0];
|
||||
var m = url.match(/[#!/]*\/(?:viz|views|vizhome)\/([^/]+)\/([^/?#]+)/);
|
||||
if (!m) return null;
|
||||
|
||||
/* tabs=no обов'язковий: без нього рамка показує всі аркуші книги,
|
||||
разом із чернетками, і будь-хто може в них клацнути. */
|
||||
return "https://public.tableau.com/views/" + m[1] + "/" + m[2] +
|
||||
"?:showVizHome=no&:embed=y&:tabs=no&:display_count=no&:toolbar=no";
|
||||
}
|
||||
|
||||
function mountTableau(el) {
|
||||
var raw = el.getAttribute("data-tableau");
|
||||
var src = tableauEmbedUrl(raw);
|
||||
|
||||
if (!src) {
|
||||
box(el, "warn", "Не вдалося прочитати адресу Tableau",
|
||||
"Має бути адреса вигляду " +
|
||||
"public.tableau.com/app/profile/…/viz/Книга/Аркуш. " +
|
||||
"Відкрийте графік на Tableau Public і скопіюйте адресу з адресного рядка.");
|
||||
return;
|
||||
}
|
||||
|
||||
var frame = document.createElement("iframe");
|
||||
frame.className = "viz-frame";
|
||||
frame.src = src;
|
||||
frame.loading = "lazy";
|
||||
frame.title = "Графік Tableau Public";
|
||||
frame.setAttribute("allowfullscreen", "");
|
||||
frame.style.height = (el.getAttribute("data-height") || 620) + "px";
|
||||
|
||||
/* Пряме посилання під рамкою. Усередині рамки Tableau малює власну
|
||||
сторінку помилки, якої ми звідси не бачимо. Посилання дає читачеві
|
||||
шлях до графіка, а автору показує, чи жива адреса. */
|
||||
var link = document.createElement("p");
|
||||
link.className = "viz-link";
|
||||
var a = document.createElement("a");
|
||||
a.href = String(raw).trim();
|
||||
a.target = "_blank";
|
||||
a.rel = "noopener";
|
||||
a.textContent = "Відкрити на Tableau Public";
|
||||
link.appendChild(a);
|
||||
|
||||
el.replaceChildren(frame, link);
|
||||
}
|
||||
|
||||
/* ── Vega-Lite ─────────────────────────────────────────────────── */
|
||||
|
||||
var vegaReady = null;
|
||||
|
||||
function loadScript(src) {
|
||||
return new Promise(function (ok, fail) {
|
||||
var s = document.createElement("script");
|
||||
s.src = src;
|
||||
s.async = false;
|
||||
s.onload = ok;
|
||||
s.onerror = function () { fail(new Error("cdn: " + src)); };
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
}
|
||||
|
||||
function ensureVega() {
|
||||
if (typeof window.vegaEmbed === "function") return Promise.resolve();
|
||||
if (!vegaReady) {
|
||||
vegaReady = VEGA.reduce(function (chain, src) {
|
||||
return chain.then(function () { return loadScript(src); });
|
||||
}, Promise.resolve());
|
||||
}
|
||||
return vegaReady;
|
||||
}
|
||||
|
||||
/* Специфікація без width займає всю ширину колонки, тому та сама
|
||||
робота читається і на телефоні. Для facet, concat і repeat так
|
||||
не можна: там ширину рахує сама Vega-Lite. */
|
||||
function fitToColumn(spec) {
|
||||
if (!spec || typeof spec !== "object") return spec;
|
||||
if ("width" in spec) return spec;
|
||||
if (spec.facet || spec.hconcat || spec.vconcat || spec.concat || spec.repeat) return spec;
|
||||
spec.width = "container";
|
||||
return spec;
|
||||
}
|
||||
|
||||
function specSource(el) {
|
||||
if (el.inlineSpec) return Promise.resolve(el.inlineSpec);
|
||||
|
||||
var path = el.getAttribute("data-spec");
|
||||
return fetch(path).then(function (r) {
|
||||
if (!r.ok) throw new Error("404");
|
||||
return r.json();
|
||||
});
|
||||
}
|
||||
|
||||
function mountSpec(el) {
|
||||
var path = el.getAttribute("data-spec") || "специфікація в тексті роботи";
|
||||
|
||||
ensureVega()
|
||||
.then(function () { return specSource(el); })
|
||||
.then(function (spec) {
|
||||
return window.vegaEmbed(el, fitToColumn(spec), { actions: false, renderer: "svg" });
|
||||
})
|
||||
.then(function (res) { el.vegaView = res && res.view; })
|
||||
.catch(function (err) {
|
||||
var msg = String((err && err.message) || err);
|
||||
|
||||
if (/^cdn:/.test(msg)) {
|
||||
box(el, "warn", "Бібліотека Vega-Lite не завантажилась",
|
||||
"Перевірте інтернет і оновіть сторінку.");
|
||||
return;
|
||||
}
|
||||
var hint;
|
||||
if (/404|fetch|load|network/i.test(msg)) {
|
||||
hint = "Файл " + path + " не знайдено. Перевірте, що він лежить у теці " +
|
||||
"specs/ і що ім'я збігається. Великі й малі літери мають значення.";
|
||||
} else if (/JSON|token|Unexpected/i.test(msg)) {
|
||||
hint = "Специфікація не читається як JSON. Найчастіша причина — зайва " +
|
||||
"або пропущена кома. Вставте специфікацію у Vega Editor: він " +
|
||||
"покаже, де саме.";
|
||||
} else {
|
||||
hint = "Vega-Lite відмовилась малювати цю специфікацію: " + msg +
|
||||
". Перевірте її у Vega Editor.";
|
||||
}
|
||||
box(el, "warn", "Графік не вдалося показати", hint);
|
||||
});
|
||||
}
|
||||
|
||||
/* ── графіки, поставлені в тексті ──────────────────────────────── */
|
||||
|
||||
function vizFor(src, height) {
|
||||
var el = document.createElement("div");
|
||||
el.className = "viz";
|
||||
if (height) el.setAttribute("data-height", height);
|
||||
if (isTableau(src)) el.setAttribute("data-tableau", src);
|
||||
else el.setAttribute("data-spec", src);
|
||||
return el;
|
||||
}
|
||||
|
||||
function figureFor(node, caption, wide) {
|
||||
var fig = document.createElement("figure");
|
||||
fig.className = "chart" + (wide ? " wide" : "");
|
||||
fig.appendChild(node);
|
||||
if (caption) {
|
||||
var cap = document.createElement("figcaption");
|
||||
cap.textContent = caption;
|
||||
fig.appendChild(cap);
|
||||
}
|
||||
return fig;
|
||||
}
|
||||
|
||||
/* Підпис у лапках після адреси: wide — на всю ширину, число —
|
||||
висота рамки Tableau.  */
|
||||
function readOptions(title) {
|
||||
var o = {};
|
||||
String(title || "").split(/\s+/).forEach(function (word) {
|
||||
if (/^wide$/i.test(word)) o.wide = true;
|
||||
else if (/^\d+$/.test(word)) o.height = word;
|
||||
});
|
||||
return o;
|
||||
}
|
||||
|
||||
function figureForImage(img) {
|
||||
var o = readOptions(img.getAttribute("title"));
|
||||
return figureFor(vizFor(img.getAttribute("src"), o.height), img.getAttribute("alt"), o.wide);
|
||||
}
|
||||
|
||||
function chartImages(node) {
|
||||
return [].slice.call(node.querySelectorAll("img")).filter(function (img) {
|
||||
return isChart(img.getAttribute("src"));
|
||||
});
|
||||
}
|
||||
|
||||
function upgradeImages(root) {
|
||||
/* Спочатку абзаци, у яких стоять самі графіки. Два графіки в
|
||||
одному абзаці — це рядок із двох: так їх ставлять поруч. */
|
||||
[].slice.call(root.querySelectorAll("p")).forEach(function (p) {
|
||||
var imgs = chartImages(p);
|
||||
if (!imgs.length) return;
|
||||
|
||||
var alone = imgs.length === p.children.length && p.textContent.trim() === "";
|
||||
var figs = imgs.map(figureForImage);
|
||||
|
||||
if (!alone) {
|
||||
imgs.forEach(function (img, i) { img.replaceWith(figs[i]); });
|
||||
return;
|
||||
}
|
||||
if (figs.length === 1) {
|
||||
p.replaceWith(figs[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
var row = document.createElement("div");
|
||||
row.className = "chart-row";
|
||||
figs.forEach(function (f) { row.appendChild(f); });
|
||||
p.replaceWith(row);
|
||||
});
|
||||
|
||||
/* Графіки поза абзацом: у списку, у таблиці, у цитаті. */
|
||||
chartImages(root).forEach(function (img) {
|
||||
img.replaceWith(figureForImage(img));
|
||||
});
|
||||
}
|
||||
|
||||
/* Специфікація, написана просто в тексті роботи:
|
||||
```vega-lite … ``` */
|
||||
function upgradeFences(root) {
|
||||
var blocks = [].slice.call(root.querySelectorAll('[class*="language-vega-lite"]'));
|
||||
|
||||
blocks.forEach(function (el) {
|
||||
/* Підсвітка коду загортає код у кілька рівнів. Беремо
|
||||
найзовнішній блок: його ми і замінюємо на графік. */
|
||||
var block = el.closest("div[class*='language-vega-lite']") ||
|
||||
el.closest("pre") || el;
|
||||
if (block.dataset.chartDone) return;
|
||||
block.dataset.chartDone = "1";
|
||||
|
||||
var code = el.matches("code") ? el : (el.querySelector("code") || el);
|
||||
var viz = document.createElement("div");
|
||||
viz.className = "viz";
|
||||
var fig = figureFor(viz, null, false);
|
||||
block.replaceWith(fig);
|
||||
|
||||
try {
|
||||
viz.inlineSpec = JSON.parse(code.textContent);
|
||||
} catch (e) {
|
||||
box(viz, "warn", "Специфікація в тексті не читається як JSON",
|
||||
"Найчастіша причина — зайва або пропущена кома. Вставте її у " +
|
||||
"Vega Editor: він покаже, де саме. Повідомлення браузера: " +
|
||||
String(e.message || e));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ── бічна панель ──────────────────────────────────────────────── */
|
||||
|
||||
/* Підсвічує в бічній панелі ту роботу, яка зараз на екрані. */
|
||||
function followScroll() {
|
||||
var links = document.querySelectorAll(".side-works a");
|
||||
if (!links.length || !("IntersectionObserver" in window)) return;
|
||||
|
||||
var pairs = [];
|
||||
links.forEach(function (a) {
|
||||
var el = document.getElementById(a.getAttribute("href").slice(1));
|
||||
if (el) pairs.push({ a: a, el: el });
|
||||
});
|
||||
|
||||
var seen = new Set();
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) {
|
||||
if (e.isIntersecting) seen.add(e.target); else seen.delete(e.target);
|
||||
});
|
||||
pairs.forEach(function (p) { p.a.classList.remove("here"); });
|
||||
for (var i = 0; i < pairs.length; i++) {
|
||||
if (seen.has(pairs[i].el)) { pairs[i].a.classList.add("here"); break; }
|
||||
}
|
||||
}, { rootMargin: "-20% 0px -70% 0px" });
|
||||
|
||||
pairs.forEach(function (p) { io.observe(p.el); });
|
||||
}
|
||||
|
||||
/* Клік у бічній панелі або адреса з #якорем мають розгортати роботу,
|
||||
навіть якщо читач її згорнув. */
|
||||
function openOnJump() {
|
||||
function openHash() {
|
||||
var id = location.hash.slice(1);
|
||||
if (!id) return;
|
||||
var el = document.getElementById(id);
|
||||
if (el && el.tagName === "DETAILS") el.open = true;
|
||||
}
|
||||
openHash();
|
||||
window.addEventListener("hashchange", openHash);
|
||||
document.querySelectorAll('.side-works a').forEach(function (a) {
|
||||
a.addEventListener("click", function () {
|
||||
var el = document.getElementById(a.getAttribute("href").slice(1));
|
||||
if (el && el.tagName === "DETAILS") el.open = true;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* Одна кнопка: згорнути всі роботи або розгорнути назад. */
|
||||
function foldAll() {
|
||||
var works = document.querySelectorAll("details.work");
|
||||
var side = document.querySelector(".side");
|
||||
if (!works.length || !side) return;
|
||||
|
||||
var btn = document.createElement("button");
|
||||
btn.className = "side-fold";
|
||||
btn.type = "button";
|
||||
side.appendChild(btn);
|
||||
|
||||
function label() {
|
||||
var open = document.querySelectorAll("details.work[open]").length;
|
||||
btn.textContent = open ? "Згорнути всі" : "Розгорнути всі";
|
||||
}
|
||||
|
||||
btn.addEventListener("click", function () {
|
||||
var open = document.querySelectorAll("details.work[open]").length;
|
||||
works.forEach(function (w) { w.open = open === 0; });
|
||||
label();
|
||||
});
|
||||
|
||||
works.forEach(function (w) { w.addEventListener("toggle", label); });
|
||||
label();
|
||||
}
|
||||
|
||||
/* ── старт ─────────────────────────────────────────────────────── */
|
||||
|
||||
function mountAll() {
|
||||
var main = document.querySelector("main") || document.body;
|
||||
|
||||
try {
|
||||
upgradeFences(main);
|
||||
upgradeImages(main);
|
||||
} catch (e) {
|
||||
/* Розпізнавання графіків у тексті не має ламати решту сторінки. */
|
||||
}
|
||||
|
||||
document.querySelectorAll(".viz").forEach(function (el) {
|
||||
try {
|
||||
if (el.hasAttribute("data-tableau")) mountTableau(el);
|
||||
else if (el.inlineSpec || el.hasAttribute("data-spec")) mountSpec(el);
|
||||
} catch (e) {
|
||||
box(el, "warn", "Цей блок не вдалося показати", String(e.message || e));
|
||||
}
|
||||
});
|
||||
|
||||
followScroll();
|
||||
openOnJump();
|
||||
foldAll();
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", mountAll);
|
||||
} else {
|
||||
mountAll();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user