<https://docs.linkeddatahub.com/tutorial/insight/>
        a       <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item>;
        <http://www.w3.org/1999/02/22-rdf-syntax-ns#_1>
                <https://docs.linkeddatahub.com/tutorial/insight/#content>;
        <http://purl.org/dc/terms/created>
                "2026-09-29T09:52:43.248Z"^^<http://www.w3.org/2001/XMLSchema#dateTime>;
        <http://purl.org/dc/terms/creator>
                <https://admin.linkeddatahub.com/acl/agents/5ba81960-d511-4a3b-8b9a-cb5bb278dd95/#this>;
        <http://purl.org/dc/terms/description>
                "Turn SPARQL queries into charts and views";
        <http://purl.org/dc/terms/title>
                "Insight";
        <http://rdfs.org/sioc/ns#has_container>
                <https://docs.linkeddatahub.com/tutorial/>;
        <http://www.w3.org/ns/auth/acl#owner>
                <https://admin.linkeddatahub.com/acl/agents/5ba81960-d511-4a3b-8b9a-cb5bb278dd95/#this> .

<https://docs.linkeddatahub.com/tutorial/insight/#content>
        a       <https://w3id.org/atomgraph/linkeddatahub#XHTML>;
        <http://www.w3.org/1999/02/22-rdf-syntax-ns#value>
                "<div xmlns=\"http://www.w3.org/1999/xhtml\">\n    <p class=\"ldh-body-lg\">Turn SPARQL queries into charts and views</p>\n    <p>With the graph populated, analysis is a query away — and in LinkedDataHub, queries, <a href=\"../../reference/data-model/resources/#charts\" target=\"_blank\">charts</a> and\n        <a href=\"../../reference/data-model/resources/#views\" target=\"_blank\">views</a> are resources like everything else. A chart is three resources chained together: an\n        <code>sp:Select</code> query holding the SPARQL text, an <code>ldh:ResultSetChart</code> describing how to plot its results, and an <code>ldh:Object</code> block placing it on a document.</p>\n    <div>\n        <h2 id=\"chart\">A revenue chart</h2>\n        <p>The Categories container carries a revenue-per-category chart. Its query joins order items to products to categories across their documents. Note that\n            <code>?orderItem schema:price</code> is already the discounted line total (the demo's\n            <a href=\"https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/orders/order_details.rq\" target=\"_blank\">order details mapping</a> computed it per line),\n            so the query sums it directly.</p>\n        <div class=\"ac-tabs or-horizontal\">\n            <div class=\"ac-tablist sz-md va-line\" role=\"tablist\">\n                <button aria-controls=\"in-the-browser-pane\" aria-selected=\"true\" class=\"ac-tab is-on\" id=\"in-the-browser-tab\" role=\"tab\" type=\"button\"><span class=\"ac-tab-lbl\">In the browser</span></button>\n                <button aria-controls=\"from-the-command-line-pane\" aria-selected=\"false\" class=\"ac-tab\" id=\"from-the-command-line-tab\" role=\"tab\" type=\"button\"><span class=\"ac-tab-lbl\">From the command line</span></button>\n            </div>\n            <div aria-labelledby=\"in-the-browser-tab\" class=\"ac-tabpanel\" id=\"in-the-browser-pane\" role=\"tabpanel\">\n                <p>Run a query in the <a href=\"../../user-guide/query-data/\" target=\"_blank\">SPARQL editor</a>; the chart pane below the results lets you pick the chart type, the category and one or\n                    more series. Click <span class=\"ac-btn in-primary ap-solid sz-md\">Save</span> underneath the chart pane: two creation forms store the query and the chart as documents. Place\n                    the chart anywhere by adding an <samp>Object</samp> block whose value is the saved chart's URI.</p>\n            </div>\n            <div aria-labelledby=\"from-the-command-line-tab\" class=\"ac-tabpanel\" hidden=\"hidden\" id=\"from-the-command-line-pane\" role=\"tabpanel\">\n                <p>The three resources, in Turtle:</p>\n                <pre>@prefix ldh:    &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .\n        @prefix rdf:    &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; .\n        @prefix sp:     &lt;http://spinrdf.org/sp#&gt; .\n        @prefix spin:   &lt;http://spinrdf.org/spin#&gt; .\n        @prefix dct:    &lt;http://purl.org/dc/terms/&gt; .\n\n        &lt;#category-revenue-query&gt; a sp:Select ;\n            dct:title \"Category revenue\" ;\n            sp:text '''PREFIX schema: &lt;https://schema.org/&gt;\n\n        SELECT ?categoryName (SUM(?sale) AS ?revenue)\n        WHERE {\n            GRAPH ?orderGraph {\n                ?order schema:orderedItem ?orderItem .\n                ?orderItem schema:orderedItem ?product ;\n                           schema:price ?sale .\n            }\n            GRAPH ?productGraph {\n                ?product schema:category ?category .\n            }\n            GRAPH ?categoryGraph {\n                ?category schema:name ?categoryName .\n            }\n        }\n        GROUP BY ?category ?categoryName\n        ORDER BY DESC(?revenue)''' .\n\n        &lt;#category-revenue&gt; a ldh:ResultSetChart ;\n            dct:title \"Revenue by category\" ;\n            spin:query &lt;#category-revenue-query&gt; ;\n            ldh:chartType &lt;https://w3id.org/atomgraph/client#BarChart&gt; ;\n            ldh:categoryVarName \"categoryName\" ;\n            ldh:seriesVarName \"revenue\" .\n\n        &lt;#category-revenue-block&gt; a ldh:Object ;\n            dct:title \"Revenue by category\" ;\n            rdf:value &lt;#category-revenue&gt; .</pre>\n                <p class=\"exhibit-links\">Source: <a href=\"https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories.ttl\" target=\"_blank\">categories.ttl</a> · Live: <a href=\"https://northwind-traders.demo.linkeddatahub.com/categories/\" target=\"_blank\">/categories/</a></p>\n                <p>Add <code>&lt;#category-revenue-block&gt;</code> to the container's block sequence (in the finished app it sits at <code>rdf:_4</code>, after a prose block that introduces it) and <code>PUT</code> the document as before:</p>\n                <pre>ldh put \"${LDH_BASE}categories/\" categories.ttl</pre>\n                <p>Alternatively, <samp>ldh add select</samp> and <samp>ldh add result-set-chart</samp> append the query and the chart to the document one resource at a time.</p>\n            </div>\n        </div>\n    </div>\n    <div>\n        <h2 id=\"view\">A view</h2>\n        <p>Views render query results as document listings instead of plots — the container's own children listing is one.</p>\n        <div class=\"ac-tabs or-horizontal\">\n            <div class=\"ac-tablist sz-md va-line\" role=\"tablist\">\n                <button aria-controls=\"in-the-browser-2-pane\" aria-selected=\"true\" class=\"ac-tab is-on\" id=\"in-the-browser-2-tab\" role=\"tab\" type=\"button\"><span class=\"ac-tab-lbl\">In the browser</span></button>\n                <button aria-controls=\"from-the-command-line-2-pane\" aria-selected=\"false\" class=\"ac-tab\" id=\"from-the-command-line-2-tab\" role=\"tab\" type=\"button\"><span class=\"ac-tab-lbl\">From the command line</span></button>\n            </div>\n            <div aria-labelledby=\"in-the-browser-2-tab\" class=\"ac-tabpanel\" id=\"in-the-browser-2-pane\" role=\"tabpanel\">\n                <p>A view is placed the same way a chart is: an <samp>Object</samp> block whose value is the view's URI. The\n                    <a href=\"../../user-guide/create-data/create-content/#object-blocks\" target=\"_blank\">Object block form</a> walks through it.</p>\n            </div>\n            <div aria-labelledby=\"from-the-command-line-2-tab\" class=\"ac-tabpanel\" hidden=\"hidden\" id=\"from-the-command-line-2-pane\" role=\"tabpanel\">\n                <p>A grid of all categories:</p>\n                <pre>@prefix ldh:    &lt;https://w3id.org/atomgraph/linkeddatahub#&gt; .\n        @prefix sp:     &lt;http://spinrdf.org/sp#&gt; .\n        @prefix spin:   &lt;http://spinrdf.org/spin#&gt; .\n        @prefix ac:     &lt;https://w3id.org/atomgraph/client#&gt; .\n        @prefix dct:    &lt;http://purl.org/dc/terms/&gt; .\n\n        &lt;#select-categories-query&gt; a sp:Select ;\n            dct:title \"Select categories\" ;\n            sp:text '''PREFIX schema: &lt;https://schema.org/&gt;\n\n        SELECT DISTINCT ?category\n        WHERE {\n            GRAPH ?doc {\n                ?category a schema:ProductGroup ;\n                    schema:name ?categoryName .\n            }\n        }\n        ORDER BY ?categoryName''' .\n\n        &lt;#select-categories-view&gt; a ldh:View ;\n            spin:query &lt;#select-categories-query&gt; ;\n            ac:mode &lt;https://w3id.org/atomgraph/client#GridMode&gt; .</pre>\n                <p class=\"exhibit-links\">Source: <a href=\"https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/categories.ttl\" target=\"_blank\">categories.ttl</a> · Live: <a href=\"https://northwind-traders.demo.linkeddatahub.com/categories/\" target=\"_blank\">/categories/</a></p>\n                <p>The view and its query go into the same document, so the same <code>PUT</code> installs them; <samp>ldh add view</samp> is the append alternative.</p>\n            </div>\n        </div>\n    </div>\n    <div>\n        <h2 id=\"result\">What you now see</h2>\n        <p>The Categories container is a small dashboard: a revenue bar chart and a grid of the categories themselves — all live views over the graph, recomputed on\n            each request.</p>\n        <img alt=\"The Categories container with charts and grid view\" src=\"/uploads/1e81ef18ab80553992312ea562ea193751903e0d\"></img>\n    </div>\n    <div>\n        <h2 id=\"how-this-works\">How this works</h2>\n        <ul>\n            <li><a href=\"../../reference/data-model/resources/#charts\" target=\"_blank\">Charts</a> — the query–chart–block chain and the chart vocabulary</li>\n            <li><a href=\"../../reference/data-model/resources/#views\" target=\"_blank\">Views</a> — layout modes, projected variables and faceted search</li>\n        </ul>\n    </div>\n    <p class=\"ldh-body-lg\">Next: <a href=\"../composition/\">Composition</a></p>\n</div>"^^<http://www.w3.org/1999/02/22-rdf-syntax-ns#XMLLiteral> .
