Special Nodes showcase¶

This example story is part of the SHMARQL documentation. It contains every Special Node of the editor at once, so the whole set can be tested in one page. To open it as an editable project, download showcase.lodeon.zip and import it in the story editor (/lodeon/ → Import).

Rich text¶

Text can be bold, italic, underlined, struck through or code, and contain links.

• A bullet list
• with two items

and a numbered list:

1. A numbered list
2. with two items

A block quote: “Painting is just another way of keeping a diary.” – attributed to Pablo Picasso.

A code block; in SHMARQL, SPARQL code blocks get a ▶ link that opens the query page:

SELECT ?painting WHERE {
  ?painting wdt:P170 wd:Q41264 .
}
LIMIT 10

An image by URL (not stored in the project):

Story Metadata¶

SPARQL query¶

SELECT ?painting ?paintingLabel ?year ?locationLabel WHERE {
  ?painting wdt:P170 wd:Q41264 ;
            wdt:P31 wd:Q3305213 .
  OPTIONAL { ?painting wdt:P571 ?date . BIND(YEAR(?date) AS ?year) }
  OPTIONAL { ?painting wdt:P276 ?location . }
  SERVICE wikibase:label { bd:serviceParam wikibase:language "en". }
}
ORDER BY ?year
LIMIT 100

SPARQL query from the Visual Query Builder¶

SELECT DISTINCT ?Painting_1 ?Painting_1_label WHERE {
  ?Painting_1 wdt:P31 wd:Q3305213 .
  ?Painting_1 wdt:P170 wd:Q41264 .
  ?Painting_1 wdt:P571 ?Date_2 .
  FILTER(YEAR(?Date_2) >= 1660 && YEAR(?Date_2) < 1670)
  ?Painting_1 rdfs:label ?Painting_1_label .
  FILTER(LANG(?Painting_1_label) = "en")
}
LIMIT 100

Below this paragraph the project contains one more SPARQL node that is marked hidden from rendered output. It is kept in the project, but not in the published story.

Plotly Visualization¶

