SemText

Reference · SemText · Data & tables

<sem-data-visualizer>

SemText element

You put one or more sem-data-source children inside, plus any joins and queries. The container owns the shared state: which data set and query are active. With JavaScript off it shows the data as plain tables.

The container that holds data sets, joins, and queries, and shows the results. You put one or more sem-data-source children inside, plus any joins and queries. The container owns the shared state: which data set and query are active. With JavaScript off it shows the data as plain tables. optional — names the container for the modal deep link (`#dv=<visualizer-id>`). The copy-link chrome prefers the container's id; with none it falls back to the container's sole named source (`#bucket=<name>`), and a container with neither mints no copy-link button. per the global attribute catalog (conventions.md §2) per the global attribute catalog (conventions.md §2)

Children

  • <sem-data-source>Children: one or more `<sem-data-source>` (each a named data bucket); optional `<sem-data-join>` and `<sem-data-query>` declaration children (phase 5).
  • <sem-data-join>Children: one or more `<sem-data-source>` (each a named data bucket); optional `<sem-data-join>` and `<sem-data-query>` declaration children (phase 5).
  • <sem-data-query>Children: one or more `<sem-data-source>` (each a named data bucket); optional `<sem-data-join>` and `<sem-data-query>` declaration children (phase 5).

Example

sem-data-visualizer.html
source
1 <sem-data-visualizer id="dv-tokens">
2 <sem-data-source data-name="Token lifetimes" data-format="table"
3 data-views="core=token,max-uses; all=*" data-view="all">
4 | Token | Max uses | Lifetime | Rotates | Since |
5 | :---- | -------: | :------- | :------ | :--------- |
6 | access | 200 | 15 min | true | 2026-01-05 |
7 | id | 1000 | 1 hour | false | 2026-02-14 |
8 </sem-data-source>
9 </sem-data-visualizer>
render

Live render boots with JavaScript — the authored source is alongside.

variant: two buckets, one tools row

The container is the enhance unit: each direct `sem-data-source` renders its own captioned table with typed sort, and the container contributes one tools row above them all. With no `sem-data-query` child the buckets render as authored and nothing else is added.

variant: two buckets, one tools row
sem-data-visualizer-multi-source.html
source
1 <sem-data-visualizer id="dv-fleet">
2 <sem-data-source data-name="services" data-format="table">
3 | name | port | ready |
4 | :------ | ---: | :---- |
5 | api | 8443 | true |
6 | web | 8080 | true |
7 | metrics | 9090 | false |
8 </sem-data-source>
9 <sem-data-source data-name="regions" data-format="table">
10 | zone | latency_ms |
11 | :-------- | ---------: |
12 | eu-west-1 | 24 |
13 | us-east-1 | 81 |
14 </sem-data-source>
15 </sem-data-visualizer>
render

Live render boots with JavaScript — the authored source is alongside.

variant: query chrome + results

A `sem-data-query` child turns the container into a query workspace: an editable default query, a `Run` control and a row-count status, with the results table beneath. The declaration stays the document's record of the default query — the chrome is generated around it, never a replacement for it.

variant: query chrome + results
sem-data-visualizer-query-chrome.html
source
1 <sem-data-visualizer id="dv-services">
2 <sem-data-source data-name="services" data-format="table">
3 | name | port | ready | owner |
4 | :------ | ---: | :---- | :---- |
5 | api | 8443 | true | alice |
6 | web | 8080 | true | |
7 | metrics | 9090 | false | bob |
8 </sem-data-source>
9 <sem-data-query>SELECT * FROM services ORDER BY port DESC</sem-data-query>
10 </sem-data-visualizer>
render

Live render boots with JavaScript — the authored source is alongside.

variant: join bucket + query

Shared container state: a `sem-data-join` materializes an extra bucket from two sources and the query then addresses it by name. All three declarations live inside the one container, which is what makes the derived bucket addressable at all.

variant: join bucket + query
sem-data-visualizer-join-and-query.html
source
1 <sem-data-visualizer id="dv-orders">
2 <sem-data-source data-name="users" data-format="table">
3 | user-id | name |
4 | :------ | :---- |
5 | 1 | alice |
6 | 2 | bob |
7 | 3 | carol |
8 </sem-data-source>
9 <sem-data-source data-name="orders" data-format="table">
10 | user-id | total |
11 | :------ | ----: |
12 | 1 | 120 |
13 | 1 | 80 |
14 | 3 | 200 |
15 </sem-data-source>
16 <sem-data-join name="user-orders" left="users" right="orders" on="user-id"></sem-data-join>
17 <sem-data-query>SELECT name, total FROM user-orders ORDER BY total DESC</sem-data-query>
18 </sem-data-visualizer>
render

Live render boots with JavaScript — the authored source is alongside.

variant: authoring error — inline payload with source=

An inline body and a `source` attribute together are contradictory declarations. The source renders a `role=alert` naming both and keeps its place in the container; the pair is never silently resolved to one or the other.

variant: authoring error — inline payload with source=
sem-data-visualizer-inline-plus-source.html
source
1 <sem-data-visualizer id="dv-bad">
2 <sem-data-source data-name="broken" data-format="table" source="data/services.csv">
3 | name | port |
4 | :--- | ---: |
5 | api | 8443 |
6 </sem-data-source>
7 </sem-data-visualizer>
render

Live render boots with JavaScript — the authored source is alongside.

Source: spec/schema/sem-data-visualizer.md