From Triples to Cards: A Web Component for Human-Readable Linked Open Data

Package URL: https://www.npmjs.com/package/lodox-data-viewer

Introduction

JSON (JavaScript Object Notation) has become the dominant data format for web applications [1, 2]. JSON-LD, a Linked Data serialization format based on JSON [3], is designed to ease the adoption and integration of Linked Data in web applications. It has been attracting increasing attention, especially in the cultural heritage domain. For example, the Linked Art data model ¹ provides a JSON-LD based data profile built on the CIDOC-CRM ontology ², aiming to provide shared data modelling approaches [4]. It has been adopted and implemented in a range of online applications and workflows [5, 6]. Furthermore, the Getty Museum Collection also provides an API based on Linked Art ³.

Meanwhile, many existing semantic portals and web applications for presenting cultural heritage Linked Data offer rich interfaces but rely on a full stack, so they cannot easily be integrated into other systems without deploying that complete stack [7, 8]. We developed LOＤox (Linked Open Data Oxford) Data Viewer, a reusable web component library that is:

• easily embedded: it can be embedded anywhere with one script tag by different web applications.

• able to render JSON-LD without per-record templates: the viewer renders JSON-LD data into human-readable cards.

• customizable: per-record layout and theming can be configured.

On a further note, LODox Data Viewer is still under active development. It was initially the presentation layer of a full-stack system for publishing cultural heritage Linked Data, namely LODox, and was later decoupled into a stand-alone library so that it can be reused independently.

In this paper, we will first describe the design and implementation of LODox Data Viewer (§ 2), and demonstrate its usage with JSON-LD and Linked Art (§ 3). Finally, we will discuss the conclusion and future plans in § 4.

Design and Implementation

LODOx Data Viewer is available either as an npm (Node Package Manager) package or as a loadable bundle from a Content Delivery Network (CDN). For example, it can be loaded using unpkg.com:

<script type="module" src="https://unpkg.com/lodox-data-viewer"></script>

From a few lines of code with a single script tag, LODox Data Viewer renders JSON-LD into multiple human-readable cards, as shown in Figure 1. In order to do this, we use the workflow demonstrated in Figure 2. First, the package automatically detects the profile of the input JSON-LD. At present, it detects the Linked Art profile and generic JSON-LD; support for additional profiles is under development. The corresponding adaptor decides what enters the card header as a record and extracts basic information for each record: identifier, link, title, description, image, etc. A walker then traverses all the remaining properties losslessly: every non-empty value reachable from each record’s root will appear on the corresponding record card, except for language tags and image captions. Nested objects are flattened. For example, measurement objects are represented as a single row containing both the measured value and its unit. An object with a _label, a content, or an id emits a row of its own, followed by rows for its properties. An object without these emits no row of its own, but its properties may appear as rows. The layout, size, and colours of each card are configurable either by a configuration file or through CSS custom properties. The package also includes built-in presets, each setting a card’s layout and size in a single word.

Finally, the package presents each record as a card including a header with the title and type, the images, a short description, and a table of detailed properties. A single JSON-LD file can contain a main item together with related ones, for example, a painting alongside its painter and current location. Each of these is rendered as its own card showing the properties relevant to it, as shown in Figure 3a.

fig:3b shows the layout of a single card. (1) and (3) show the primary label, in the card header and at the top of the body. (2) is the object type. For Linked Art JSON-LD, it is the CIDOC-CRM class representing the resource type, for example, “HumanMadeObject”⁴. (4) contains further essential information, including alternative names, the identifier (URI), and a short description. (5) contains the associated images. (6) contains a detailed table, which takes the record as the subject. Each row in the table shows one property and its value. Finally, (7), shown in the footer, displays the data source as a clickable link that directs users to the original source website. Furthermore, each card can be configured

with different height and width, allowing the overall layout of the cards to be customized. The cards will be stacked side by side automatically given enough width, or vertically. Therefore, as the subject and object in a semantic triple can be placed as cards side by side, the layout can also be used to present relations between the cards, as shown in Figure 4.

Demonstration

The npm package includes a command (npm run demo) that runs a live demonstration server locally. At present, Linked Art JSON-LD files are handled by an adaptor written for their vocabulary; others are rendered by the generic profile with no code specific to them. Figure 5 shows the demo displaying the Mona Lisa together with Leonardo da Vinci⁵.

Conclusion and Future Work

In this paper, we presented LODox Data Viewer, an npm package for rendering JSON-LD. We have demonstrated that JSON-LD data with well-established vocabularies can be effortlessly rendered while emphasizing the fields specified by the profile adaptors. LODox Data Viewer also provides a card-based presentation for Linked Data. The package remains an early-stage software demonstration, and we have not yet conducted a user-based evaluation. The usability is evaluated based on development experience and unit testing. User-based evaluation with developers and practitioners is planned as future work. In the meantime, we identify three major directions for future development.

First, we will develop more adaptors for other well-established ontologies and investigate how to render data described by multiple ontologies simultaneously.

Second, we acknowledge that the rendering result depends on the configuration and the quality of the JSON-LD provided. At present, not every JSON-LD file renders well owing to limited profile compatibility and data completeness. We therefore plan to investigate algorithms and approaches for auto-configuration, enabling more flexible rendering.

Third, we will investigate the use of AI agents to retrieve and control the cards and terms expressed in JSON-LD, in particular, to determine which cards are included in a given JSON-LD document. We expect LODox Data Viewer to be embedded in a pipeline in which an agent reviews data drawn from a graph database and exports the corresponding JSON-LD. Moreover, the current package only renders static JSON-LD files. We also wish to develop dynamic loading with an agentic AI, in which cards are generated successively, each one selected for its relevance or relations to those already selected.

Acknowledgments

The authors are grateful to Professor Donna Kurtz for her guidance and support for this work.

Declaration on Generative AI

During the preparation of this work, the author(s) used Claude and ChatGPT in order to: grammar and spelling check, content enhancement, improve writing style, and paraphrase and reword. After using these tools/services, the authors reviewed and edited the content as needed and take full responsibility for the publication’s content.

References