{
  "version": 2,
  "renderer": "plotly",
  "sourceMode": "sparql",
  "source": "SELECT ?painterLabel ?paintings WHERE {\n  {\n    SELECT ?painter (COUNT(DISTINCT ?painting) AS ?paintings) WHERE {\n      VALUES ?painter { wd:Q5598 wd:Q41264 wd:Q167654 wd:Q205863 wd:Q314889 }\n      ?painting wdt:P170 ?painter ;\n                wdt:P31 wd:Q3305213 .\n    }\n    GROUP BY ?painter\n  }\n  SERVICE wikibase:label { bd:serviceParam wikibase:language \"en\". }\n}\nORDER BY DESC(?paintings)",
  "url": "",
  "urlFormat": "csv",
  "chartType": "bar",
  "mapping": {
    "x": "painterLabel",
    "y": "paintings"
  },
  "plotlyDataJson": "[\n  {\n    \"type\": \"bar\",\n    \"x\": [\n      \"Rembrandt\",\n      \"Jan Steen\",\n      \"Frans Hals\",\n      \"Pieter de Hooch\",\n      \"Johannes Vermeer\"\n    ],\n    \"y\": [\n      751,\n      482,\n      307,\n      201,\n      36\n    ],\n    \"marker\": {\n      \"color\": \"#0072B2\"\n    }\n  }\n]\n",
  "layoutJson": "{\n  \"autosize\": true,\n  \"paper_bgcolor\": \"#ffffff\",\n  \"plot_bgcolor\": \"#ffffff\",\n  \"font\": {\n    \"family\": \"Inter, system-ui, sans-serif\",\n    \"color\": \"#1f2328\"\n  },\n  \"colorway\": [\n    \"#E69F00\",\n    \"#56B4E9\",\n    \"#009E73\",\n    \"#F0E442\",\n    \"#0072B2\",\n    \"#D55E00\",\n    \"#CC79A7\",\n    \"#000000\"\n  ],\n  \"margin\": {\n    \"l\": 56,\n    \"r\": 32,\n    \"t\": 48,\n    \"b\": 64\n  },\n  \"showlegend\": false,\n  \"xaxis\": {\n    \"title\": {\n      \"text\": \"Painter\"\n    }\n  },\n  \"yaxis\": {\n    \"title\": {\n      \"text\": \"Paintings\"\n    }\n  }\n}",
  "configJson": "{\n  \"responsive\": true,\n  \"displaylogo\": false,\n  \"scrollZoom\": false\n}\n",
  "data": {
    "columns": [
      {
        "name": "painterLabel",
        "type": "string"
      },
      {
        "name": "paintings",
        "type": "number"
      }
    ],
    "rows": [
      {
        "painterLabel": "Rembrandt",
        "paintings": 751
      },
      {
        "painterLabel": "Jan Steen",
        "paintings": 482
      },
      {
        "painterLabel": "Frans Hals",
        "paintings": 307
      },
      {
        "painterLabel": "Pieter de Hooch",
        "paintings": 201
      },
      {
        "painterLabel": "Johannes Vermeer",
        "paintings": 36
      }
    ]
  },
  "figure": {
    "data": [
      {
        "type": "bar",
        "x": [
          "Rembrandt",
          "Jan Steen",
          "Frans Hals",
          "Pieter de Hooch",
          "Johannes Vermeer"
        ],
        "y": [
          751,
          482,
          307,
          201,
          36
        ],
        "marker": {
          "color": "#0072B2"
        }
      }
    ],
    "layout": {
      "autosize": true,
      "paper_bgcolor": "#ffffff",
      "plot_bgcolor": "#ffffff",
      "font": {
        "family": "Inter, system-ui, sans-serif",
        "color": "#1f2328"
      },
      "colorway": [
        "#E69F00",
        "#56B4E9",
        "#009E73",
        "#F0E442",
        "#0072B2",
        "#D55E00",
        "#CC79A7",
        "#000000"
      ],
      "margin": {
        "l": 56,
        "r": 32,
        "t": 48,
        "b": 64
      },
      "showlegend": false,
      "xaxis": {
        "automargin": true,
        "gridcolor": "#e6e6e6",
        "zerolinecolor": "#d6d6d6",
        "title": {
          "text": "Painter"
        }
      },
      "yaxis": {
        "automargin": true,
        "gridcolor": "#e6e6e6",
        "zerolinecolor": "#d6d6d6",
        "title": {
          "text": "Paintings"
        }
      }
    },
    "config": {
      "responsive": true,
      "displaylogo": false,
      "scrollZoom": false
    }
  }
}

RAWGraphs Visualization¶

