Stránka s grafom
Grafové zobrazenie údajov pomáha používateľom lepšie pochopiť prezentované údaje. Vždy poskytnite prezentované údaje tak, aby boli prístupné aj používateľom so zrakovým znevýhodnením.
Grafový vzor použite, keď chcete používateľom zobrazovať nejaký jav v závislosti na ďalšej premennej - napríklad vývoj javu v čase (napr. vývoj počtu nakazených COVID-19 na Slovensku)
Prezentácia údajov prostredníctvom grafu zobrazuje jav v súvislostiach a dotvára komplexnejší obraz o danej skutočnosti, než jednotlivé údaje izolovane.
Z čoho sa skladá graf?
Graf sa skladá z:
- nadpisu,
- prepínačov pre výber zobrazenia javu v grafe,
- priestoru pre popis,
- tlačidiel zobrazenia údajov z rôznych pohľadov, zobrazenia údajov prostredníctvom tabuľky, podrobného popisu metodiky,
- grafového okna s interaktívnym grafom repsektíve tabuľkového zobrazenia údajov,
- vysvetliviek,
- linku pre stiahnutie zdrojových údajov,
- linku pre zdieľanie grafu (voliteľné),
- označenia zdroja údajov.
Pozitívne testovaní
Contents
Lorem ipsum ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.
Loipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.
Loipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.
<div data-module="idsk-graph" class="idsk-graph" id="graph1">
<div class="govuk-grid-row idsk-graph__heading">
<div class="idsk-graph__title">
<h2 class="govuk-heading-m" data-lines="Kliknite na odkaz vyššie alebo ho skopírujte a vložte do prehliadača: ">Pozitívne testovaní</h2>
</div>
<div class="idsk-graph__controls">
<div class="govuk-form-group">
<div class="govuk-radios govuk-radios--inline">
<div class="govuk-radios__item">
<input class="govuk-radios__input idsk-graph__radio" name="radio-graph1" id="radio-graph1-1" type="radio" value="pcr" checked="">
<label class="govuk-label govuk-radios__label" for="radio-graph1-1">PCR</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input idsk-graph__radio" name="radio-graph1" id="radio-graph1-2" type="radio" value="antigen" >
<label class="govuk-label govuk-radios__label" for="radio-graph1-2">Antigén</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input idsk-graph__radio" name="radio-graph1" id="radio-graph1-3" type="radio" value="pcr-antigen" >
<label class="govuk-label govuk-radios__label" for="radio-graph1-3">PCR + Antigén</label>
</div>
</div>
</div>
</div>
</div>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<div class="govuk-body-s idsk-graph__summary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.
</div>
</div>
</div>
<div class="govuk-tabs" data-activetab="0" data-module="govuk-tabs">
<h2 class="govuk-tabs__title">
Contents
</h2>
<ul class="govuk-tabs__list">
<li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
<a class="govuk-tabs__tab" href="#graph1-1">
Denné prírastky
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#graph1-2">
Celkovo
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#graph1-3">
Údaje
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#graph1-4">
Metodika
</a>
</li>
</ul>
<div class="govuk-tabs__panel" id="graph1-1">
<iframe class='idsk-graph__iframe' data-src='/vzory/graph-sample' src='/vzory/graph-sample' title='Lorem Ipsun title'></iframe>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph1-2">
<iframe class='idsk-graph__iframe' data-src='/vzory/graph-sample?time=sum' src='/vzory/graph-sample?time=sum' title='Lorem Ipsun 2 title'></iframe>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph1-3">
<iframe class='idsk-graph__iframe' data-src='/vzory/interactive-table-sample-2' src='/vzory/interactive-table-sample-2' title='Lorem Ipsun 3 title'></iframe>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph1-4">
<p class='govuk-body'>Lorem ipsum ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.</p><p class='govuk-body'>Loipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.</p><p class='govuk-body'>Loipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.</p>
</div>
</div>
<div class="idsk-graph__meta">
<div class="idsk-graph__meta-download-share">
<div class="idsk-graph__meta-download">
<a class="govuk-link idsk-graph__meta-link-list" title="Stiahnuť údaje" href="#">
Stiahnuť údaje
<svg width="18" height="11" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.0725 1.07107L9.00146 8.14214L1.9304 1.07107" stroke="#0B0C0C" stroke-width="3"/>
</svg>
</a>
<ul class="idsk-graph__meta-list">
<li>
<a title="ako CSV" href="https://raw.githubusercontent.com/Institut-Zdravotnych-Analyz/covid19-data/main/DailyStats/OpenData_Slovakia_Covid_DailyStats.csv" class="govuk-link" download>ako CSV</a>
</li>
<li>
<a title="ako XLSX" href="https://github.com/Institut-Zdravotnych-Analyz/covid19-data/blob/main/DailyStats/OpenData_Slovakia_Covid_DailyStats.xlsx?raw=true" class="govuk-link" download>ako XLSX</a>
</li>
</ul>
</div>
<div class="idsk-graph__meta-share">
<a class="govuk-link idsk-graph__meta-link-list" title="Zdielať údaje" href="#">
Zdielať údaje
<svg width="18" height="11" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.0725 1.07107L9.00146 8.14214L1.9304 1.07107" stroke="#0B0C0C" stroke-width="3"/>
</svg>
</a>
<ul class="idsk-graph__meta-list">
<li>
<a title="Kopírovať link" href="/komponenty/grafovy-komponent#graph2" class="govuk-link idsk-graph__copy-to-clickboard" >Kopírovať link</a>
</li>
<li>
<a title="Emailom" href="#graph2" class="govuk-link idsk-graph__send-link-by-email" >Emailom</a>
</li>
<li>
<a title="na Facebooku" href="#graph2" class="govuk-link idsk-graph__share-on-facebook" target="_blank">na Facebooku</a>
</li>
</ul>
</div>
</div>
<div class="idsk-graph__meta-source">
Zdroj: NCZI
</div>
</div>
</div>
Ako funguje graf?
Prepínače
Môžete použiť prepínače na prepínanie súvisiacich javov - napríklad PCR testy, antigénové testy a podobne. Ak javy spolu nesúvisia, vytvorte pre ne samostatné grafy.
Popis
Do popisu uvádzajte čo graf zobrazuje - aký jav a podľa čoho sa zobrazuje - napríklad počet nakazených COVID-19 na Slovensku podľa dátumu. Ak si to údaje vyžadujú, pridajte do popisu aj doplňujúce informácie.
Tlačidlá
Nad grafovým oknom sú textové tlačidlá.
Pohľady na údaje
Ak budete zobrazovať napríklad počet nakazených COVID-19 na Slovensku podľa dátumu je dobré ponúknuť používateľovi možnosť vidieť denné prírastky a taktiež ich kumulatívny počet, ktorý zobrazuje celkový stav.
Zobrazenie údajov v tabuľkovej forme
Ďalším tlačidlom je zobrazenie údajov prostredníctvom tabuľkového zobrazenie údajov. Namiesto grafu sa zobrazia údaje v tabuľkové forme, z ktorých je vytvorený graf. Údaje v tabuľke je možné zoraďovať.
Metodika
Po kliknutí sa zobrazí podrobná metodika - napríklad zberu údajov. Tu je priestor na popísanie ako sa údaje zbierajú, pre popis úzkych miest - kde môžu vznikať diskrepancie a oneskorenia a ako sú ošetrené a podobne.
Vysvetlivky
Po kliknutí na graf sa používateľovi zobrazia údaje v danom bode s popisom. Pod grafovým oknom sa umiestnite vysvetlivky.
Zdieľanie grafu
Pod grafovým oknom môžete pridať aj link pre jednoduché zdieľanie vášho grafu na rôznyhc platformách.
Zdrojové údaje a zdroj údajov
Vždy pridajte ku grafu aj zdrojové údaje. Použite štandardné, strojovo spracovateľné údajové formáty ako napríklad csv, JSON, XML. Môžete dať používateľom na výber z viacerých formátov.
Uvádzajte, kto alebo čo je zdrojom údajov, ktoré prezentujete.