Components Library Operations DataVizInspector

DataVizInspector

Chart QA inspector for source, rows, units, alt text, and legend readiness.

Live demo

Chart QA

Data viz inspector

100 ready

Catalogue readiness trend

line · 12 rows

Pass Title Reader needs a visible chart title.
Pass Rows Charts need at least one data row.
Pass Source Source metadata should travel with the chart.
Pass Alt text Visuals need accessible summaries.
Pass Units Axes and measures should expose units.
Pass Legend Grouped visual encodings need a visible legend.

Implementation

<script lang="ts">
  import DataVizInspector from '$lib/components/DataVizInspector.svelte';
</script>

<DataVizInspector {specs} />

DataVizInspector scores chart specs before they ship. It keeps source, alt text, units, row count, and legend checks visible so charts do not look finished while missing reader-critical context.

Logic explainer

What Does It Do? (Plain English)

DataVizInspector scores chart specifications against practical QA checks: title, rows, source, alt text, units, and legend visibility.

How It Works (Pseudo-Code)

receive chart specs
choose active chart
run chart QA checks
calculate score and verdict
render pass/review checklist

Props Reference

Prop	Type	Default	Description
`specs`	`DataVizSpec[]`	Required	Chart specs to inspect.
`title`	`string`	`"Data viz inspector"`	Heading above the inspector.

Dependencies

No external dependencies.

API

Prop	Type	Description
`specs`	`DataVizSpec[]`	Chart specs to score.
`title`	`string`	Inspector heading.

Installation

cp src/lib/components/DataVizInspector.svelte ./src/lib/components/

Dependencies

Svelte 5+
Zero external dependencies

For your agent

01Use this before shipping chart demos; a visual without source, units, or alt text should stay in review.

# Install DataVizInspector into my Svelte 5 project

Chart QA inspector for source, rows, units, alt text, and legend readiness.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/DataVizInspector.svelte
to src/lib/components/DataVizInspector.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/datavizinspector/+page.svelte to src/routes/datavizinspector/+page.svelte.

## 5. Usage
```svelte
<script lang="ts">
  import DataVizInspector from '$lib/components/DataVizInspector.svelte';
</script>

<DataVizInspector {specs} />
```