{
  "version": 1,
  "renderer": "rawgraphs",
  "project": "{\n  \"version\": \"1.2\",\n  \"userInput\": [\n    {\n      \"decade\": \"1620\",\n      \"paintings\": \"51\"\n    },\n    {\n      \"decade\": \"1630\",\n      \"paintings\": \"284\"\n    },\n    {\n      \"decade\": \"1640\",\n      \"paintings\": \"114\"\n    },\n    {\n      \"decade\": \"1650\",\n      \"paintings\": \"148\"\n    },\n    {\n      \"decade\": \"1660\",\n      \"paintings\": \"86\"\n    }\n  ],\n  \"userInputFormat\": \"json\",\n  \"dataSource\": {\n    \"type\": \"paste\"\n  },\n  \"rawData\": [\n    [\n      \"1620\",\n      \"51\"\n    ],\n    [\n      \"1630\",\n      \"284\"\n    ],\n    [\n      \"1640\",\n      \"114\"\n    ],\n    [\n      \"1650\",\n      \"148\"\n    ],\n    [\n      \"1660\",\n      \"86\"\n    ]\n  ],\n  \"parseError\": null,\n  \"parseOptions\": {\n    \"separator\": \",\",\n    \"thousandsSeparator\": \",\",\n    \"decimalsSeparator\": \".\",\n    \"locale\": \"en\",\n    \"unstackedData\": null,\n    \"unstackedColumns\": null\n  },\n  \"dataTypes\": {\n    \"decade\": \"string\",\n    \"paintings\": {\n      \"type\": \"number\",\n      \"locale\": \"en\",\n      \"decimal\": \".\",\n      \"group\": \",\",\n      \"numerals\": [\n        \"0\",\n        \"1\",\n        \"2\",\n        \"3\",\n        \"4\",\n        \"5\",\n        \"6\",\n        \"7\",\n        \"8\",\n        \"9\"\n      ]\n    }\n  },\n  \"chart\": \"rawgraphs.barchart\",\n  \"mapping\": {\n    \"bars\": {\n      \"ids\": [\n        \"1\"\n      ],\n      \"value\": [\n        \"decade\"\n      ],\n      \"isValid\": true,\n      \"mappedType\": \"string\"\n    },\n    \"size\": {\n      \"ids\": [\n        \"2\"\n      ],\n      \"value\": [\n        \"paintings\"\n      ],\n      \"isValid\": true,\n      \"mappedType\": \"number\",\n      \"config\": {\n        \"aggregation\": [\n          \"sum\"\n        ]\n      }\n    }\n  },\n  \"visualOptions\": {\n    \"width\": 720,\n    \"height\": 400,\n    \"background\": \"#ffffff\",\n    \"marginTop\": 20,\n    \"marginRight\": 10,\n    \"marginBottom\": 40,\n    \"marginLeft\": 50,\n    \"showLegend\": false,\n    \"padding\": 6,\n    \"barsOrientation\": \"vertical\",\n    \"sortBarsBy\": \"name\",\n    \"useSameScale\": true,\n    \"columnsNumber\": 0,\n    \"showGrid\": false,\n    \"colorScale\": {\n      \"scaleType\": \"ordinal\",\n      \"interpolator\": \"schemeCategory10\",\n      \"userScaleValues\": [\n        {\n          \"range\": \"#0072B2\",\n          \"domain\": \"default\"\n        }\n      ],\n      \"defaultColor\": \"#0072B2\"\n    }\n  },\n  \"customChart\": null\n}",
  "svg": "<svg width=\"720\" height=\"400\"><rect width=\"720\" height=\"400\" x=\"0\" y=\"0\" fill=\"#ffffff\" id=\"background\"></rect><g id=\"viz\"><g transform=\"translate(0,0)\"><g transform=\"translate(50,20)\"><g class=\"bars\"><rect id=\"undefined - 1620\" x=\"5.945945945945937\" y=\"147.33333333333334\" height=\"192.66666666666666\" width=\"124.8648648648649\" fill=\"#0072B2\"></rect><rect id=\"undefined - 1630\" x=\"136.75675675675677\" y=\"-732.8888888888888\" height=\"1072.8888888888887\" width=\"124.8648648648649\" fill=\"#0072B2\"></rect><rect id=\"undefined - 1640\" x=\"267.5675675675676\" y=\"-90.66666666666664\" height=\"430.66666666666663\" width=\"124.8648648648649\" fill=\"#0072B2\"></rect><rect id=\"undefined - 1650\" x=\"398.37837837837844\" y=\"-219.1111111111111\" height=\"559.1111111111111\" width=\"124.8648648648649\" fill=\"#0072B2\"></rect><rect id=\"undefined - 1660\" x=\"529.1891891891893\" y=\"15.111111111111095\" height=\"324.8888888888889\" width=\"124.8648648648649\" fill=\"#0072B2\"></rect></g><g id=\"xAxis\" transform=\"translate(0,340)\" fill=\"none\" font-size=\"10\" font-family=\"sans-serif\" text-anchor=\"middle\"><path class=\"domain\" stroke=\"currentColor\" d=\"M0.5,0.5H660.5\"></path><g class=\"tick\" opacity=\"1\" transform=\"translate(68.37837837837839,0)\"><line stroke=\"currentColor\" y2=\"6\"></line><text fill=\"currentColor\" y=\"9\" dy=\"0.71em\">1620</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(199.18918918918922,0)\"><line stroke=\"currentColor\" y2=\"6\"></line><text fill=\"currentColor\" y=\"9\" dy=\"0.71em\">1630</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(330.00000000000006,0)\"><line stroke=\"currentColor\" y2=\"6\"></line><text fill=\"currentColor\" y=\"9\" dy=\"0.71em\">1640</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(460.8108108108109,0)\"><line stroke=\"currentColor\" y2=\"6\"></line><text fill=\"currentColor\" y=\"9\" dy=\"0.71em\">1650</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(591.6216216216217,0)\"><line stroke=\"currentColor\" y2=\"6\"></line><text fill=\"currentColor\" y=\"9\" dy=\"0.71em\">1660</text></g><text x=\"660\" y=\"-4\" text-anchor=\"end\" style=\"font-family: Arial, sans-serif; font-size: 12px; fill: #7b7b7b; font-weight: bold;\">decade</text></g><g id=\"yAxis\" fill=\"none\" font-size=\"10\" font-family=\"sans-serif\" text-anchor=\"end\"><path class=\"domain\" stroke=\"currentColor\" d=\"M-6,340.5H0.5V0.5H-6\"></path><g class=\"tick\" opacity=\"1\" transform=\"translate(0,340.5)\"><line stroke=\"currentColor\" x2=\"-6\"></line><text fill=\"currentColor\" x=\"-9\" dy=\"0.32em\">0</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(0,302.72222222222223)\"><line stroke=\"currentColor\" x2=\"-6\"></line><text fill=\"currentColor\" x=\"-9\" dy=\"0.32em\">10</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(0,264.94444444444446)\"><line stroke=\"currentColor\" x2=\"-6\"></line><text fill=\"currentColor\" x=\"-9\" dy=\"0.32em\">20</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(0,227.16666666666669)\"><line stroke=\"currentColor\" x2=\"-6\"></line><text fill=\"currentColor\" x=\"-9\" dy=\"0.32em\">30</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(0,189.38888888888889)\"><line stroke=\"currentColor\" x2=\"-6\"></line><text fill=\"currentColor\" x=\"-9\" dy=\"0.32em\">40</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(0,151.61111111111111)\"><line stroke=\"currentColor\" x2=\"-6\"></line><text fill=\"currentColor\" x=\"-9\" dy=\"0.32em\">50</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(0,113.83333333333334)\"><line stroke=\"currentColor\" x2=\"-6\"></line><text fill=\"currentColor\" x=\"-9\" dy=\"0.32em\">60</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(0,76.05555555555556)\"><line stroke=\"currentColor\" x2=\"-6\"></line><text fill=\"currentColor\" x=\"-9\" dy=\"0.32em\">70</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(0,38.27777777777779)\"><line stroke=\"currentColor\" x2=\"-6\"></line><text fill=\"currentColor\" x=\"-9\" dy=\"0.32em\">80</text></g><g class=\"tick\" opacity=\"1\" transform=\"translate(0,0.5)\"><line stroke=\"currentColor\" x2=\"-6\"></line><text fill=\"currentColor\" x=\"-9\" dy=\"0.32em\">90</text></g><text x=\"4\" text-anchor=\"start\" dominant-baseline=\"hanging\" style=\"font-family: Arial, sans-serif; font-size: 12px; fill: #7b7b7b; font-weight: bold;\">paintings [sum]</text></g></g><text y=\"4\" x=\"4\" style=\"font-family: Arial, sans-serif; font-size: 12px; fill: black; font-weight: bold; dominant-baseline: hanging;\"></text></g></g></svg>",
  "summary": {
    "version": "1.2",
    "chartId": "rawgraphs.barchart",
    "chartName": "Bar chart",
    "rowCount": 5,
    "columnCount": 2
  }
}

