Merge pull request #82 from gosling-lang/thomcsmits/docs4

paper: add leading slash to imgs

Author: thomcsmits

docs/src/pages/paper.md

@@ -52,14 +52,14 @@ The co-author used the JAWS screen reader in Google Chrome. In subsequent weeks,
 We focused on the Gosling grammar-based toolkit to automatically create text descriptions of genomics data visualization using the Gosling specifications (L’Yi et al. 2022). Gosling can be used in a number of different ways: through the Gosling.js JavaScript library, the Gos Python package (Manz et al. 2023), and a preliminary R package (https://github.com/gosling-lang/grosling), as well as in the online editor (https://gosling.js.org). In each instance, the visualization (Fig. 1A) is based on a JSON specification defining how referenced data should be displayed (Fig. 1B). Gosling depends on HiGlass for its data retrieval (Kerpedjiev et al. 2018). For static visualizations, it retrieves the genomics data in HiGlass tiles once. For interactive visualizations, it retrieves the genomics data upon each update on the visualization (e.g. through zoom and pan) and sends the data over to the Gosling JavaScript API.
 
 <figure>
-  <img src="img/btae670f1.jpeg" alt="Schematic with three boxes. The middle box has arrows to the left and right box. The left box (A), titled ‘Gosling Visualization,’ shows a heatmap matrix. The middle box (B), titled ‘Gosling JSON Specification,’ shows text in JSON format. The right box (C), titled ‘AltGosling Text Description,’ shows text in a quotation mark. The text in the right box reads ‘Matrix. Chart is titled ‘Hi-C for HFFc6 Cells’. The Genome is shown on both the x- and y-axes. Both axes show intervals. The height of the expression values is shown with color." />
+  <img src="/img/btae670f1.jpeg" alt="Schematic with three boxes. The middle box has arrows to the left and right box. The left box (A), titled ‘Gosling Visualization,’ shows a heatmap matrix. The middle box (B), titled ‘Gosling JSON Specification,’ shows text in JSON format. The right box (C), titled ‘AltGosling Text Description,’ shows text in a quotation mark. The text in the right box reads ‘Matrix. Chart is titled ‘Hi-C for HFFc6 Cells’. The Genome is shown on both the x- and y-axes. Both axes show intervals. The height of the expression values is shown with color." />
   <figcaption><strong>Figure 1.</strong> Relationship between AltGosling and Gosling. The logic-based algorithm of AltGosling extracts important features of Gosling visualization (L’Yi et al. 2022) (A) from its corresponding JSON specification (B) to automatically generate natural language description (C). Screen readers can use the resulting description (C) to explain visualization to blind and low vision (BLV) users.</figcaption>
 </figure>
 
 AltGosling depends on the Gosling specification and the Gosling JavaScript API (Fig. 2). Using information from these components, AltGosling creates its own specification that captures all important features and corresponding text descriptions (Fig. 2D). Compared to the Gosling specification, AltGosling specifications are less nested and contain the entire information for generating text descriptions. The AltGosling specification is used to deliver the plain text descriptions (Figs 1C and 2E–F) as well as the navigable tree-structured descriptions (Fig. 2G). The rendering logic of AltGosling defines what properties from the AltGosling specification should be shown. This separation of information retrieval (Fig. 2D) and rendering logic (Fig. 2E–G) allows for easy variation in delivery methods. For example, developers can directly use the AltGosling specification to create custom text descriptions that meet their use cases.
 
 <figure>
-  <img src="img/btae670f2.jpeg" alt="Schematic with two sections. On the top left is a file icon with ‘Gosling Spec’. This points to the right section, labeled ‘Gosling.js,’ and the bottom section, labeled ‘AltGosling’." />
+  <img src="/img/btae670f2.jpeg" alt="Schematic with two sections. On the top left is a file icon with ‘Gosling Spec’. This points to the right section, labeled ‘Gosling.js,’ and the bottom section, labeled ‘AltGosling’." />
   <figcaption><strong>Figure 2.</strong> A schematic representation of the AltGosling approach. AltGosling (D) extracts information about visual representations and underlying data of a genomics data visualization (C) from the Gosling JSON specification (A) and the Gosling renderer (B). Based on the extracted features, AltGosling offers alternative text (“alt text”), long descriptions, and tree-structured keyboard-navigable descriptions. The separation of feature extraction (D) and the rendering of textual descriptions (E–G) offers flexibility in delivery.</figcaption>
 </figure>
 
@@ -161,7 +161,7 @@ The prevalent way of delivering alternative text is plain text. However, alterna
 Novel in the area of alternative text, we propose a keyboard-navigable and screen reader accessible collapsible tree following HTML ARIA standard, similar to Olli, where the data is structured hierarchically (Fig. 3). For a visualization with multiple charts, the information is organized by chart.
 
 <figure>
-  <img src="img/btae670f3.jpeg" alt="Screenshot of AltGosling in browser. On top is a Gosling visualization with two scatter plots. Below are two partially expanded panels, showing information such as title, tracks, appearance, and data table." />
+  <img src="/img/btae670f3.jpeg" alt="Screenshot of AltGosling in browser. On top is a Gosling visualization with two scatter plots. Below are two partially expanded panels, showing information such as title, tracks, appearance, and data table." />
   <figcaption><strong>Figure 3.</strong> A public demo website of AltGosling. In addition to the (A) Gosling visualization, AltGosling presents two navigable hierarchical panels, (B) one containing information about the visualization (e.g. visual appearance and statistics), and (C) the other containing information about the most recently retrieved data (e.g. genomic range and corresponding data table). Users can select a different example using the drop-down menu on the left-top corner.</figcaption>
 </figure>
 
@@ -178,7 +178,7 @@ This hierarchy with descriptions and detail nodes allows the user to ingest only
 In this section, we use ten genomics data visualization examples (Fig. 4) to showcase the functionality of AltGosling in generating textual descriptions. Corresponding Gosling specifications and AltGosling descriptions are included in the Supplementary Materials. A video of a user navigating through the example in Fig. 4A with a screen reader is also included in the Supplementary Materials.
 
 <figure>
-  <img src="img/btae670f4.jpeg" alt="Composition of ten screenshots of visualizations separated into two sections. The top section is marked ‘Single Track’. The bottom section is marked ‘Multiple Tracks’. Each has five visualizations labeled A-E and F-H." />
+  <img src="/img/btae670f4.jpeg" alt="Composition of ten screenshots of visualizations separated into two sections. The top section is marked ‘Single Track’. The bottom section is marked ‘Multiple Tracks’. Each has five visualizations labeled A-E and F-H." />
   <figcaption><strong>Figure 4.</strong> Examples of genomics data visualization supported with AltGosling. AltGosling can construct textual descriptions for a wide variety of genomics data visualizations, including single charts (A–E) and multiple chart compositions (F–J).</figcaption>
 </figure>