Interakcije

Istražite 17 interaktivnih grafova. Odaberite pitanje, promijenite jednu postavku i promatrajte rezultat.

inventar = FileAttachment("data/widgets.json").json()
import {question, topic, preview} from "./widgets/gallery.js"

viewof filtar = Inputs.select(["Svi dijelovi", ...new Set(inventar.widgets.map(x => topic(x.id)))], {
  label: "Dio knjige", value: "Svi dijelovi"
})

{
  const svi = inventar.widgets;
  const w = svi.filter(x => filtar === "Svi dijelovi" || topic(x.id) === filtar);

  const kartica = (x) => {
    const chapter = x.poglavlje.replace(/\.qmd$/, ".html");
    return htl.html`<article class="hub-card interaction-card">
      <a class="interaction-preview" href="${chapter}#interakcija-${x.id}"
         aria-label="Isprobaj: ${x.naziv}" tabindex="-1">${preview(x.id)}</a>
      <span class="hub-num">Poglavlje ${x.id.slice(1)} · ${x.naslovPoglavlja}</span>
      <h2 class="hub-name">${x.naziv}</h2>
      <p class="interaction-question">${question(x.id)}</p>
      <div class="interaction-actions">
        <a class="btn-knjiga primarni" href="${chapter}#interakcija-${x.id}"
           aria-label="Isprobaj: ${x.naziv}">Isprobaj →</a>
        <a class="interaction-chapter" href="${chapter}"
           aria-label="Pročitaj poglavlje: ${x.naslovPoglavlja}">Pročitaj poglavlje</a>
      </div>
    </article>`;
  };

  return htl.html`<div><p class="interaction-count" role="status">Prikazano: ${w.length} od ${svi.length} interakcija</p><div class="hub-grid interaction-gallery">${w.map(kartica)}</div></div>`;
}

Kako su grafovi napravljeni

Mali prikazi na karticama shematski su putokazi, a ne rezultati analiza. Svako poglavlje od 1. do 17. ima jedan interaktivni graf; ovdje su svi na jednom mjestu za samostalno istraživanje, predavanje ili ponavljanje.

Grafovi se izvršavaju u pregledniku, u Observableu, i ne traže ni instalaciju ni račun. Svaki ima statičkog blizanca koji se ispisuje u tiskanom izdanju, pa knjiga na papiru pokazuje isti sadržaj bez interakcije. Dio I namjerno nema vidljivoga koda. U poglavljima Dijela II kratki se račun može otvoriti u odjeljku Razrađeni primjer, dok pogonski kod samoga widgeta u knjižnom izdanju ostaje skriven.

Na predavanju je dovoljno otvoriti interakciju i mijenjati jednu postavku odjednom. Gumb za vraćanje početnih vrijednosti omogućuje da svaki novi pokus počne iz istoga stanja.