--{{5}}-- But, since tables are treated as data sets that scream for visualization (for more information checkout section [Fun with Tables](#fun-with-tables)), you can use also this feature to visualize your quiz. The following two examples are called "know your competitors" ;-) and they are used only for illustration. Depending on the tabular structure you define and the type of data you provide, LiaScript will try to estimate an appropriate visualization. For input fields, the value of the solution is used for classification. ``` markdown | Brightspace | Canvas | Classroom | Moodle | Others | Schoology | |:--------------:|:---------------:|:--------------:|:---------------:|:--------------:|:--------------:| | [[(3 %)|11 %]] | [[13 %|(28 %)]] | [[8 %|(24 %)]] | [[(11 %)|31 %]] | [[2 %|(12 %)]] | [[7 %|(22 %)]] | --- | LMS | Average cost per month | |-----|--------------------------| | Brightspace | [[13 $|(80 $)]] | | Canvas | [[(10 $)|99 $]] | | Classroom | [[(0 free)|3 $]] | | Moodle | [[11 $ |(15 $)]] | | Schoology | [[(4 $)|12 $]] | ``` --- | Brightspace | Canvas | Classroom | Moodle | Others | Schoology | |:--------------:|:---------------:|:--------------:|:---------------:|:--------------:|:--------------:| | [[(3 %)|11 %]] | [[13 %|(28 %)]] | [[8 %|(24 %)]] | [[(11 %)|31 %]] | [[2 %|(12 %)]] | [[7 %|(22 %)]] | --- | LMS | Average cost per month | |-----|--------------------------| | Brightspace | [[13 $|(80 $)]] | | Canvas | [[(10 $)|99 $]] | | Classroom | [[(0 free)|3 $]] | | Moodle | [[11 $ |(15 $)]] | | Schoology | [[(4 $)|12 $]] |

`__ to group blocks. The LiaScript result will remain the same, but it will be rendered differently on other Markdown interpreters. #### Playback-Inlines --{{0}}-- Like in the presented example, the exclamation will not interfere with the table definition. And as presented before, you can also use inlining for Playback elements, as it was used for animations, by simply using two pairs of braces. Depending on your preferences and the current context, it is also possible to define the stylized play-button with a vertical line or an exclamation mark. Like in the presented example, the exclamation will not interfere with the table definition. ```Markdown | English | German | Russian | Arabic male | Arabic female | | -------------------- |:--------------------------------- |:--------------------------------------- |:------------------------- | --------------------------- | | {!>}{I go} | {!> Deutsch Male}{ich gehe} | {!> Russian Male}{я хожу} | {!> Arabic Male}{أذْهبُ} | | | {!>}{you go} | {!> Deutsch Male}{du gehst} | {!> Russian Male}{ты ходишь} | {!> Arabic Male}{تذْهبُ} | {!> Arabic Female}{تذْهبين} | | {!>}{he/she/it goes} | {!> Deutsch Male}{er/sie/es geht} | {!> Russian Male}{он / она / оно ходит} | {!> Arabic Male}{يذْهبُ} | {!> Arabic Female}{تذْهبُ} | | {!>}{we go} | {!> Deutsch Male}{wir gehen} | {!> Russian Male}{мы ходим} | {!> Arabic Male}{نذْهبُ} | | | {!>}{you go} | {!> Deutsch Male}{ihr geht} | {!> Russian Male}{вы ходите} | {!> Arabic Male}{تذْهبون} | {!> Arabic Female}{تذْهبْن} | | {!>}{they go} | {!> Deutsch Male}{sie gehen} | {!> Russian Male}{они ходят} | {!> Arabic Male}{يذْهبون} | {!> Arabic Female}{يذْهبْن} | ``` --{{1}}-- The result is displayed within the table; all elements can be played on demand. {{1}} | English | German | Russian | Arabic male | Arabic female | | -------------------- |:--------------------------------- |:--------------------------------------- |:------------------------- | --------------------------- | | {!>}{I go} | {!> Deutsch Male}{ich gehe} | {!> Russian Male}{я хожу} | {!> Arabic Male}{أذْهبُ} | | | {!>}{you go} | {!> Deutsch Male}{du gehst} | {!> Russian Male}{ты ходишь} | {!> Arabic Male}{تذْهبُ} | {!> Arabic Female}{تذْهبين} | | {!>}{he/she/it goes} | {!> Deutsch Male}{er/sie/es geht} | {!> Russian Male}{он / она / оно ходит} | {!> Arabic Male}{يذْهبُ} | {!> Arabic Female}{تذْهبُ} | | {!>}{we go} | {!> Deutsch Male}{wir gehen} | {!> Russian Male}{мы ходим} | {!> Arabic Male}{نذْهبُ} | | | {!>}{you go} | {!> Deutsch Male}{ihr geht} | {!> Russian Male}{вы ходите} | {!> Arabic Male}{تذْهبون} | {!> Arabic Female}{تذْهبْن} | | {!>}{they go} | {!> Deutsch Male}{sie gehen} | {!> Russian Male}{они ходят} | {!> Arabic Male}{يذْهبون} | {!> Arabic Female}{يذْهبْن} | #### Hiding Text --{{0}}-- If you only want to show the play buttons but not the text, it is possible to use some HTML tricks. The easiest way is to put your text into an HTML element and to remove it from the screen by using a `span` whose content is shifted off the screen. Simply styling the element with `display: none` will not work, since the TTS function requires the text to be rendered within the DOM, and the translation via Google will not work if the element is not visible. --{{1}}-- But, since it is possible to define custom [Macros](#macros), we can also apply a more elegant way. We define a set of local macros directly within a comment attached to the current heading. The `@play` macro has two parameters, one for the voice and the other for the text; the other macros are simply shortcuts for the voice that pass the text as the second parameter to the `@play` macro. Within the Arabic macro, it is also possible to define the gender of the narrator. {{1}} ``` Markdown #### Hiding Text | go | EN | DE | RU | AR male | AR female | | --------- |:-------------------:|:-------------------:|:-------------------------:|:-----------------:|:-------------------:| | I | @en(I go) | @de(ich gehe) | @ru(я хожу) | @ar(Male,أذْهبُ) | | | you | @en(you go) | @de(du gehst) | @ru(ты ходишь) | @ar(Male,تذْهبُ) | @ar(Female,تذْهبين) | | he/she/it | @en(he/she/it goes) | @de(er/sie/es geht) | @ru(он / она / оно ходит) | @ar(Male,يذْهبُ) | @ar(Female,تذْهبُ) | | we | @en(we go) | @de(wir gehen) | @ru(мы ходим) | @ar(Male,نذْهبُ) | | | you | @en(you go) | @de(ihr geht) | @ru(вы ходите) | @ar(Male,تذْهبون) | @ar(Female,تذْهبْن) | | they | @en(they go) | @de(sie gehen) | @ru(они ходят) | @ar(Male,يذْهبون) | @ar(Female,يذْهبْن) | ``` --{{3}}-- The outcome is a table with playback buttons only, where the text is concealed, and the primary language will be translated while the other languages remain unchanged. {{3}} | go | EN | DE | RU | AR male | AR female | | --------- |:-------------------:|:-------------------:|:-------------------------:|:-----------------:|:-------------------:| | I | @en(I go) | @de(ich gehe) | @ru(я хожу) | @ar(Male,أذْهبُ) | | | you | @en(you go) | @de(du gehst) | @ru(ты ходишь) | @ar(Male,تذْهبُ) | @ar(Female,تذْهبين) | | he/she/it | @en(he/she/it goes) | @de(er/sie/es geht) | @ru(он / она / оно ходит) | @ar(Male,يذْهبُ) | @ar(Female,تذْهبُ) | | we | @en(we go) | @de(wir gehen) | @ru(мы ходим) | @ar(Male,نذْهبُ) | | | you | @en(you go) | @de(ihr geht) | @ru(вы ходите) | @ar(Male,تذْهبون) | @ar(Female,تذْهبْن) | | they | @en(they go) | @de(sie gehen) | @ru(они ходят) | @ar(Male,يذْهبون) | @ar(Female,يذْهبْن) | #### Animations to Playback --{{0}}-- Since we are utilizing the double braces notation for playback elements, this can also be combined with animations by adding appearance and disappearance numbers. Depending on the current state of the animation, this will result in different sentences. ```Markdown {{1 |>}} This is an example where {|> 1-2}{I go} _{|> 2}{I am going}_ to work. ``` --{{1}}-- You need to keep in mind that this will function as intended only if the user is not in Textbook mode. Otherwise, all elements will be read out loud, and nothing will be hidden. {{1 |>}} This is an example where {|> 1-2}{I go} _{|> 2}{I am going}_ to work. ## Fun with Tables --{{0}}-- As previously noted, tables serve not only as structural elements within a Markdown document but also as datasets. In essence, there's minimal distinction between a diagram and a collection of values. 9 | (* dots) | y | * - | a | * x | i | * s | |* 0 +------------------------------------ 0 x-axis 36 --{{1}}-- The same values can be collected within a list. By clicking on the small icon above this list, you will obtain the same plot as depicted previously. {{1}} | x | dots | | ---:| ----:| | 0 | 0 | | 10 | 2 | | 20 | 4 | | 30 | 6 | --{{2}}-- One of the most significant challenges in science is the scarcity of primary data. Initiatives like the Open Science Framework (http://osf.io) aim to address this issue by providing a platform where scientists can store and document extensive datasets. However, rather than relying on external tools to create visualizations, why not directly incorporate and visualize the data? This would enable others to utilize and examine the data more readily. --{{3}}-- Everyone who creates or utilizes data and incorporates it into Markdown is already engaging in some form of configuration. Leveraging the structural settings of tables or data, we can __automatically visualize data__. It's rather surprising that Markdown tables have not been treated as datasets before. The following sections aim to provide a brief overview of various visualization options and how the system determines which one to apply. Additionally, you have the flexibility to enforce your preferred visualization style. ### `LinePlot` --{{0}}-- The following dataset, sourced from https://ourworldindata.org, illustrates government expenditure on education as a percentage of GDP. The first column represents the x-values, while the subsequent columns denote different categories. --{{1}}-- If you click on the image icon again, you'll encounter a more elaborate representation complete with a title and labels. | Year | Finland | USA | Germany | China | | ---- | -------:| -------:| -------:| -------:| | 1995 | 6.80942 | | 4.42079 | 1.84192 | | 1996 | 6.86052 | | 4.48319 | 1.85338 | | 1997 | | | | | | 1998 | | | 4.45345 | 1.84432 | | 1999 | 5.86960 | | | 1.88803 | | 2000 | 5.71687 | | | | | 2001 | 5.84797 | | | | | 2002 | 6.02477 | | | | | 2003 | 6.17476 | | | | | 2004 | 6.16849 | | | | | 2005 | 6.03605 | | | | | 2006 | 5.93809 | | 4.27930 | | | 2007 | 5.68608 | | 4.34302 | | | 2008 | 5.84676 | | 4.40954 | | | 2009 | 6.48517 | | 4.88047 | | | 2010 | 6.54070 | 5.42001 | 4.91368 | | | 2011 | 6.48200 | 5.22389 | 4.80779 | | | 2012 | 7.19254 | 5.19485 | 4.93331 | | | 2013 | 7.15848 | 4.94378 | 4.93496 | | | 2014 | 7.15155 | 4.98948 | 4.93112 | | https://ourworldindata.org/financing-education#all-charts-preview --{{2}}-- The rationale behind this functionality is that you can incorporate additional settings, similar to how different Markdown elements are styled, by simply attaching an HTML comment to the beginning of the table. The type of representation is still automatically determined based on the table structure. However, you can still add attributes like `data-title`, `data-xlabel`, and `data-ylabel` to adjust the graphical representation. Refer to the section [Attributes](#attributes) for more detailed information. {{2}} ``` markdown | Year | Finland | USA | Germany | China | | ---- | -------:| ---:| -------:| -------:| | 1995 | 6.80942 | | 4.42079 | 1.84192 | | 1996 | 6.86052 | | 4.48319 | 1.85338 | | ... | ... | ... | ... | ... | ``` --{{3}}-- Certainly, you can visualize any type of table that doesn't adhere to the classification of a line or ScatterPlot. Let's define another type of presentation, such as a bar chart. If not all values within the first column can be parsed as numbers, they are interpreted as categories. Additionally, if you change the order of the table, the order of categories in the visualization will also change accordingly. {{3}} ``` md | Animal | weight in kg | Lifespan years | Mitogen | | --------------- | ------------:| --------------:| -------:| | Mouse | 0.028 | 2 | 95 | | Flying squirrel | 0.085 | 15 | 50 | | Brown bat | 0.020 | 30 | 10 | | Sheep | 90 | 12 | 95 | | Human | 68 | 70 | 10 | ``` {{3}} | Animal | weight in kg | Lifespan years | Mitogen | | --------------- | ------------:| --------------:| -------:| | Mouse | 0.028 | 2 | 95 | | Flying squirrel | 0.085 | 15 | 50 | | Brown bat | 0.020 | 30 | 10 | | Sheep | 90 | 12 | 95 | | Human | 68 | 70 | 10 | ### `ScatterPlot` --{{0}}-- If your table resembles that of a LinePlot, but the first column contains numbers that appear twice or more times, then this data cannot be interpreted as a "function" in a mathematical sense. In this case, the data is simply visualized as a ScatterPlot, displaying only the dots without connecting lines. ``` | Random | I | II | | ------:| ----:| ---:| | 5.0 | 1.0 | 5 | | ... | | | | 5.0 | 10.0 | 7 | | ... | | | ``` | Random | I | II | | ------:| ----:| ---:| | 5.0 | 1.0 | 5 | | 6.0 | 1.0 | 4 | | 7.0 | 1.0 | 5 | | 8.0 | 1.0 | 5 | | 9.0 | 1.0 | 4 | | 10.0 | 1.0 | 5 | | 5.0 | 10.0 | 7 | | 6.0 | 10.0 | 8 | | 7.0 | 10.0 | 7 | | 8.0 | 10.0 | 7 | | 9.0 | 10.0 | 8 | | 10.0 | 10.0 | 7 | ### `BoxPlot` --{{0}}-- If you have a dataset presented in a ScatterPlot-like format but wish to utilize this data as primary data for a BoxPlot, you can manually change the type of visualization to a BoxPlot. This can be achieved by adding the following attribute to the beginning of your table, as demonstrated in the snippet below. Each column is then treated as a dataset and visualized accordingly. ``` Markdown | Random | I | II | | ------:| ----:| ---:| | 5.0 | 1.0 | 5 | | ... | ... | .. | ``` | Random | I | II | | ------:| ----:| ---:| | 5.0 | 1.0 | 5 | | 6.0 | 1.0 | 4 | | 7.0 | 1.0 | 5 | | 8.0 | 1.0 | 5 | | 9.0 | 1.0 | 4 | | 10.0 | 1.0 | 5 | | 5.0 | 10.0 | 7 | | 6.0 | 10.0 | 8 | | 7.0 | 10.0 | 7 | | 8.0 | 10.0 | 7 | | 9.0 | 10.0 | 8 | | 10.0 | 10.0 | 7 | | | | 1 | ### `BarChart` --{{0}}-- In contrast to a Line or ScatterPlot, if the first column contains at least one entry that cannot be parsed as a number, it might be represented as a BarChart. This concept works well with the following example. If the maximum values of the columns do not differ too much, then the dataset is represented as a BarChart. However, if the maximum values vary significantly, you might end up seeing only one huge bar, making the other bars indistinguishable from each other. In such cases, alternative visualizations are chosen. ``` markdown | Animal | weight in kg | Lifespan years | Mitogen | | --------------- | ------------:| --------------:| -------:| | Mouse | 0.028 | 2 | 95 | | Flying squirrel | 0.085 | 15 | 50 | | Brown bat | 0.020 | 30 | 10 | | Sheep | 90 | 12 | 95 | | Human | 68 | 70 | 10 | ``` | Animal | weight in kg | Lifespan years | Mitogen | | --------------- | ------------:| --------------:| -------:| | Mouse | 0.028 | 2 | 95 | | Flying squirrel | 0.085 | 15 | 50 | | Brown bat | 0.020 | 30 | 10 | | Sheep | 90 | 12 | 95 | | Human | 68 | 70 | 10 | ### `Radar` --{{0}}-- If, for example, humans and sheep are removed from the dataset, then weight in kilograms would not be visible in a BarChart at all. In such a case, a RadarChart is selected. This type of visualization allows for the analysis of data visually with different "y"-axes, accommodating for the diverse nature of the dataset. | Animal | weight in kg | Lifespan years | Mitogen | | --------------- | ------------:| --------------:| -------:| | Mouse | 0.028 | 02 | 95 | | Flying squirrel | 0.085 | 15 | 50 | | Brown bat | 0.020 | 30 | 10 | ### `PieChart` --{{0}}-- If you have a table with only one row filled with numbers, it will be automatically presented as a pie chart. In this representation, the header represents the categories, while the body denotes the quantities associated with each category. | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba | | -------:| -------:| ------:| -------:| ---------:| -----:| | 50 | 50 | 100 | 200 | 350 | 250 | --{{1}}-- You can utilize the first column to provide additional information about your data. If the first element of the list body contains text that cannot be directly interpreted as a number, then these two text snippets are used to define the main title and the subtitle of your chart. {{1}} | Music-Style 1994 | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba | |:---------------- | -------:| -------:| ------:| -------:| ---------:| -----:| | Student rating | 50 | 50 | 100 | 200 | 350 | 250 | #### `PieChart`(s) --{{0}}-- The default behavior for the table below would be to represent it as a barchart. However, you can enforce the usage of pie charts simply by adding the attribute `piechart` into the HTML comment directly above the table: ```markdown | Music-Style | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba | |:----------- | -------:| -------:| ------:| -------:| ---------:| -----:| | 1994 | 50 | 50 | 100 | 200 | 350 | 250 | | ... | ... | ... | ... | ... | ... | ... | ``` --{{1}}-- This instruction overrides the default behavior and ensures that the data is visualized as a piechart. The result looks as follows: {{1}} | Music-Style | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba | |:----------- | -------:| -------:| ------:| -------:| ---------:| -----:| | 1994 | 50 | 50 | 100 | 200 | 350 | 250 | | 2014 | 20 | 30 | 100 | 220 | 400 | 230 | | demo 2034 | 5 | 12 | 98 | 293 | 345 | 32 | ##### Animating Charts --{{0}}-- Since data is parsed at runtime, you can also incorporate animations to dynamically change the values of the chart as you progress through your slides or navigate backward. However, it's important to consider that this approach may not be suitable for all audiences, especially those who prefer a more traditional textbook-style presentation. {{1}} | Music-Style {1-2}{1994} {2}{2014} | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba | |:--------------------------------- | -----------------:| -----------------:| ------:| -------------------:| -------------------:| -------------------:| | Student rating | {1-2}{50} {2}{20} | {1-2}{50} {2}{30} | 100 | {1-2}{200} {2}{220} | {1-2}{350} {2}{400} | {1-2}{250} {2}{230} | ##### Transposing Data --{{0}}-- If the previous table was too long and you prefer to condense it into two columns and grow your data vertically, you can use the attribute `data-transpose`, which mirrors your data along an imaginary vertical axis. This allows you to present your data in a more compact format. ```markdown | Music-Style {1-2}{1994} {2}{2014} | Student rating | |:--------------------------------- | -----------------:| | Classic | {1-2}{50} {2}{20} | | Country | {1-2}{50} {2}{30} | | ... | ... | ``` --{{1}}-- The result remains the same as above, but organizing your data in this transposed format might make it easier to handle and interpret. {{1}} | Music-Style {1-2}{1994} {2}{2014} | Student rating | |:--------------------------------- | -------------------:| | Classic | {1-2}{50} {2}{20} | | Country | {1-2}{50} {2}{30} | | Reggae | 100 | | Hip-Hop | {1-2}{200} {2}{220} | | Hard-Rock | {1-2}{350} {2}{400} | | Samba | {1-2}{250} {2}{230} | ### `Funnel` --{{0}}-- The Funnel is a similar representation to the PieChart, but it is not selected automatically. If you wish to use the funnel visualization, you'll need to set the `data-type` parameter to "funnel". ``` markdown | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba | | -------:| -------:| ------:| -------:| ---------:| -----:| | 50 | 50 | 100 | 200 | 350 | 250 | ``` | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba | | -------:| -------:| ------:| -------:| ---------:| -----:| | 50 | 50 | 100 | 200 | 350 | 250 | --{{1}}-- The process for using effects to generate animated diagrams remains the same as for pie charts. {{1}} | Music-Style {1-2}{1994} {2}{2014} | Student rating | |:--------------------------------- | -------------------:| | Classic | {1-2}{50} {2}{20} | | Country | {1-2}{50} {2}{30} | | Reggae | 100 | | Hip-Hop | {1-2}{200} {2}{220} | | Hard-Rock | {1-2}{350} {2}{400} | | Samba | {1-2}{250} {2}{230} | ### `Map` --{{0}}-- A map visualization is akin to a BarChart in terms of the table structure. However, if you intend to depict your data on an actual map, you'll need to include a GeoJSON file containing all relevant geographic information about the shapes of your countries, states, cities, etc. The first column of your table must match the names of the objects in your GeoJSON data, which is attached to your table as follows: ``` markdown | Country | percent | | ---------------------- | ------- | | Albania | 73.5 | | Andorra | 98.9 | ``` | Country | percent | | ---------------------- | ------- | | Albania | 73.5 | | Andorra | 98.9 | | Armenia | 72.4 | | Austria | 87.9 | | Azerbaijan | 79.8 | | Belarus | 79.7 | | Belgium | 93.9 | | Bosnia and Herzegovina | 80.8 | | Bulgaria | 66.7 | | Croatia | 91.5 | | Cyprus | 84.4 | | Czech Republic | 87.7 | | Denmark | 97.8 | | Estonia | 97.9 | | Finland | 94.0 | | France | 92.3 | | Georgia | 68.1 | | Germany | 96.0 | | Greece | 72.9 | | Hungary | 89.0 | | Iceland | 99.0 | | Ireland | 91.9 | | Italy | 92.5 | | Latvia | 87.1 | | Liechtenstein | 98.1 | | Lithuania | 90.9 | | Luxembourg | 97.8 | | Macedonia | 79.2 | | Malta | 83.1 | | Moldova | 76.1 | | Monaco | 97.5 | | Montenegro | 71.5 | | Netherlands | 95.6 | | Norway | 98.4 | | Poland | 78.2 | | Portugal | 78.2 | | Republic of Serbia | 73.4 | | Romania | 73.8 | | Russia | 80.9 | | San Marino | 60.2 | | Slovakia | 84.9 | | Slovenia | 79.9 | | Spain | 92.5 | | Sweden | 96.4 | | Switzerland | 93.7 | | Turkey | 83.3 | | Ukraine | 93.4 | | United Kingdom | 94.9 | | Vatican City | 60.1 | > Currently, there is only support for visualizing one column, but this limitation will be addressed in future updates, allowing for more comprehensive visualizations of multi-column data. ### `HeatMap` --{{0}}-- Another type of visualization is a HeatMap, which is utilized when the table header and the first column exclusively contain numerical values, essentially representing coordinates. However, if you prefer to use categories instead of numerical coordinates, you can enforce the usage of a HeatMap by adding the following comment: ``` markdown | Seattle | Jan | Feb | Mar | Apr | May | ... | | -------:| ----:| ----:| ----:| ----:| ----:| ----:| | 0 | 40.7 | 41.5 | 43.6 | 46.6 | 51.4 | ... | | 2 | ... | ... | ... | ... | ... | ... | ``` --{{1}}-- The attribute `data-show` simply displays the diagram by default, rather than using the table as the primary representation. {{1}} | Seattle | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec | | -------:| ----:| ----:| ----:| ----:| ----:| ----:| ----:| -----:| ----:| ----:| ----:| ----:| | 0 | 40.7 | 41.5 | 43.6 | 46.6 | 51.4 | 56.0 | 60.5 | 61.2 | 57.0 | 50.1 | 44.1 | 39.6 | | 2 | 40.2 | 40.7 | 42.7 | 45.3 | 50.0 | 54.4 | 58.5 | 59.2 | 55.4 | 49.2 | 43.5 | 39.3 | | 4 | 39.7 | 40.0 | 41.9 | 44.4 | 48.9 | 53.2 | 57.0 | 57.7 | 54.2 | 48.6 | 43.1 | 38.9 | | 6 | 39.6 | 39.5 | 41.3 | 44.2 | 49.5 | 54.2 | 57.8 | 57.4 | 53.6 | 48.2 | 42.8 | 38.7 | | 8 | 39.6 | 39.9 | 42.9 | 47.1 | 52.7 | 57.3 | 61.3 | 61.1 | 56.7 | 49.5 | 43.1 | 38.7 | | 10 | 41.3 | 42.7 | 46.4 | 50.7 | 56.4 | 60.9 | 65.2 | 65.4 | 60.9 | 52.8 | 45.5 | 40.4 | | 12 | 43.8 | 46.0 | 49.5 | 53.8 | 59.6 | 64.3 | 69.4 | 69.8 | 65.1 | 56.0 | 47.8 | 42.6 | | 14 | 45.1 | 47.7 | 51.3 | 55.9 | 61.9 | 66.9 | 72.6 | 73.2 | 67.7 | 57.8 | 48.8 | 43.6 | | 16 | 44.5 | 47.5 | 51.4 | 55.9 | 62.3 | 67.5 | 73.9 | 74.3 | 68.2 | 57.4 | 47.8 | 42.6 | | 18 | 42.6 | 44.7 | 48.7 | 53.8 | 60.3 | 65.9 | 72.3 | 72.2 | 64.6 | 53.9 | 46.0 | 41.2 | | 20 | 42.0 | 43.3 | 46.4 | 50.2 | 56.0 | 61.4 | 66.9 | 66.6 | 60.7 | 52.3 | 45.2 | 40.7 | | 22 | 41.4 | 42.5 | 45.0 | 48.3 | 53.5 | 58.2 | 63.2 | 63.5 | 58.7 | 51.1 | 44.5 | 40.1 | {{1}} https://datavizpyr.com/heatmaps-with-seaborn-in-python/ ### `Parallel` --{{0}}-- A Parallel representation is employed when there are simply too many categories, making a BarChart impractical due to the resulting thin lines. | Country | GDP growth (%) | Births per woman | Life expectancy at birth (years) | Population ages >= 65 (%) | Pop. ages 15-64 (%) | Pop ages 0-14 (%) | Pop (total) | | ---------------------- | -----------------:| ----------------:| --------------------------------:| --------------------------:| -------------------:| -----------------:| -----------:| | Albania | 7.5 | 1.858 | 76.6337073170732 | 9.3330694913874 | 66.4522208535245 | 24.2147096550882 | 3143291 | | Andorra | 3.57073718591123 | 1.260 | NaN | NaN | NaN | NaN | 83810.5 | | Austria | 2.17880778069679 | 1.414 | 80.4475609756098 | 17.0078802490015 | 67.7942859199021 | 15.1978338310964 | 8336926 | | Belarus | 11.29603925282670 | 1.420 | 70.6328780487805 | 13.8161084682917 | 71.3440867491758 | 14.8398047825325 | 9680850 | | Belgium | 1.00416891576425 | 1.820 | 80.1095609756098 | 17.2425951179457 | 65.9073170003941 | 16.8500878816601 | 10708433 | | Bosnia and Herzegovina | 5.41999999999929 | 1.209 | 75.1063170731708 | 13.7875788575916 | 70.5586044787057 | 15.6538166637027 | 3773100 | | Bulgaria | 6.21712220063873 | 1.478 | 73.3165853658537 | 17.3328904412356 | 69.2610054713067 | 13.4061040874577 | 7623395 | | Channel Islands | NaN | NaN | NaN | NaN | NaN | NaN | NaN | | Croatia | 2.35925308110710 | 1.470 | 75.9121951219512 | 17.1754953634927 | 67.5174504975681 | 15.3070541389392 | 4434000 | | Czech Republic | 2.46366103329814 | 1.497 | 77.2112195121951 | 14.6644147081870 | 71.1889763214880 | 14.1466089703250 | 10424336 | | Denmark | -0.86969912719333 | 1.892 | 78.7004878048781 | 15.9364325701275 | 65.6692750948847 | 18.3942923349878 | 5493621 | | Estonia | -5.12891873578752 | 1.661 | 73.9731707317073 | 16.9573479430650 | 68.0747344729978 | 14.9679175839372 | 1340675 | | Faroe Islands | NaN | NaN | NaN | NaN | NaN | NaN | 48511 | | Finland | 0.92209645431238 | 1.846 | 79.7919512195122 | 16.5283868561977 | 66.6427434111131 | 16.8288697326892 | 5313399 | | France | 0.21695181782435 | 1.998 | 81.5204878048781 | 16.6134150592142 | 64.9880225189894 | 18.3985624217964 | 62277432 | | Germany | 0.98801573506542 | 1.376 | 80.0885365853659 | 19.9652972040776 | 66.3351760329956 | 13.6995267629268 | 82110097 | | Greece | 2.01498162894308 | 1.506 | 79.9631707317073 | 18.1870521529388 | 67.5883962990861 | 14.2245515479751 | 11237094 | | Hungary | 0.59999999999994 | 1.352 | 74.0090243902439 | 16.0592099507043 | 68.9813743902960 | 14.9594156589996 | 10038188 | | Iceland | 0.95512219949856 | 2.140 | 81.5751219512195 | 11.6851788453979 | 67.3938402627208 | 20.9209808918813 | 317414 | | Ireland | -3.03575424255612 | 2.100 | 79.8568292682927 | 11.1093456408398 | 68.3358023622894 | 20.5548519968708 | 4425675 | | Isle of Man | NaN | NaN | NaN | NaN | NaN | NaN | NaN | | Italy | -1.31844836660481 | 1.414 | 81.9452097560976 | 20.0909973618083 | 65.7289363852644 | 14.1800662529273 | 59832179 | | Kosovo | NaN | NaN | NaN | NaN | NaN | NaN | NaN | | Latvia | -4.55213597961080 | 1.453 | 72.2382926829268 | 17.1863911389844 | 69.0425815911418 | 13.7710272698738 | 2266094 | | Liechtenstein | 1.79808929851180 | 1.400 | 82.6341463414634 | NaN | NaN | NaN | 35629 | | Lithuania | 2.76144078921502 | 1.470 | 71.8217073170732 | 15.9677094440150 | 68.7509466357882 | 15.2813439201968 | 3358115 | | Luxembourg | 0.03220273485962 | 1.605 | 80.5246341463415 | 14.0365040657173 | 67.9773784654310 | 17.9861174688517 | 488650 | | Macedonia | 4.80000000000011 | 1.438 | 74.2113170731707 | 11.5845850425847 | 69.9825898844976 | 18.4328250729177 | 2041342 | | Malta | NaN | NaN | NaN | NaN | NaN | NaN | NaN | | Moldova | 7.76484641287229 | 1.495 | 68.4371463414634 | 11.1369548727738 | 71.6754849214449 | 17.1875602057813 | 3633369 | | Monaco | NaN | NaN | NaN | NaN | NaN | NaN | NaN | | Republic of Montenegro | NaN | NaN | NaN | NaN | NaN | NaN | NaN | | Netherlands | 1.99580842581707 | 1.775 | 80.4007317073171 | 14.7235949405444 | 67.3305328508120 | 17.9458722086436 | 16445593 | | Norway | 1.81507058553292 | 1.960 | 80.7414634146342 | 14.6455888097593 | 66.2064766744808 | 19.1479345157599 | 4768212 | | Poland | 5.00408460108383 | 1.390 | 75.5331707317073 | 13.3256480555872 | 71.4634305149354 | 15.2109214294774 | 38125759 | | Portugal | -0.03467455605676 | 1.374 | 79.2497560975610 | 17.5012814880078 | 67.1365409199047 | 15.3621775920875 | 10622413 | | San Marino | NaN | NaN | NaN | NaN | NaN | NaN | NaN | | Serbia | 5.51795169957776 | 1.400 | 73.6365853658537 | 14.5167655385706 | 67.6335858157006 | 17.8496486457288 | 7350221 | | Slovakia | 6.17046824289093 | 1.320 | 74.8107317073171 | 11.9677699353106 | 72.3868259638361 | 15.6454041008533 | 5406626 | | Slovenia | 3.49251997044142 | 1.528 | 78.9739024390244 | 16.0267556735963 | 70.1117152095851 | 13.8615291168186 | 2021316 | | Spain | 0.85776978982683 | 1.461 | 81.0880487804878 | 16.9394050582152 | 68.3398363315641 | 14.7207586102207 | 45555716 | | Sweden | -0.40879886604371 | 1.910 | 81.2371707317073 | 17.7223651519496 | 65.5617228818501 | 16.7159119662004 | 9219637 | | Switzerland | 1.89715399119828 | 1.480 | 82.1617073170732 | 16.6721873799941 | 67.8197089730996 | 15.5081036469063 | 7647675 | | Ukraine | 2.09999999999999 | 1.390 | 68.2514634146342 | 15.9037623084261 | 70.1546462864768 | 13.9415914050970 | 46258200 | | United Kingdom | 0.54791121956627 | 1.940 | 79.9033658536585 | 16.3019124620612 | 66.1561282590033 | 17.5419592789355 | 61406928 | | Montenegro | 6.89999999999999 | 1.642 | 74.0975365853659 | 12.8497239486590 | 67.5957824239814 | 19.5544936273596 | 622344 | | Isle of Man | NaN | NaN | NaN | NaN | NaN | NaN | 80543 | | Romania | 9.42580218461200 | 1.350 | 73.3734146341464 | 14.8579664297396 | 69.8993946432444 | 15.2426389270160 | 21513622 | ### `Graph` --{{0}}-- If the values in the first column and the header of the table are equal, then the interpreter attempts to interpret the content of the table as an adjacency matrix, which defines a graph. If these values are symmetrical across the diagonal, then the matrix defines an __undirected graph__. | Graph | A | B | C | D | E | |:----- |:---:|:---:|:---:|:---:|:---:| | A | 0 | 1 | 0 | 1 | 0 | | B | 1 | 0 | 0 | 1 | 0 | | C | 0 | 0 | 0 | 0 | 0 | | D | 1 | 1 | 0 | 0 | 1 | | E | 0 | 0 | 0 | 1 | 0 | --{{1}}-- In contrast to this, if those values differ, then the result is simply a __directed graph__, where the values define the strength of the connections between nodes. {{1}} | Graph | A | B | C | D | E | |:----- |:---:|:---:|:---:|:---:|:---:| | A | 0 | 12 | 0 | 1 | 0 | | B | -22 | 0 | 0 | 0.4 | 0 | | C | 0 | 0 | 0 | 0 | 0 | | D | 2 | 12 | 0 | 0 | 1 | | E | 0 | 0 | 0 | 2 | 0 | {{1}} > Unfortunately, self-referencing or multigraphs are currently not supported. #### `Sankey` --{{0}}-- A Sankey diagram is a special type of directed graph that is used to visualize the flow of something, such as energy, money, or other resources, typically represented as streams or flows between nodes. | Sankey | A | B | C | D | E | |:------ |:---:|:---:|:---:|:---:|:---:| | A | | 2 | | | | | B | 3 | | | | | | C | 1 | 1 | | | | | D | | 1 | 1 | | | | E | 2 | 1 | 1 | 1 | | https://en.wikipedia.org/wiki/Sankey_diagram ### `None` --{{0}}-- Simply set `data-type="none"` to prevent any kind of visualization for the corresponding table. ``` markdown | Sankey | A | B | C | D | E | |:------ |:---:|:---:|:---:|:---:|:---:| | A | | 2 | | | | | B | 3 | | | | | ... ``` | Sankey | A | B | C | D | E | |:------ |:---:|:---:|:---:|:---:|:---:| | A | | 2 | | | | | B | 3 | | | | | | C | 1 | 1 | | | | | D | | 1 | 1 | | | | E | 2 | 1 | 1 | 1 | | ### Attributes * __`data-type`__ --{{0}}-- You can use the attribute `data-type` to overwrite the automatically identified representation with your desired one. The names can be taken from the presented list, and it is not relevant whether you use lower or upper case. This approach also enables the use of types that cannot be automatically inferred at the moment, such as Sankey or BoxPlot. If you do not want to show tables as diagrams, you can also use `none`, and only the table will be visible. * `data-type="bar|barchart"` * `data-type="boxplot"` * `data-type="funnel"` * `data-type="graph"` * `data-type="heatmap"` * `data-type="line|lineplot"` * `data-type="map"` * __`data-type="none"`__ * `data-type="parallel"` * `data-type="pie|piechart"` * `data-type="radar"` * `data-type="sankey"` * `data-type="scatter|scatterplot"` > __Note:__ The `none` datasets will turn of the first fixed column. > For the other cases the table is treated as a dataset and the header and the first column will be fixed while scrolling. {{1}} * __`data-show`__ --{{1}}-- Simply add this attribute or set it to true, if you want to visualize your data immediately, without the need to click on the switch button. However, users still retain the ability to switch to the table representation if desired. `` or `` {{2}} * __`data-transpose`__: --{{2}}-- Similar to the mathematical sense, set this attribute or set it to true if you want to transpose rows and columns. One benefit is that you can, for example, use a PieChart and let your table grow vertically instead of using a horizontal layout. `` or `` {{3}} * __`data-title`__: --{{3}}-- By default, the first cell defines the title of your diagram. However, if you prefer larger titles and want to avoid writing gigantic table headers, you can apply this attribute. `` {{4}} * __`data-xlabel`__: --{{4}}-- Similarly, as described above, you can also define the strings for the labels, in this case, for the label for the x-axis. `` {{5}} * __`data-ylabel`__: --{{5}}-- Or, in this case label for the y-axis. `` {{6}} * __`data-xlim`__ & __`data-ylim`__: --{{6}}-- The limits are automatically determined, but you can also overwrite them with the following command. `` --{{6}}-- The first value is used as the minimum, the second as the maximum value. If you skip a number, then the automatically determined value is used. `` {{7}} * __`data-src`__: --{{7}}-- Currently, this attribute is used to refer to your GeoJSON data if you use the map representation. However, this functionality might change in the future to allow for the loading and visualization of data directly, such as CSV files. See sections [Fun with Tables - Map](#map) `` --{{8}}-- Be careful when utilizing GeoJSON files from external websites, as this may result in CORS (Cross-Origin Resource Sharing) problems. It's better to store these files in your own projects and refer to them directly to avoid such issues. {{8}} https://code.highcharts.com/mapdata/ {{9}} * __`data-sortable`__: By default a table is sortable by each column. This behavior can be turned off or on by using the `data-sortable` parameter. Use it as a global parameter per table by placing it into the main comment or turn it on or of within every column. The local column parameter will overwrite the global one. ```markdown | Header 1 | Header 2 | | :------- | :------------------------------------- | | Item 1 | Item 2 | | Item 5 | Item 6 | | Item 9 | Item 10 | | Item 13 | Item 14 | ``` {{10}} * __`data-orientation`__: Depending on the default setting for a diagram it is possible to switch between `vertical` and `horizontal` orientation. ```markdown | Animal | weight in kg | Lifespan years | Mitogen | | --------------- | ------------:| --------------:| -------:| | Mouse | 0.028 | 2 | 95 | | Flying squirrel | 0.085 | 15 | 50 | | Brown bat | 0.020 | 30 | 10 | | Sheep | 90 | 12 | 95 | | Human | 68 | 70 | 10 | ``` | Animal | weight in kg | Lifespan years | Mitogen | | --------------- | ------------:| --------------:| -------:| | Mouse | 0.028 | 2 | 95 | | Flying squirrel | 0.085 | 15 | 50 | | Brown bat | 0.020 | 30 | 10 | | Sheep | 90 | 12 | 95 | | Human | 68 | 70 | 10 | ### Custom Diagrams with ECharts --{{0}}-- LiaScript utilizes [ECharts](https://echarts.apache.org) for the diagrams and therefore uses a custom HTML tag or web component called `lia-chart`. You can check out examples at the following site: https://echarts.apache.org/examples/en/index.html --{{1}}-- Using this tag, you can pass your diagram configuration directly as an option in JSON format or as a simple dictionary, which will be evaluated automatically. {{1}} ``` html ``` --{{2}}-- This approach allows you to rebuild nearly every example directly, providing flexibility and ease of customization. {{2}} {{3}}

--{{3}}-- If you require the execution of JavaScript or need more interaction with the diagram, you can also apply `script` tags. For more information on this, refer to section [JavaScript or JS-Components](#JavaScript-or-JS-Components). $a =$ , $b =$ , $c =$

## ASCII-Art --{{0}}-- Based on the [SvgBob project](https://github.com/ivanceras/svgbob) by Ivan Ceras, LiaScript also has support for basic ASCII art drawings. --{{1}}-- We had to rebuild the library in Elm. The project can be found here: {{1}} https://github.com/andre-dietrich/elm-svgbob/ --{{2}}-- If you want to use it, simply create a new Markdown code block with at least 10 backticks, or use `ascii` as the language indicator. {{2}} ```` markdown ``` ascii +------+ +-----+ +-----+ +-----+ | | | | | | | | | Foo +-->| Bar +---+ Baz |<--+ Moo | | | | | | | | | +------+ +-----+ +--+--+ +-----+ ^ | | V .-------------+-----------------------. | Hello here and there and everywhere | '-------------------------------------' ``` ```` --{{3}}-- The result will be an SVG image that is scaled according to the full width of the available screen. {{3}} ``` ascii +------+ +-----+ +-----+ +-----+ | | | | | | | | | Foo +-->| Bar +---+ Baz |<--+ Moo | | | | | | | | | +------+ +-----+ +--+--+ +-----+ ^ | | V .-------------+-----------------------. | Hello here and there and everywhere | '-------------------------------------' ``` ### How to Draw things ... --{{0}}-- Remember, all you require is a keyboard, so you can use basic characters to draw different shapes. Unicode is fully supported in LiaScript, which means you can use emojis within your drawings. Additionally, you can embed LiaScript elements for integrating anything LiaScript related.

via GIPHY

#### 1. Boxes --{{0}}-- Depending on the type of characters, you can define different kinds of boxes, triangles, or rectangular shapes. Supported characters for borders include: __borders:__ * straight: `-`, `_`, `|` * rounded: `(`, `)` * diagonal: \, / {{1}}

--{{1}}-- Additionally, it is possible to define different shapes for the corners. These range from normal, rounded corners to special ones that can be used to represent relations. These shapes are not limited to corners only: __corners:__ * normal: `+` * rounded: all of them are actually treated equally, when creating the svg corner. Different representations do only affect the ASCII drawing. `.`, `,`, `´`, `'` * special: filled dot `*`, filled square `#`, empty dot (`o`, `O`)

--{{2}}-- Here are some examples for different shapes: {{2}} ```` md ``` ascii +-----+ _____ +-----+ _____ _____ | 0 | | 1 | | 2 | | 3 | |_ 4 _| +-----+ |_____| |_____| +-----+ .-----. ._____. ,-----, ------- '-----' | 5 | | 6 | | 7 | | 8 | | 9 | '-----' ,_____, |_____| ------- '_____' o------o *------* #------# O------O .-----+ | 10 | | 11 | | 12 | | 13 | | 14 | o------o *------* #------# O------O +-----' .----+ +----. .-----. /\ .------. ( 15 | | 16 ) ( 17 ) /18\ / 19 / `----+ +----´ `-----´ /____\ /______/ ``` ```` --{{3}}-- And here is their representation as an ASCII art image: {{3}} ``` ascii +-----+ _____ +-----+ _____ _____ | 0 | | 1 | | 2 | | 3 | |_ 4 _| +-----+ |_____| |_____| +-----+ .-----. ._____. ,-----, ------- '-----' | 5 | | 6 | | 7 | | 8 | | 9 | '-----' ,_____, |_____| ------- '_____' o------o *------* #------# O------O .-----+ | 10 | | 11 | | 12 | | 13 | | 14 | o------o *------* #------# O------O +-----' .----+ +----. .-----. /\ .------. ( 15 | | 16 ) ( 17 ) /18\ / 19 / `----+ +----´ `-----´ /____\ /______/ ``` #### 2. Arrows & Connectors --{{0}}-- Depending on the direction of your arrow, you can use `<` or `>` for left and right, `v` or `V` for down, and `^` or `A` for up. The other endings (`*`, `#`, `o`, `O`) are direction independent. ```` md ``` ascii ----> ---->> ----o ----O ----* ----# <---> <<-->> o---o O---O *---* #---# _______________________________________ | | | | | | | v V # o O * ^ A # o O * | | | | | | | -+-----+-----+-----+-----+-----+-----+- ^ A # o O * \ \ \ / / / \ \ \ / / / v V # o O * ``` ```` --{{1}}-- The result looks quite nice indeed. This approach enables you to draw some fancy images and to change them quite easily. Similar to "toki pona," sometimes a reduced set of features allows you to get directly to the point. {{1}} ``` ascii ----> ---->> ----o ----O ----* ----# <---> <<-->> o---o O---O *---* #---# _______________________________________ | | | | | | | v V # o O * ^ A # o O * | | | | | | | -+-----+-----+-----+-----+-----+-----+- ^ A # o O * \ \ \ / / / \ \ \ / / / v V # o O * ``` --{{2}}-- You can also use arrows to connect your other drawings, but keep in mind that in some cases, you will have to use the `+` sign to fully attach your lines to another edge. {{2}} ```` md ``` ascii +-----+ +-----+ +-----+ +-----+ | 0 |---->| 1 | | 2 +---->| 3 | +-----+ +-----+ +-----+ +-----+ +-----+ +-----+ +-----+ +-----+ | | | | | | | | | 4 *-----# 5 |-----+ 6 o-----> 7 | | | | | | | | | +-----+ +-----+ +-----+ +-----+ +---#--o---*---<--->---O---. | .-<<---, .---. \ A / / / \ \ |/ ( V o # * \ / \ / `--+ `--* ``` ```` --{{3}}-- The result looks as follows: {{3}} ``` ascii +-----+ +-----+ +-----+ +-----+ | 0 |---->| 1 | | 2 +---->| 3 | +-----+ +-----+ +-----+ +-----+ +-----+ +-----+ +-----+ +-----+ | | | | | | | | | 4 *-----# 5 |-----+ 6 o-----> 7 | | | | | | | | | +-----+ +-----+ +-----+ +-----+ +---#--o---*---<--->---O---. | .-<<---, .---. \ A / / / \ \ |/ ( V o # * \ / \ / `--+ `--* ``` #### 3. More Shapes --{{0}}-- Here are some more examples of rounded shapes that can be used in simple drawings: ```` md ``` ascii /\ +-----+ .-----. .-----. / \ | 1 | | 2 | ( 3 ) / \ +-----+ '-----' '-----' '------' _______ ________ .-------. / \ /\ \ \ / \ / 5 \ / \ ) 7 ) ( 8 ) \ / \ / /_______/ \ / \_______/ \/ '-------' +----------+ / \ + 9 + \ / +----------+ .-----------. . <-. .-> . ( 10 ) ( 11 ) ( 12 ) '-----+ ,---' `-> ' ` <-' |/ ' _ __ .-. .--. .--.--. .---. (_) (__) ( X ) ( 16 ) ( 1( )7 ) ( 1 8 ) '-' `--' `--'--' `---´ .-----. .----. +----+ *----* \ / \ \ \ \ \ \ \ / \ \ \ \ \ \ ' '----' +----+ O----O ``` ```` --{{1}}-- As you can see, by using parentheses, different rounded shapes can be generated too. {{1}} ``` ascii /\ +-----+ .-----. .-----. / \ | 1 | | 2 | ( 3 ) / \ +-----+ '-----' '-----' '------' _______ ________ .-------. / \ /\ \ \ / \ / 5 \ / \ ) 7 ) ( 8 ) \ / \ / /_______/ \ / \_______/ \/ '-------' +----------+ / \ + 9 + \ / +----------+ .-----------. . <-. .-> . ( 10 ) ( 11 ) ( 12 ) '-----+ ,---' `-> ' ` <-' |/ ' _ __ .-. .--. .--.--. .---. (_) (__) ( X ) ( 16 ) ( 1( )7 ) ( 1 8 ) '-' `--' `--'--' `---´ .-----. .----. +----+ *----* \ / \ \ \ \ \ \ \ / \ \ \ \ \ \ ' '----' +----+ O----O ``` #### 4. Box Drawing --{{0}}-- The Unicode standard defines a set of characters/symbols that were used in the past for drawing user interfaces and menus within the console. You can use these symbols individually or in combination with the symbols and shapes mentioned above. ```` md ``` ascii ╔════════════════════════════════════[×]═╗ ╭─────╮ ║ Fenstertitel ║ │ │ ╳ ╟──────────────────────────────────────┬─╢ ╵ ╷ ╱ ╲ ║ Fensterinhalt │▲║ ╰─────╯ ║ │░║ ║ │░║ ┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕ ║ │░║ │ ││ ║ ║║ ║ ║║ │ ││ ║ │░║ ├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡ ║ │█║ └─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛ ║ │░║ ║ │░║ ┌───────────────────┐ ║ │░║ │ ╔═══╗ Some Text │▒ ║ │░║ │ ╚═╦═╝ in the box │▒ ║ │░║ ╞═╤══╩══╤═══════════╡▒ ║ │░║ │ ├──┬──┤ │▒ ║ │░║ │ └──┴──┘ │▒ ║ │▼║ └───────────────────┘▒ ╚══════════════════════════════════════╧═╝ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ``` ```` --{{1}}-- These Unicode images can also be combined with the previous ASCII art examples, or you can use these box drawing elements to add shadows and more detail to your drawings. {{1}} ``` ascii ╔════════════════════════════════════[×]═╗ ╭─────╮ ║ Fenstertitel ║ │ │ ╳ ╟──────────────────────────────────────┬─╢ ╵ ╷ ╱ ╲ ║ Fensterinhalt │▲║ ╰─────╯ ║ │░║ ║ │░║ ┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕ ║ │░║ │ ││ ║ ║║ ║ ║║ │ ││ ║ │░║ ├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡ ║ │█║ └─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛ ║ │░║ ║ │░║ ┌───────────────────┐ ║ │░║ │ ╔═══╗ Some Text │▒ ║ │░║ │ ╚═╦═╝ in the box │▒ ║ │░║ ╞═╤══╩══╤═══════════╡▒ ║ │░║ │ ├──┬──┤ │▒ ║ │░║ │ └──┴──┘ │▒ ║ │▼║ └───────────────────┘▒ ╚══════════════════════════════════════╧═╝ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ``` --{{2}}-- The following table contains a set of characters that can be used via copy and paste to draw various types of boxes: {{2}} | | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | | ------ |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:| | U+250x | ─ | ━ | │ | ┃ | ┄ | ┅ | ┆ | ┇ | ┈ | ┉ | ┊ | ┋ | ┌ | ┍ | ┎ | ┏ | | U+251x | ┐ | ┑ | ┒ | ┓ | └ | ┕ | ┖ | ┗ | ┘ | ┙ | ┚ | ┛ | ├ | ┝ | ┞ | ┟ | | U+252x | ┠ | ┡ | ┢ | ┣ | ┤ | ┥ | ┦ | ┧ | ┨ | ┩ | ┪ | ┫ | ┬ | ┭ | ┮ | ┯ | | U+253x | ┰ | ┱ | ┲ | ┳ | ┴ | ┵ | ┶ | ┷ | ┸ | ┹ | ┺ | ┻ | ┼ | ┽ | ┾ | ┿ | | U+254x | ╀ | ╁ | ╂ | ╃ | ╄ | ╅ | ╆ | ╇ | ╈ | ╉ | ╊ | ╋ | ╌ | ╍ | ╎ | ╏ | | U+255x | ═ | ║ | ╒ | ╓ | ╔ | ╕ | ╖ | ╗ | ╘ | ╙ | ╚ | ╛ | ╜ | ╝ | ╞ | ╟ | | U+256x | ╠ | ╡ | ╢ | ╣ | ╤ | ╥ | ╦ | ╧ | ╨ | ╩ | ╪ | ╫ | ╬ | ╭ | ╮ | ╯ | | U+257x | ╰ | ╱ | ╲ | ╳ | ╴ | ╵ | ╶ | ╷ | ╸ | ╹ | ╺ | ╻ | ╼ | ╽ | ╾ | ╿ | --{{3}}-- If you need shadows or different kinds of shadings, you can use some of the following elements: {{3}} | | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | | ------ |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:| | U+258x | ▀ | ▁ | ▂ | ▃ | ▄ | ▅ | ▆ | ▇ | █ | ▉ | ▊ | ▋ | ▌ | ▍ | ▎ | ▏ | | U+259x | ▐ | ░ | ▒ | ▓ | ▔ | ▕ | ▖ | ▗ | ▘ | ▙ | ▚ | ▛ | ▜ | ▝ | ▞ | ▟ | #### 5. Emojis --{{0}}-- Emojis are defined in the Unicode standard as well, which is why you can use any kind of symbols that you use in your day-to-day chat messages. ```` md ``` ascii 😎 👩 Bob Alice | hello | +-------------->| | | | Is it ok? | |<- - - - - - - | Bob Alice 😎 👩 ``` ```` --- ``` ascii 😎 👩 Bob Alice | hello | +-------------->| | | | Is it ok? | |<- - - - - - - | Bob Alice 😎 👩 ``` --{{1}}-- You can either install a plugin to your editor for emojis or you can search the net for emojis. Check out the following links or see section [Unicode Symbols](#Unicode-Symbols) in the [Appendix](#Appendix). {{1}}

* __Sites__ * Search emojis on: https://emojipedia.org * Complete list on Unicode symbols: https://symbl.cc/en/unicode/table/ * __Plugins__ * VSCode - Ultimate Emoji: https://marketplace.visualstudio.com/items?itemName=rohit-chouhan.ultimate-emoji * Atom - autocomplete-emojis: https://liascript.github.io/blog/setting-up-atom/ * LiaScript-LiveEditor: start typing a colon : to open the emoji search https://LiaScript.github.io/LiveEditor * __OS Extensions__ * Ubuntu/Gnome - Emoji Selector: https://extensions.gnome.org/extension/1162/emoji-selector/ * Windows, use the keyword shortcut ⊞ Win + . to open the emoji keyboard: https://support.microsoft.com/en-us/windows/windows-keyboard-tips-and-tricks-588e0b72-0fff-6d3f-aeee-6e5116097942 * MacOS, use the shortcut Command + Control + Spacebar to open up the emoji picker: https://support.apple.com/guide/mac-help/use-emoji-and-symbols-on-mac-mchlp1560/mac

### Styling ASCII --{{0}}-- As explained in section [Custom Styling](#custom-styling), it is also possible to add custom styles here by attaching an HTML comment to the beginning of an ASCII art image. This enables you, for example, to center the image, define a maximum width, or change the color of some base SVG elements. ```` md ``` ascii .---> F A B C D / *-------*-----*---*----*-----> E \ ^ \ v / '---> G B --> C -' ``` ```` --- ``` ascii .---> F A B C D / *-------*-----*---*----*-----> E \ ^ \ v / '---> G B --> C -' ``` ### Adding Titles --{{0}}-- As shown in section [Code - Projects 💫](#Projects-💫), you can add a title after the language indicator. This "title" can be a one-liner of Markdown-LiaScript and is displayed directly below the ASCII art image, similar to how it is done for images. ```` markdown ``` ascii Fig.: Working with branches in git checkout the __[git-Workflow](https://about.gitlab.com/topics/version-control/what-is-git-workflow/)__ new feature .---#---. | | development .-o---o---o----o----o-. | | main *---*-+-*---*---*-------------*---- ``` ```` ``` ascii Fig.: Working with branches in git checkout the __[git-Workflow](https://about.gitlab.com/topics/version-control/what-is-git-workflow/)__ new feature .---#---. | | development .-o---o---o----o----o-. | | main *---*-+-*---*---*-------------*---- ``` ### Embedding LiaScripts --{{0}}-- And of course, it is also possible to add LiaScript elements into your ASCII art drawing. This is accomplished by using double quotes `"`, which define something like a verbatim environment. There are currently two different types of environments: simple one-liner and blocks. --{{1}}-- The code example demonstrates three applications for such verbatim LiaScript elements. Firstly, you can integrate and style a simple one-liner, which is not possible for text otherwise. Secondly, you can add entire blocks with a subsequent number of quotations that start at the same horizontal x-position. Lastly, this can also contain executable elements, animations, other inputs, and more. {{1}} ````` markdown ```` ascii .---------------------------------------. ╔════════════════════════════════════[×]═╗ | https://LiaScript.github.io | ║ (3) Interactive JavaScript Console ║▒ +---------------------------------------+ ╟──────────────────────────────────────┬─╢▒ | (1) "_ https://LiaScript.github.io _" | ║"``` js "│▲║▒ '---------------------------------------' ║"console.log('hello world') "│░║▒ ║"``` "│░║▒ (2) ║" "│░║▒ "* Verbatim blocks start with quotes at the " ║ │░║▒ " same x position " ║ │█║▒ "* The quote with the maximum length defines " ║ │░║▒ " the width of the block " ║ │░║▒ "* The number of subsequent quotes gets ignored," ║ │░║▒ " LiaScript elements are placed above the " ║ │▼║▒ " SVG-image " ╚══════════════════════════════════════╧═╝▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ```` ````` --{{2}}-- As visible in the generated image, the verbatim elements are not as precisely placed as the normal text. This might require some adjustment of the positions of the quotations to achieve the desired result. You can observe that the verbatim elements are overlaid as `foreignObjects` above the SVG images by executing the code example. {{2}} ```` ascii .---------------------------------------. ╔════════════════════════════════════[×]═╗ | https://LiaScript.github.io | ║ (3) Interactive JavaScript Console ║▒ +---------------------------------------+ ╟──────────────────────────────────────┬─╢▒ | (1) "_ https://LiaScript.github.io _" | ║"``` js "│▲║▒ '---------------------------------------' ║"console.log('hello world') "│░║▒ ║"``` "│░║▒ (2) ║" "│░║▒ "* Verbatim blocks start with quotes at the " ║ │░║▒ " same x position " ║ │█║▒ "* The quote with the maximum length defines " ║ │░║▒ " the width of the block " ║ │░║▒ "* The number of subsequent quotes gets ignored," ║ │░║▒ " LiaScript elements are placed above the " ║ │▼║▒ " SVG-image " ╚══════════════════════════════════════╧═╝▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ```` #### 1. Animations --{{0}}-- Such integration of LiaScript into ASCII art can shine when you want to use animations to highlight a certain point. For example, in the following example, different usages of animations are demonstrated. The first three are inline animations, where the number is bound to the text. The last example is a block animation where the number is hidden. ```` markdown ``` ascii 😀 😐 | "{1}{_How are you?_}" | +------------------------------------------>| | "{2}{**Need to do math**}" | |<------------------------------------------+ | "{3}{How difficult can it be?}" | +------------------------------------------>| | " {{4}} " | | "$$ " | | " x = \sqrt[3]{ y " | | " + \sqrt {y^2 + \bigg( \dfrac{c}{3a} " | | " - \dfrac{b^2}{9a^2} \bigg)^3}} " | | "$$ " | +<------------------------------------------+ | | ``` ```` --- ``` ascii 😀 😐 | "{1}{_How are you?_}" | +------------------------------------------>| | "{2}{**Need to do math**}" | |<------------------------------------------+ | "{3}{How difficult can it be?}" | +------------------------------------------>| | " {{4}} " | | "$$ " | | " x = \sqrt[3]{ y " | | " + \sqrt {y^2 + \bigg( \dfrac{c}{3a} " | | " - \dfrac{b^2}{9a^2} \bigg)^3}} " | | "$$ " | +<------------------------------------------+ | | ``` #### 2. Animations with TTS --{{0}}-- The same animation can also be combined with text-to-speech output by using [comments](#Comments:-Text-2-Speech) or [hidden comments](#Hidden-comments) as shown in the example. Hidden comments are simply comments that are not shown to the public as normal comments. They are placed into an HTML comment, and different voices can be added too. ```` markdown ``` ascii 😀 😐 | "{1}{_How are you?_}" | +------------------------------------------>| | "{2}{**Need to do math**}" | |<------------------------------------------+ . ... . ``` ```` ``` ascii | "{1}{_How are you?_}" | +------------------------------------------>| | "{2}{**Need to do math**}" | |<------------------------------------------+ | "{3}{How difficult can it be?}" | +------------------------------------------>| | " {{4}} " | | "$$ " | | " x = \sqrt[3]{ y " | | " + \sqrt {y^2 + \bigg( \dfrac{c}{3a} " | | " - \dfrac{b^2}{9a^2} \bigg)^3}} " | | "$$ " | +<------------------------------------------+ | | ``` #### 3. Quizzes --{{0}}-- Of course, you can use this in combination with quiz text inputs or selections. Since every quotation in this example is a separated Markdown block, we need to trick the interpreter from trying to embed a single line text quiz into a gap text element by adding a space before the input. Together with the `data-show-partial-solution` command, this is an easy way of creating more complex quizzes. ```` md ``` ascii .----------------------. / /| .--------+----------------------+ +---------. / | " [[ 24 ]] " |/ /| .--------+----------+----------+-----------+---------+ +----------. / | 11 | "[[ 13 ]] "|/ /| +----------+----------+----------+----------+----------+----------+ + | " [[ 5 ]] "| 6 | 7 |/ +---------------------+---------------------+---------------------+ ``` ```` --{{1}}-- If you try out the following example, correct and incorrect inputs will be highlighted. {{1}} ``` ascii .----------------------. / /| .--------+----------------------+ +---------. / | " [[ 24 ]] " |/ /| .--------+----------+----------+-----------+---------+ +----------. / | 11 | "[[ 13 ]] "|/ /| +----------+----------+----------+----------+----------+----------+ + | " [[ 5 ]] "| 6 | 7 |/ +---------------------+---------------------+---------------------+ ``` #### 4. Working with Macros --{{0}}-- Since the size of a LiaScript element is defined based on the width of the quotation, too long LiaScript definitions, such as an external image URL, might cause some problems. To solve this, you can define a local macro, in this case `@image`, which is basically only a substitution for the larger image. This macro can then be used as a placeholder within the verbatim. For more information on this topic, check out the section [Macros](#macros). ```` markdown #### 4. Working with Macros Name the elements in the following image: ``` ascii " @image " " [[ (lens) | optic disc ]] " *----------------------> <------"[[ sclera ]] " " [[ (retina) | chorid ]] " *-----------> <----*" [[ optic nerve ]] " ``` ```` --{{1}}-- The result looks as follows, where the lower quotations are placed above the image. The size of the image was defined by the space between the quotes and required some manual moving till it fits. Can you solve it? {{1}}

Name the elements in the following image: ``` ascii " @image " " [[ (lens) | optic disc ]] " *----------------------> <------"[[ sclera ]] " " [[ (retina) | chorid ]] " *-----------> <----*" [[ optic nerve ]] " ```

## Scaleable Vector Graphics --{{0}}-- The latest version of LiaScript now supports tight integration with SVG images, enabling you to embed and manipulate vector graphics directly within your slides and notes. SVG (Scalable Vector Graphics) is an XML-based format for defining two-dimensional vector graphics. Unlike bitmap images (e.g., PNG or JPEG), SVG graphics are resolution-independent and can scale without loss of quality. They can be styled and animated using CSS and JavaScript, making them ideal for diagrams, charts, icons, and interactive visualizations. * __Specification & Tutorials__ * [W3C SVG Specification](https://www.w3.org/TR/SVG2/) * [MDN Web Docs - SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [SVG Tutorial by W3Schools](https://www.w3schools.com/graphics/svg_intro.asp) * __Why Use SVG?__ * __Scalability:__ Perfect display on high-DPI and retina screens. * __Styling:__ Apply CSS rules for fills, strokes, gradients, and animations. * __Interactivity:__ Bind events and manipulate elements via JavaScript. * __Accessibility:__ SVG elements can be made accessible with ARIA attributes. --{{1}}-- To embed SVG images in your LiaScript document, you can use the standard `