Agentic Visualization Experiment

Data visualization occupies a curious position in software engineering: universally acknowledged as critical, yet implemented through libraries that demand extensive configuration and offer limitless ways to violate established principles. D3, Chart.js, and similar tools provide mechanisms but not judgment—developers must manually enforce Tufte's data-ink ratio, choose appropriate scales, and compose multiple views into coherent dashboards.

This research asks: What if components could embody expertise?

We propose "agentic visualization"—components that don't just render data but understand how to reveal it. These components automatically:

• Scale multiple data series to shared ranges for valid comparison
• Calculate proportions and format percentages without manual intervention
• Choose visual hierarchies (color, opacity, stroke weight) based on data relationships
• Hide labels when space is insufficient, preventing visual clutter
• Compose into higher-order patterns (small multiples, integrated dashboards)

The intellectual foundation emerged through applying Heidegger's hermeneutic circle to the question "what visualizations can we now create?" This interpretive approach revealed that we don't create visualizations—we reveal them through components that understand both data and design principles.

Contributions: (1) A theoretical framework for agentic visualization components, (2) Eight implemented components embodying Tufte's principles, (3) Demonstration of data source flexibility through sample/live toggle, (4) Evidence that design expertise can be encoded into autonomous software.

Traditional software development follows specification → implementation → testing. This research instead employed Heidegger's hermeneutic circle—an interpretive method where understanding emerges through iterative engagement with the whole and its parts.

2.1 Hermeneutic Process

Beginning with four base components (Sparkline, MetricCard, HighDensityTable, DailyGrid), we asked: "What visualizations can we now create?" This question revealed missing compositional possibilities:

• ComparativeSparklines: Multiple series needed shared scaling for valid comparison
• DistributionBar: Proportional relationships were invisible in tables
• TrendIndicator: Direction and magnitude of change required semantic encoding
• HourlyHeatmap: Temporal patterns demanded small multiples grid

Each new component revealed further compositional possibilities—the hermeneutic circle in action. This process demonstrated that visualization needs emerge from data relationships, not predefined chart types.

2.2 Encoding Tufte's Principles

Edward Tufte's "The Visual Display of Quantitative Information" (1983) establishes six principles:

1. Maximize data-ink ratio (remove all decoration)
2. Show data variation, not design variation
3. Use small multiples for comparison across dimensions
4. Integrate text and graphics (no separate legends)
5. Display high-density information (maximize insights per unit area)
6. Remove chartjunk (no 3D, gradients, heavy borders)

Rather than documenting these as guidelines, we implemented them as component constraints. For example, ComparativeSparklines cannot render without automatic shared scaling—violating Tufte's "valid comparison" principle is structurally impossible.

2.3 Agentic Decision-Making

Components make autonomous decisions through reactive calculations:

• Automatic scaling: $: range = max - min || 1
• Proportion calculation: $: percentage = (count / total) * 100
• Contextual formatting: Labels only appear when segment width >= 8%
• Semantic colors: Green/red/gray based on direction, not manual assignment

This transforms developers from "chart configurers" to "data providers"—the component handles visualization intelligence.

3.1 Technical Architecture

The @create-something/tufte package is implemented in SvelteKit 5 with TypeScript, distributed as an npm package. Components use:

• Svelte reactive statements ($:) for autonomous calculations
• SVG path generation for resolution-independent graphics
• Tailwind CSS with CREATE SOMETHING design tokens
• TypeScript interfaces for type-safe data contracts

3.2 Component Examples

3.3 Data Source Flexibility

To demonstrate component flexibility, this page implements a Sample/Live toggle. Components receive data through props—they don't know or care whether it's controlled samples or live analytics from Cloudflare D1. This proves the components are truly autonomous: they work with any data source that matches the interface.