# microsoft/sanddance architecture

> Architecture diagram of the GitHub repository microsoft/sanddance, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/microsoft/sanddance
- Repository: https://github.com/microsoft/sanddance

## Overview

SandDance is a modular data-exploration and unit-visualization product. Its principal workflow is to load or select data, infer column metadata, configure an insight through Explorer, and render and interact with animated visualizations; users can also export data and save or share snapshots. The repository provides web, embeddable, React, Power BI, Azure Data Studio, and VS Code entry points, alongside chart recommendation and search. Relationships below are limited to README statements and shown source references; several adapter and rendering internals were not sampled.

Main entry points: [`packages/sanddance-explorer/src/explorer.tsx`](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-explorer/src/explorer.tsx) (Explorer UI), [`packages/sanddance-app/src/sanddanceApp.tsx`](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-app/src/sanddanceApp.tsx) (Web app), [`packages/sanddance-explorer/src/dialogs/search.tsx`](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-explorer/src/dialogs/search.tsx) (Search dialog), [`packages/sanddance-specs/src/specBuilder.ts`](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-specs/src/specBuilder.ts) (Visualization specs)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Product entry points"]
  node_webapp["Web app<br/>[sanddanceApp.tsx]"]
  node_embed["Iframe embed<br/>[sanddance-embed.ts]"]
  node_powerbi["Power BI visual<br/>[app.ts]"]
  node_azdata["Azure Data Studio<br/>[extension.ts]"]
  node_vscode["VS Code extension<br/>[extension.ts]"]
end

subgraph group_explore["Data exploration"]
  node_picker["Data source picker"]
  node_explorer["Explorer UI<br/>[explorer.tsx]"]
  node_searchdialog["Search dialog<br/>[search.tsx]"]
  node_searchterms["Search controls<br/>[searchTerm.tsx]"]
  node_snapshots["Snapshots<br/>[snapshots.tsx]"]
end

subgraph group_visualize["Visualization engine"]
  node_specs["Visualization specs<br/>[specBuilder.ts]"]
  node_canvas["Visualization canvas<br/>[viewer.ts]"]
  node_morphcharts["MorphCharts renderer<br/>[render.ts]"]
end

subgraph group_support["Analysis support"]
  node_inference["Column inference<br/>[inference.ts]"]
  node_datainference["Data statistics<br/>[inference.ts]"]
  node_recommender["Chart recommender<br/>[recommender.ts]"]
end

node_user(("User"))

node_user -->|"explores data"| node_webapp
node_webapp -->|"selects source"| node_picker
node_webapp -->|"hosts explorer"| node_explorer
node_webapp -->|"uses snapshots"| node_snapshots
node_powerbi -->|"hosts explorer"| node_explorer
node_explorer -->|"opens search"| node_searchdialog
node_searchdialog -->|"uses controls"| node_searchterms
node_explorer -.->|"infers columns"| node_inference
node_inference -->|"delegates inference"| node_datainference
node_explorer -.->|"requests suggestions"| node_recommender
node_explorer -.->|"builds visualization"| node_specs
node_specs -->|"specifies views"| node_canvas
node_canvas -->|"renders charts"| node_morphcharts
node_user -->|"embeds explorer"| node_embed
node_user -->|"uses extension"| node_azdata
node_user -->|"uses extension"| node_vscode

