Plotly visualization¶
This example story is part of the SHMARQL documentation. It demonstrates the Plotly Visualization Special Node. To open it as an editable project, download plotly.lodeon.zip and import it in the story editor (/lodeon/ → Import).
A Plotly node turns a table into a chart. The table comes from a SPARQL query, from pasted CSV or TSV, or from a CSV/TSV file on the web (the server must allow cross-origin requests). Pick a chart type, map columns to the axes, and fine-tune the Plotly data, layout and config JSON. The finished figure is stored in the story, so readers see the chart without running the query again.
From a SPARQL query¶
The number of paintings in Wikidata for five painters of the Dutch Golden Age, as a bar chart:
{
"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
}
}
}From pasted CSV¶
Vermeer's paintings per country of the holding collection (summarised from the map example), as a pie chart:
{
"version": 2,
"renderer": "plotly",
"sourceMode": "csv",
"source": "country,paintings\nUnited States,9\nNetherlands,8\nGermany,6\nUnited Kingdom,5\nFrance,2\nGerman Reich,1\nJapan,1\nallied-occupied Germany,1\nIreland,1\nAustria,1",
"url": "",
"urlFormat": "csv",
"chartType": "pie",
"mapping": {
"label": "country",
"value": "paintings"
},
"plotlyDataJson": "[\n {\n \"type\": \"pie\",\n \"labels\": [\n \"United States\",\n \"Netherlands\",\n \"Germany\",\n \"United Kingdom\",\n \"France\",\n \"German Reich\",\n \"Japan\",\n \"allied-occupied Germany\",\n \"Ireland\",\n \"Austria\"\n ],\n \"values\": [\n 9,\n 8,\n 6,\n 5,\n 2,\n 1,\n 1,\n 1,\n 1,\n 1\n ],\n \"hole\": 0.35\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\": true\n}",
"configJson": "{\n \"responsive\": true,\n \"displaylogo\": false,\n \"scrollZoom\": false\n}\n",
"data": {
"columns": [
{
"name": "country",
"type": "string"
},
{
"name": "paintings",
"type": "number"
}
],
"rows": [
{
"country": "United States",
"paintings": 9
},
{
"country": "Netherlands",
"paintings": 8
},
{
"country": "Germany",
"paintings": 6
},
{
"country": "United Kingdom",
"paintings": 5
},
{
"country": "France",
"paintings": 2
},
{
"country": "German Reich",
"paintings": 1
},
{
"country": "Japan",
"paintings": 1
},
{
"country": "allied-occupied Germany",
"paintings": 1
},
{
"country": "Ireland",
"paintings": 1
},
{
"country": "Austria",
"paintings": 1
}
]
},
"figure": {
"data": [
{
"type": "pie",
"labels": [
"United States",
"Netherlands",
"Germany",
"United Kingdom",
"France",
"German Reich",
"Japan",
"allied-occupied Germany",
"Ireland",
"Austria"
],
"values": [
9,
8,
6,
5,
2,
1,
1,
1,
1,
1
],
"hole": 0.35
}
],
"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": true
},
"config": {
"responsive": true,
"displaylogo": false,
"scrollZoom": false
}
}
}From pasted TSV¶
Rembrandt's dated paintings per decade, as a line chart:
{
"version": 2,
"renderer": "plotly",
"sourceMode": "tsv",
"source": "decade\tpaintings\n1620s\t51\n1630s\t284\n1640s\t114\n1650s\t148\n1660s\t86",
"url": "",
"urlFormat": "csv",
"chartType": "line",
"mapping": {
"x": "decade",
"y": "paintings"
},
"plotlyDataJson": "[\n {\n \"type\": \"scatter\",\n \"mode\": \"lines+markers\",\n \"x\": [\n \"1620s\",\n \"1630s\",\n \"1640s\",\n \"1650s\",\n \"1660s\"\n ],\n \"y\": [\n 51,\n 284,\n 114,\n 148,\n 86\n ],\n \"line\": {\n \"color\": \"#0072B2\",\n \"width\": 3\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\": \"Decade\"\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": "decade",
"type": "string"
},
{
"name": "paintings",
"type": "number"
}
],
"rows": [
{
"decade": "1620s",
"paintings": 51
},
{
"decade": "1630s",
"paintings": 284
},
{
"decade": "1640s",
"paintings": 114
},
{
"decade": "1650s",
"paintings": 148
},
{
"decade": "1660s",
"paintings": 86
}
]
},
"figure": {
"data": [
{
"type": "scatter",
"mode": "lines+markers",
"x": [
"1620s",
"1630s",
"1640s",
"1650s",
"1660s"
],
"y": [
51,
284,
114,
148,
86
],
"line": {
"color": "#0072B2",
"width": 3
}
}
],
"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": "Decade"
}
},
"yaxis": {
"automargin": true,
"gridcolor": "#e6e6e6",
"zerolinecolor": "#d6d6d6",
"title": {
"text": "Paintings"
}
}
},
"config": {
"responsive": true,
"displaylogo": false,
"scrollZoom": false
}
}
}Try it in the editor:
- Switch the chart type of the first node to Horizontal bar or Pie.
- Run the query again – the counts change as Wikidata is edited.
- Open the Layout JSON tab and change the title or colours.