Dashboard Container Types

Vega-Lite

Declarative grammar of interactive graphics. Perfect for standard charts: bar, line, area, scatter, heatmap, and more. Vega-Lite specifications are concise JSON objects that compile to full Vega specs.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "mark": "bar",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "field": "value", "type": "quantitative" }
  },
  "data": {
    "values": [
      { "category": "A", "value": 28 },
      { "category": "B", "value": 55 },
      { "category": "C", "value": 43 }
    ]
  }
}

Vega

Full Vega specification for advanced custom visualizations. More verbose than Vega-Lite but offers complete control over scales, axes, marks, signals, and interactions.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400, "height": 200,
  "data": [{ "name": "table", "values": [
    {"x": 1, "y": 28}, {"x": 2, "y": 55}
  ]}],
  "scales": [
    { "name": "x", "type": "band", "domain": {"data":"table","field":"x"}, "range": "width" },
    { "name": "y", "type": "linear", "domain": {"data":"table","field":"y"}, "range": "height" }
  ],
  "marks": [{
    "type": "rect",
    "from": {"data": "table"},
    "encode": {
      "enter": {
        "x": {"scale":"x","field":"x"}, "width": {"scale":"x","band":1},
        "y": {"scale":"y","field":"y"}, "y2": {"scale":"y","value":0}
      }
    }
  }]
}

D3.js

Complete D3 support for fully custom, code-driven visualizations. Write JavaScript that uses D3 to manipulate SVG or Canvas. Best for unique or highly interactive charts.

// D3 container receives `svg` (selection) and `width`/`height`
const data = [28, 55, 43, 91, 81];
const x = d3.scaleBand()
  .domain(d3.range(data.length))
  .range([0, width]).padding(0.2);
const y = d3.scaleLinear()
  .domain([0, d3.max(data)]).range([height, 0]);

svg.selectAll("rect")
  .data(data).enter().append("rect")
  .attr("x", (d, i) => x(i))
  .attr("y", d => y(d))
  .attr("width", x.bandwidth())
  .attr("height", d => height - y(d))
  .attr("fill", "#00b8e6");

Plotly

Interactive charts with built-in zoom, pan, hover, and export. Supports 3D charts, statistical plots, maps, and scientific visualizations.

{
  "data": [{
    "x": ["Jan", "Feb", "Mar", "Apr"],
    "y": [10, 15, 13, 17],
    "type": "scatter",
    "mode": "lines+markers",
    "marker": { "color": "#00b8e6" }
  }],
  "layout": {
    "title": "Monthly Trend",
    "xaxis": { "title": "Month" },
    "yaxis": { "title": "Value" }
  }
}

Observable Plot

Concise, expressive charting library from Observable. Great for quick data exploration with sensible defaults and a functional API.

Plot.plot({
  marks: [
    Plot.barY([
      {x: "A", y: 28}, {x: "B", y: 55}, {x: "C", y: 43}
    ], {x: "x", y: "y", fill: "#00b8e6"})
  ]
})

Mermaid

Text-based diagramming: flowcharts, sequence diagrams, Gantt charts, ER diagrams, class diagrams, state diagrams, and more.

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Mindmap (Markmap)

Interactive mind maps generated from Markdown headings. Great for brainstorming, hierarchical outlines, and knowledge maps.

# Project Plan
## Phase 1
### Research
### Requirements
## Phase 2
### Design
### Prototyping
## Phase 3
### Development
### Testing

Text/HTML (KaTeX)

Rich text and HTML content with math formula support via KaTeX. Use for annotations, explanations, or any HTML content alongside your visualizations.

<h3>Quadratic Formula</h3>
<p>The solutions of <em>ax<sup>2</sup> + bx + c = 0</em> are:</p>
$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

<p>Inline math: $E = mc^2$</p>

LaTeX (MathJax)

Full LaTeX document rendering powered by MathJax. Ideal for complex mathematical notation, academic content, and scientific papers.

\begin{align}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \epsilon_0 \frac{\partial \mathbf{E}}{\partial t}
\end{align}

Function Plot

Plot mathematical functions interactively. Supports implicit, parametric, and polar functions with zoom and pan.

{
  "data": [
    { "fn": "sin(x)", "color": "#00b8e6" },
    { "fn": "cos(x)", "color": "#5eaaa8" },
    { "fn": "x^2 / 10", "color": "#e06050" }
  ],
  "xAxis": { "domain": [-6.28, 6.28] },
  "yAxis": { "domain": [-2, 2] }
}

CSV

Import and display CSV data directly. Auto-detects columns and renders as a sortable table. Can also auto-generate visualizations from CSV data.

name,sales,region
Alice,45000,North
Bob,52000,South
Carol,38000,East
Dave,61000,West

Excel

Import .xlsx and .xls files. Renders as an interactive spreadsheet with multiple sheet support. Data can be extracted and used for visualizations.

Image

Display images with optional captions, borders, and overlays. Supports PNG, JPG, SVG, GIF, and WebP formats.

{
  "src": "https://example.com/chart.png",
  "alt": "Sales Overview",
  "caption": "Figure 1: Q4 Sales Distribution"
}

PDF

Embed PDF documents directly in your dashboard. Includes page navigation, zoom, and scrolling.

{
  "src": "/path/to/document.pdf",
  "page": 1,
  "zoom": 1.0
}

Iframe

Embed external web content, maps, videos, or web applications. Sandboxed for security.

{
  "src": "https://example.com/embed",
  "width": "100%",
  "height": "400px",
  "sandbox": "allow-scripts allow-same-origin"
}

Table

Sortable, filterable, paginated data tables. Provide data as JSON arrays or objects.

{
  "columns": ["Name", "Department", "Revenue"],
  "rows": [
    ["Alice", "Sales", "$45,000"],
    ["Bob", "Marketing", "$52,000"],
    ["Carol", "Engineering", "$38,000"]
  ],
  "sortable": true,
  "filterable": true,
  "pageSize": 25
}