click node_webapp "https://github.com/microsoft/sanddance/blob/main/packages/sanddance-app/src/sanddanceApp.tsx"
click node_embed "https://github.com/microsoft/sanddance/blob/main/packages/sanddance-embed/src/sanddance-embed.ts"
click node_powerbi "https://github.com/microsoft/sanddance/blob/main/packages/powerbi/src/app.ts"
click node_azdata "https://github.com/microsoft/sanddance/blob/main/extensions/azdata-sanddance/src/extension.ts"
click node_vscode "https://github.com/microsoft/sanddance/blob/main/extensions/vscode-sanddance/src/extension.ts"
click node_picker "https://github.com/microsoft/sanddance/blob/main/packages/sanddance-app/src/dataSourcePicker.tsx"
click node_explorer "https://github.com/microsoft/sanddance/blob/main/packages/sanddance-explorer/src/explorer.tsx"
click node_searchdialog "https://github.com/microsoft/sanddance/blob/main/packages/sanddance-explorer/src/dialogs/search.tsx"
click node_searchterms "https://github.com/microsoft/sanddance/blob/main/packages/sanddance-explorer/src/controls/searchTerm.tsx"
click node_snapshots "https://github.com/microsoft/sanddance/blob/main/packages/sanddance-app/src/snapshots.tsx"
click node_inference "https://github.com/microsoft/sanddance/blob/main/packages/sanddance-specs/src/inference.ts"
click node_datainference "https://github.com/microsoft/sanddance/blob/main/packages/data-inference/src/inference.ts"
click node_recommender "https://github.com/microsoft/sanddance/blob/main/packages/chart-recommender/src/recommender.ts"
click node_specs "https://github.com/microsoft/sanddance/blob/main/packages/sanddance-specs/src/specBuilder.ts"
click node_canvas "https://github.com/microsoft/sanddance/blob/main/packages/sanddance/src/viewer.ts"
click node_morphcharts "https://github.com/microsoft/sanddance/blob/main/packages/vega-morphcharts/src/morphcharts/render.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_webapp,node_embed,node_powerbi,node_azdata,node_vscode,node_user toneBlue
class node_picker,node_explorer,node_searchdialog,node_searchterms,node_snapshots toneAmber
class node_specs,node_canvas,node_morphcharts toneMint
class node_inference,node_datainference,node_recommender toneRose
```

## Components

### Product entry points

- [Web app](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-app/src/sanddanceApp.tsx): `packages/sanddance-app/src/sanddanceApp.tsx`
- [Iframe embed](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-embed/src/sanddance-embed.ts): `packages/sanddance-embed/src/sanddance-embed.ts`
- [Power BI visual](https://github.com/microsoft/sanddance/blob/main/packages/powerbi/src/app.ts): `packages/powerbi/src/app.ts`
- [Azure Data Studio](https://github.com/microsoft/sanddance/blob/main/extensions/azdata-sanddance/src/extension.ts): `extensions/azdata-sanddance/src/extension.ts`
- [VS Code extension](https://github.com/microsoft/sanddance/blob/main/extensions/vscode-sanddance/src/extension.ts): `extensions/vscode-sanddance/src/extension.ts`

### Data exploration

- [Data source picker](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-app/src/dataSourcePicker.tsx): `packages/sanddance-app/src/dataSourcePicker.tsx`
- [Explorer UI](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-explorer/src/explorer.tsx): `packages/sanddance-explorer/src/explorer.tsx`
- [Search dialog](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-explorer/src/dialogs/search.tsx): `packages/sanddance-explorer/src/dialogs/search.tsx`
- [Search controls](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-explorer/src/controls/searchTerm.tsx): `packages/sanddance-explorer/src/controls/searchTerm.tsx`
- [Snapshots](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-app/src/snapshots.tsx): `packages/sanddance-app/src/snapshots.tsx`

### Visualization engine

- [Visualization specs](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-specs/src/specBuilder.ts): `packages/sanddance-specs/src/specBuilder.ts`
- [Visualization canvas](https://github.com/microsoft/sanddance/blob/main/packages/sanddance/src/viewer.ts): `packages/sanddance/src/viewer.ts`
- [MorphCharts renderer](https://github.com/microsoft/sanddance/blob/main/packages/vega-morphcharts/src/morphcharts/render.ts): `packages/vega-morphcharts/src/morphcharts/render.ts`

### Analysis support

- [Column inference](https://github.com/microsoft/sanddance/blob/main/packages/sanddance-specs/src/inference.ts): `packages/sanddance-specs/src/inference.ts`
- [Data statistics](https://github.com/microsoft/sanddance/blob/main/packages/data-inference/src/inference.ts): `packages/data-inference/src/inference.ts`
- [Chart recommender](https://github.com/microsoft/sanddance/blob/main/packages/chart-recommender/src/recommender.ts): `packages/chart-recommender/src/recommender.ts`

### Other components

- **User**

## Connections

- User → Web app: explores data (evidence: `README.md`)
- Web app → Data source picker: selects source (evidence: `packages/sanddance-app/src/sanddanceApp.tsx`)
- Web app → Explorer UI: hosts explorer (evidence: `packages/sanddance-app/src/sanddanceApp.tsx`)
- Web app → Snapshots: uses snapshots (evidence: `packages/sanddance-app/src/sanddanceApp.tsx`)
- Power BI visual → Explorer UI: hosts explorer (evidence: `packages/powerbi/src/app.ts`)
- Explorer UI → Search dialog: opens search (evidence: `packages/sanddance-explorer/src/dialogs/search.tsx`)
- Search dialog → Search controls: uses controls (evidence: `packages/sanddance-explorer/src/dialogs/search.tsx`)
- Explorer UI → Column inference: infers columns
- Column inference → Data statistics: delegates inference (evidence: `packages/sanddance-specs/src/inference.ts`)
- Explorer UI → Chart recommender: requests suggestions
- Explorer UI → Visualization specs: builds visualization
- Visualization specs → Visualization canvas: specifies views (evidence: `README.md`)
- Visualization canvas → MorphCharts renderer: renders charts
- User → Iframe embed: embeds explorer (evidence: `README.md`)
- User → Azure Data Studio: uses extension (evidence: `README.md`)
- User → VS Code extension: uses extension (evidence: `README.md`)