explaingit

microsoft/sanddance

7,125TypeScriptAudience · dataComplexity · 3/5Setup · moderate

TLDR

SandDance is a data visualization tool from Microsoft Research that turns spreadsheet or database rows into animated marks on screen, letting you spot patterns as data smoothly rearranges when you change groupings and sorting.

Mindmap

mindmap
  root((SandDance))
    What it does
      Animated data viz
      Row to mark mapping
      Pattern spotting
    Tech Stack
      TypeScript
      React
      Vega
      WebGL2
    Use Cases
      Explore spreadsheets
      Business analytics
      Web app charts
    Integrations
      VS Code
      Power BI
      Azure Data Studio
      Observable
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Explore a CSV or database dataset by watching rows animate between different groupings and sorting orders in the browser.

USE CASE 2

Add interactive animated data charts to a web app using the modular JavaScript packages such as the React or embed package.

USE CASE 3

Analyze business data inside Power BI using the SandDance plugin for enhanced visual exploration.

USE CASE 4

Browse database query results visually inside Azure Data Studio with the SandDance extension.

Tech stack

TypeScriptJavaScriptReactVegaWebGL2

Getting it running

Difficulty · moderate Time to first run · 30min

Requires a browser with WebGL2 support, animations will not render in older browsers.

In plain English

SandDance is a data visualization tool from Microsoft Research. It takes data, such as rows in a spreadsheet or database, and turns each row into a visible mark on screen. As you change how the data is grouped or sorted, the marks animate smoothly from one arrangement to another, so you can follow along and spot patterns without losing track of where things moved. You can use SandDance in several ways. There is a free web app you can open in a browser. It also ships as an extension for Visual Studio Code (a popular code editor), as a plugin for Power BI (Microsoft's business analytics tool), and as an extension inside Azure Data Studio (a database management app). A third-party data notebook platform called Observable also supports it. For developers who want to add SandDance to their own applications, the project is split into modular JavaScript packages. The core package handles the visualization canvas. A React-compatible version exists for apps built on that framework. An explorer package adds a user interface for interactive data exploration. An embed package makes it easy to drop the whole explorer into any web page using a single HTML element. SandDance was built by a research group inside Microsoft that studies new forms of data visualization. The underlying chart layout relies on Vega, an open-source grammar for building interactive charts. Animations require a browser with WebGL2 support, which most modern browsers have.

Copy-paste prompts

Prompt 1
I have a CSV dataset and want to build an interactive animated visualization using the SandDance React package. Show me how to install @msrvida/sanddance-react and render a basic chart with my data.
Prompt 2
Help me integrate the SandDance embed package into a plain HTML page so I can display a data explorer without a build step.
Prompt 3
I want to add SandDance to my Power BI report. Walk me through installing and configuring the SandDance Power BI visual.
Prompt 4
Show me how to use the @msrvida/sanddance-explorer package to let users interactively explore a JSON dataset in my web app.
Prompt 5
Explain how Vega is used inside SandDance and how I can customize the underlying chart grammar for a custom layout.
Open on GitHub → Explain another repo

← microsoft on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.