RAWGraphs visualization¶
This example story is part of the SHMARQL documentation. It demonstrates the RAWGraphs Visualization Special Node. To open it as an editable project, download rawgraphs.lodeon.zip and import it in the story editor (/lodeon/ → Import).
Design a chart in RAWGraphs, export the project as a .rawgraphs file and paste or upload it into the node. The editor renders it and stores the SVG, which is what readers see.
The data of this bar chart comes from this Wikidata query (Rembrandt's dated paintings per decade):
SELECT ?decade (COUNT(DISTINCT ?painting) AS ?paintings) WHERE {
?painting wdt:P170 wd:Q5598 ;
wdt:P31 wd:Q3305213 ;
wdt:P571 ?date .
BIND(STR(FLOOR(YEAR(?date) / 10) * 10) AS ?decade)
FILTER(YEAR(?date) >= 1620 && YEAR(?date) < 1670)
}
GROUP BY ?decade
ORDER BY ?decade
{
"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
}
}Try it in the editor:
- Open the project JSON in the node and change
visualOptions.height, then render again. - Paste another RAWGraphs project, for example one exported from app.rawgraphs.io.