Semantic Grammar of Graphics — Chart Gallery

Every chart below is one <slc-chart> spec: a mark plus channel-to-field encodings over SPARQL results from the public Solid vitals container. Marks follow the Vega-Lite example gallery; shaping is SPARQL, channel types are inferred from RDF datatypes. No JavaScript.

1. Line chart (mark: line)

Vega-Lite "Line Chart" — temporal x, quantitative y.

2. Area chart (mark: area)

Vega-Lite "Area Chart" — same encodings, filled mark.

3. Pie chart (mark: arc)

Vega-Lite "Pie Chart" — theta encodes the count per value band, color the category. Banding is done in SPARQL, not a chart-side calc language.

4. Heatmap (mark: rect)

Vega-Lite "2D Histogram Heatmap" — day × band, cell color encodes the observation count.

5. Box plot (mark: boxplot)

Vega-Lite "Box Plot with Min/Max Whiskers" — value distribution per day.

6. Colored scatterplot (mark: point + color channel + hover detail)

Vega-Lite "Colored Scatterplot" — nominal color channel on points. Hover a point: the tooltip shows the row's fields plus the result of the <slc-detail> SPARQL query, run against the in-memory store with ?this bound to the hovered observation.

SELECT ?p ?o WHERE { ?this ?p ?o }

7. Composition (hconcat)

Vega-Lite "Horizontal Concatenation" — one composed spec, two charts over the same source, laid out by the outer <slc-chart>.

8. Geospatial map (mark: geo)

Vega-Lite "Dot Map" — latitude/longitude channels projected with d3.geoNaturalEarth1 over a GeoJSON basemap. Coordinates follow the WGS84 vocabulary shape (geo:lat / geo:long); here supplied inline via data-json since the vitals pod carries no location data.

9. Add an observation (write form, LDP POST)

<slc-form> writes RDF to the pod: form fields fill the {placeholders} of a Turtle template, posted to the container with the solid-auth session (Slug: observation-{$uuid}). An endpoint attribute would switch the same form to SPARQL Update (INSERT DATA). After a successful save, refresh-target="series" re-runs the section-1 query so the new point appears in the charts. Without login the form reports "Sign in required."

10. Linked selection + shared scale (composition grammar)

Click a bar (shift-click extends): the <slc-select> emitter publishes the selected band(s) on slc-selection:bandSel, and the scatterplot's <slc-filter mode="filter"> drops the other rows. Both charts reference <slc-scale id="sharedValue">, so their y axes share one unioned domain.

11. True layer overlay (one SVG, shared axes)

<slc-layer> renders its children into a single SVG with one shared axis pair: an area layer under a point layer, both fed by the section-1 query.

12. Facet (data-driven panels)

<slc-facet by="band"> partitions the section-6 rows by band and renders one bar panel per value; the template's <slc-scale> ref gives all panels a comparable y axis.

13. Agent-assisted query configuration

<slc-agent-query-configurator> turns a natural-language intent into the SPARQL for a chart: it POSTs the intent, the Solid seed URLs, and the target chart's shape (read via chart-id) to the service named by agent-endpoint, then writes the returned SELECT into the <wasm-query> named by target-query-id (mode="auto" also reruns it). A host app must supply agent-endpoint — an HTTP service (typically LLM-backed) that returns { sparql, requiresTraversal, seeds, shapeSummary, explanation, warnings }; never call an LLM provider directly from browser JS. Here a small mock (script below) answers /mock-agent so the gallery stays standalone.

14. Annotations and signature charts (meta information)

heading and caption describe the view; an <slc-annotation> child marks a reference value. The second chart repeats the same source as an axis-free signature line, small enough for a key-figure card.

100