Data Stories

Data Stories allows a sequence of SPARQL queries to be published within an HTML document. Examples of such stories can be found here

Getting Started

To get started with Data Stories contact us at info@triply.cc

Minimal working example

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="{{FIRST-AUTHOR}}, {{SECOND-AUTHOR}}, …" />
    <meta name="description" content="{{INSTANCE}} Data Stories ― {{STORY-TITLE}}" />
    <title>{{INSTANCE}} Data Stories ― {{STORY-TITLE}}</title>
    <link rel="stylesheet" href="{{LINK-TO-STORIES-CSS}}" />
  </head>
  <body>
    <query data-query-ref="test.rq" endpoint="https://triplydb.com/datasets/academy/sparql/services/sparql/sparql">
    </query>
    <script src="{{LINK-TO-STORIES-JS}}"></script>
    <script type="text/javascript">
      window.onload = function() {
        window.stories();
      };
    </script>
  </body>
</html>

Components

Data Stories defines the following two HTML elements:

  • <div class="story"> :: The tag that contains zero or more <query> tags and that implements the Data Story.
  • <query> :: The tag that implements one query within the Data Story.

Story

The following attributes are defined on a <div class="story"> element:

  • data-endpoint: The URI of the SPARQL endpoint against which all queries in the Data Story are executed.
  • data-output: The output format that is used to display SPARQL result sets in. The following values are supported:

    raw
    The textual content of the HTTP reply body. For example, the SPARQL result set serialized in XML, JSON, or CSV.
    table
    Shows the results in rows of an HTML table. This is the default value.
    boolean
    Shows the result of an `ask` query.
    error
    Display the error value.
    gallery
    Shows HTML widgets in card rows.
    gchart
    Shows a UI for selecting numeric properties in order to generate various diagrams.
    geo
    Shows GeoSPARQL results on a 2D map.
    geo3d
    Shows GeoSPARQL results on a 3D map.
    pivot
    Shows a UI for selecting numeric properties in order to generate various diagrams and pivot tables.

Query

The following attributes are defined on the query element:

  • data-config-ref="URI": The URI of a saved query in TriplyDB.
  • data-config="URI": A URI that encodes a query together with the configuration of a specific view. These URIs can be created within the SPARQL IDE.
  • data-endpoint="URI": The URI of the SPARQL endpoint against which a particular query is evaluated. When absent, the value of this attribute on the <div class="story"> tag is used.
  • data-query-ref="URI": An absolute or relative URI to a file that stores a SPARQL query.
  • data-output="VALUE": The output format that is used to display the SPARQL result set. When absent, the value of this attribute on the <div class="story"> tag is used. See the documentation of the Story element for the supported values.
  • data-show-query: By default, the query editor is hidden. When this attribute is present, the query editor is shown.

Stacked story

Stacked stories (see here for an example) render the story using tabbed UI, contrary to the regular stories that draw queries below each other.

stacked
Example of a stacked story

A stacked story is initialized by an article tag with the following attributes

<article data-stacked="true"></article>

Each item of the stacked story is a section with therein a header and a query element

<article data-stacked="true">
  <section data-title="Which Pokémon has the most experience?">
    <header>
      This SPARQL query shows the Pokémon, sorted by their experience.
    </header>
    <query data-query-ref="./query/gallery.rq" data-output="gallery"></query>
    <section></section>
  </section>
</article>

The title of the section is set by the data-title attribute in the section element