Quarto presentations

serving dissemination, learning, onboarding purposes at Ontotext

Nataliya Keberle, data engineer, SOL team

2023-09-18

1 Outline

• What is Quarto, RevealJs
• Overall process
• Highlighting code samples
• Tables
• Lists
• Links
• Images
• Acknowledgements section

2 What is Quarto and RevealJs?

an open-source scientific and technical publishing system

• Author using Jupyter notebooks or with plain text markdown in your favorite editor
• Write using Pandoc markdown, including equations, citations, crossrefs, figure panels, callouts, advanced layout, and more
• Create dynamic content with Python, R, Julia, and Observable.

a HTML presentation framework

• animated slides, LaTex support, speaker notes, etc.

3 Overall process

1. Create .qmd file, use Github Markdown + Quarto markdown.
2. use make to generate .html file = ready to view presentation
3. Open .html file in a browser and enjoy

4 Highlighting code samples

4.1 Use triple backticks

Use markdown style: ```…``` or ```language…```.

SPARQL/TTL/PIE code will be in Ontotext-specific highlighting style:

select *
where {
    ?s ff-map:mentionsEntity ?entity.
    ?entity a dbo:Place

    service <http://factforge.net/repositories/ff-news>
    { ?entity rdfs:label ?label }
}

General purpose programing code blocks are also highlighted:

# Store input numbers
num1 = input('Enter first number: ')
num2 = input('Enter second number: ')

# Add two numbers
sum = float(num1) + float(num2)

# Display the sum
print('The sum of {0} and {1} is {2}'.format(num1, num2, sum))

4.2 Code in Turtle/TTL

gr:Grant                    puml:stereotype "(G,lightyellow)" .
gr:Researcher               puml:stereotype "(R,lightgreen)" .
gr:Funder                   puml:stereotype "(F,lightgreen)" .
<funder/(ADMINISTERING_IC)> puml:stereotype "(A,lightgreen)" .
gr:Grantee                  puml:stereotype "(G,lightgreen)" .
gr:GranteeDepartment        puml:stereotype "(D,lightgreen)" .
gr:Funding                  puml:stereotype "($,yellow)" .
gr:Address                  puml:stereotype "(A,lightgreen)" .
gr:Project                  puml:stereotype "(P,violet)" .
gr:ProjectYear              puml:stereotype "(Y,violet)" .
gr:SubProject               puml:stereotype "(S,violet)" .
skos:Concept                puml:stereotype "(C,lightblue)" .
skos:ConceptScheme          puml:stereotype "(S,lightblue)" .
gr:project                  puml:arrow puml:up.
gr:projectYear              puml:arrow puml:up.
gr:subProject               puml:arrow puml:up.
gr:activityType             puml:arrow puml:down-4.
gr:applicationType          puml:arrow puml:down-4.
gr:fundingMechanism         puml:arrow puml:down-4.
gr:spendingCategory         puml:arrow puml:down-4.
gr:studySection             puml:arrow puml:down-4.
owl:sameAs                  puml:arrow puml:left-dashed-none.
<project/(CORE_PROJECT_NUM)/subProject/(SUBPROJECT_ID)> puml:left <project/(CORE_PROJECT_NUM)/projectYear/(FULL_PROJECT_NUM)>.
gr:outcomeClinicalTrial   a puml:InlineProperty.
gr:outcomePatent          a puml:InlineProperty.
gr:outcomePublication     a puml:InlineProperty.
rdfs:seeAlso              a puml:InlineProperty.

• and then - some text/list item

Code blocks can be 25 lines of 110 chars

4.3 Code in SPARQL

prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
prefix tloimarine: <http://www.ics.forth.gr/isl/ontology/iMarineTLO/>
prefix tloCore: <http://www.ics.forth.gr/isl/ontology/MarineTLO/>
SELECT ?waterarea ?area_id ?subarea ?subarea_id ?division ?division_id ?subdivision ?subdivision_id ?subarea_id
WHERE {
 ?waterarea rdf:type tloCore:BC15_Water_Area .
 ?waterarea tloCore:LC1_is_identified_by ?x.
 ?x tloimarine:assignedCode ?area_id .
  OPTIONAL {
    ?waterarea tloCore:LC27_has_section ?subarea .
    ?subarea tloCore:LC1_is_identified_by ?y.
    ?y tloimarine:assignedCode ?subarea_id .
  }
  OPTIONAL {
    ?subarea tloCore:LC27_has_section ?division .
    ?division tloCore:LC1_is_identified_by ?z.
    ?z tloimarine:assignedCode ?division_id .
  }
  OPTIONAL {
    ?division tloCore:LC27_has_section ?subdivision .
    ?subdivision tloCore:LC1_is_identified_by ?w.
    ?w tloimarine:assignedCode ?subdivision_id .
  }
FILTER (bound(?subarea_id) || bound(?division_id))
FILTER (bound(?subdivision_id)) 
}

• this code block has 26 lines, so a scrollbar appears at the right side

4.4 Code blocks can be with triple apostrophes, as in Lucene GraphDB connector example, but

Don’t use ``` sparql…```, instead, mark code block with ```…```. Ontotext code highlighter “moves” opening curly bracket to the very bottom.

PREFIX luc: <http://www.ontotext.com/connectors/lucene#>
PREFIX luc-index: <http://www.ontotext.com/connectors/lucene/instance#>