Leaflet Map¶

Graph Explorer¶

IIIF Object¶

{
  "version": 1,
  "renderer": "iiif",
  "sourceMode": "sparql",
  "url": "",
  "query": "SELECT ?resource ?label ?manifest WHERE {\n  VALUES ?painter { wd:Q5598 wd:Q167654 wd:Q205863 wd:Q314889 }\n  ?resource wdt:P170 ?painter ;\n            wdt:P6108 ?manifest .\n  FILTER(STRSTARTS(STR(?manifest), \"https://api.smk.dk/\"))\n  SERVICE wikibase:label {\n    bd:serviceParam wikibase:language \"en\".\n    ?resource rdfs:label ?label .\n  }\n}\nLIMIT 20",
  "knowledgeGraphProfileId": "wikidata",
  "resultMapping": {
    "manifest": "manifest",
    "imageInfo": "imageInfo",
    "label": "label",
    "resource": "resource"
  },
  "selectedItem": null,
  "label": "",
  "caption": "IIIF manifests (Wikidata property P6108) of paintings by Rembrandt, Frans Hals, Jan Steen and Pieter de Hooch held by the SMK – National Gallery of Denmark.",
  "height": 520,
  "viewMode": "gallery",
  "galleryReferenceStrip": "horizontal"
}

Embed Remote Content¶

Media Asset¶

Music Notation¶