Server — Dashboards — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/server/dashboards

Dashboard Gallery

Pre-built dashboards composed with renderDashboard(). Each dashboard is a single function call that produces a self-contained SVG — no browser, no React tree, no layout engine. Grid positioning, titles, and theme propagation are handled automatically.

Executive Summary

theme: bi-tool

Classic 2x2 business dashboard with revenue trend, regional breakdown, market share, and correlation analysis.

Engineering Metrics

theme: carbon

Infrastructure monitoring dashboard with request flow, latency distribution, and service health.

Editorial Report

theme: tufte

Data journalism style with Tufte aesthetics — minimal chrome, annotations tell the story.

Dark Mode Operations

theme: dark

Operations dashboard with dark theme — designed for NOC displays and ambient monitoring.

Creating your own dashboard

import { renderDashboard } from "semiotic/server" const svg = renderDashboard([ { component: "LineChart", colSpan: 2, props: { data, xAccessor: "time", yAccessor: "value", title: "Trend" } }, { component: "BarChart", props: { data: byRegion, categoryAccessor: "region", valueAccessor: "total" } }, { component: "PieChart", props: { data: bySegment, categoryAccessor: "segment", valueAccessor: "share" } }, ], { title: "My Dashboard", theme: "dark", width: 1200, layout: { columns: 2, gap: 16 }, })