INSERT DATA {
    luc-index:my_index luc:createConnector '''
    { <---this bracket 
  "types": [
    "http://www.ontotext.com/example/wine#Wine"
  ],
  "fields": [
    {
      "fieldName": "grape",
      "propertyChain": [
        "http://www.ontotext.com/example/wine#madeFromGrape",
        "http://www.w3.org/2000/01/rdf-schema#label"
      ]
    },
    {
      "fieldName": "sugar",
      "propertyChain": [
        "http://www.ontotext.com/example/wine#hasSugar"
      ],
      "analyzed": false,
      "multivalued": false
    },
    {
      "fieldName": "year",
      "propertyChain": [
        "http://www.ontotext.com/example/wine#hasYear"
      ],
      "analyzed": false
    }
  ]
}''' .
}

5 Tables

5.1 Table styles

Tables can be markdown-style and quarto-style.

• Markdown
• Quarto-style

| Default | Left | Right | Center |
|---------|:-----|------:|:------:|
| 12      | 12   |    12 |   12   |
| 123     | 123  |   123 |  123   |
| 1       | 1    |     1 |   1    |

results in

Default	Left	Right	Center
12	12	12	12
123	123	123	123
1	1	1	1

Such code

::::{.columns}
::: {.column width="30%"}
<div class="right-centered-text">![](../../resources/quarto.png)</div>
:::
::: {.column width="70%"}
More text goes here...
:::
::::

results in

More text goes here…

5.2 Quarto columns

By default, text in Quarto is left-oriented, but with custom CSS it is possible to change orientation of text

::::{.columns}
::: {.column width="50%"}
<div class="centered-text">
![](./img/big-picture.png){width=60%}</div>
:::
::: {.column width="50%"}
<div class="right-centered-text">
By default, text in Quarto is left-oriented, but with custom CSS it is possible to change orientation of text
</div>

Important: Ctrl + Left mouse button click enlarges a picture / returns to a regular view.

5.3 Quarto columns with images inside

• Current solution is: adjust the column widths to see the whole picture without any scale. E.g., these image and text are perfectly seen with column widths 30/70, whereas column widths 50/50 will require adding {width=70%} (or other) to ![](./img/big-picture.png)

::::{.columns}
::: {.column width="30%"}
<div class="centered-text">
![](./img/big-picture.png)</div>
:::
::: {.column width="70%"}
text goes here
:::
::::

5.4 Rendering large tables

• use {.scrollable .smaller} in a slide title markdown or
• use scrollable: true smaller: true in _metadata.yml
  • the minus is that the header of the table is scrollable as well, so when we see last rows of the table, we don’t see the table header.

Table
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

6 Various features

6.1 Quarto side notes

• When you have a main text and a side note, e.g. reference to a paper/project/etc., you can use Quarto-specific markdown. Side notes and footnotes do not have any numbering scheme.

::: aside
[Side note: reference to a paper](http://ebooks.iospress.nl/doi/10.3233/SSW200034)
:::

Side note: reference to a paper

6.2 Quarto/markdown footnotes

• Also it is possible to have a footnote in a traditional markdown. Here is a footnote reference [^1] ¹ and another [^longnote]²

[^1]: Here is the footnote.

[^longnote]: Here's one with multiple blocks.
    Subsequent paragraphs are indented to show that they belong to the previous footnote.

This will result in:

1. Here is the footnote.

2. Here’s one with multiple blocks. Subsequent paragraphs are indented to show that they belong to the previous footnote.

6.3 Bare links

• In Pandoc:
  • md_extension: +autolink_bare_uris
• In Quarto:
  • bare link is clickable: https://www.wikidata.org/wiki/Q1
  • link in the GitHub Markdown style [text](url) is clickable
  • link surrounded with < > is clickable: https://www.wikidata.org/wiki/Q1

7 Spatious texts

7.1 Very long lists (25 rows)

Use {.smaller} in a slide title markdown

## Very long lists (25 rows) {.smaller}

Or in _metadata.yml write

format:
  reveals:
    scrollable: true
    smaller: true
  ...

1. Far far away,
2. behind the word mountains,
3. far from the countries Vokalia and Consonantia,
4. there live the blind texts
5. Separated they live
6. in Bookmarksgrove right at the coast of the Semantics,
7. a large language ocean.
8. A small river named Duden
9. flows by their place
10. and supplies it with the necessary regelialia.
11. It is a paradisematic country,
12. in which roasted parts of sentences
13. fly into your mouth.
14. Even the all-powerful Pointing
15. has no control about the blind texts
16. it is an almost unorthographic life.
17. One day however
18. a small line of blind text
19. by the name of Lorem Ipsum
20. decided to leave for the far World of Grammar.
21. The Big Oxmox
22. advised her not to do so,
23. because there were thousands of bad Commas,
24. wild Question Marks
25. and devious Semikoli
26. but the Little Blind Text didn’t listen.

7.2 Big picture

This image is set without ![](img/timeline.png){height=650px}.

7.3 Acknowledgements

To mention relevant parties in this section, use markdown table and adjust widths of images.

• Alternative 1
• Alternative 2

Developed by		Ontotext AD
Funded by		Horizon Europe Project ACCORD(101056973)
Powered by		Ontotext GraphDB
		Ontotext Platform Semantic Objects
Data from		buildingSMART Data Dictionary