SandDance是微軟研究院很受歡迎的數據可視化工具，今年年早些時候微軟已經將該工具開源，并在GitHub上發布。今天蟲蟲就和大家就一起來學習一下該工具。

概述

SandDance是微軟研究院于2016年推出的數據可視化免費Web應用。SandDance由微軟研究院的可視化和交互式數據分析(VIDA)小組創建，該小組專注于以人為中心的數據處理方法，探索數據可視化，沉浸式分析和對機器學習模型的理解等領域。

SandDance通過提供了觸控式的界面，實現使用者和3D信息圖表進行互動，更加特別的是可以以不同的角度不同的方式呈現分析結果，使用戶可以通過可視化的方式更加直觀的接受數據信息。基于易于理解的視圖，SandDance可以幫助我們找到數據中潛在的特征，進而幫助我們通過講述數據故事，基于證據構建案例，檢驗假設，深入了解表面數據，用于支持決策或將數據關聯到更廣泛的現實場景中。

新開源版本的SandDance為了實現模塊化，已經從頭重寫，實現了可擴展性，支持嵌入到自定義應用程序中，并與其他JavaScript工具鏈集成。

SandDance使用單元可視化，在數據庫中的行與屏幕上的標記之間應用一對一映射。視圖之間的平滑動畫過渡可幫助我們在與數據交互時保持上下文。

WEB使用和集成

Web使用

這是SandDance最初推出時的形態，可以通過任意瀏覽器訪問其應用主頁(sanddance.js.org/app)在線使用。

可以在瀏覽器中支持將TXT、CSV、JSON 格式的數據上傳至 SandDance，隨后就能用多樣的方式呈現分析結果：

Bar圖：

Treemap圖：

Observable中使用

SandDance也支持在Observable網站在線使用：

SandDance支持不少可視化選項可供選擇，分別可以選擇 3D 分布圖、分類圖表、柱狀圖等，也可以選擇和隔離某個項目，按照屬性分類，以及通過不同的顏色來進行區分等。

Power BI中使用

在AppSource)上有一個早期版本的SandDance，名為" SandDance"。 新開源后，以 SandDance 2019發布到了AppSource。

VS Code和Azure Data Studio插件

除了原始JavaScript組件外，SandDance還可以作為Visual Studio Code和Azure Data Studio的擴展，并且也已作為Power BI自定義Visual重新發布。

Azure Data Studio預覽版中已經集成，在ADS中可以分析.csv或.tsv文件，也包括SQL Server 2019 Big Data Cluster的HDFS文件和SQL Server SQL查詢結果。

SandDance本地原生JS使用

除了使用各種開放源代碼庫之外，該版本還包含可在本機JavaScript或React應用程序中工作的幾個組件。借助這種新的體系結構，SandDance將具有更大的可擴展性，能夠啟用新的圖表類型，圖層和交互功能，并將其并入新的垂直應用程序中。SandDance提供了一些JavaScript組件，可以方便的使用

sanddance-SandDance

可視化核心畫布組件。

通過script標簽引入該sanddance組件，然后就通過以下方式使用：

<script src=" vega.js" charset="utf-8"></script> 
<script src="deckgl.min.js"></script> 
<script src="TODO sanddance.js"></script> 
SandDance.use(vega, deck, deck, luma); 

通過Node.js使用：

在項目的package.json文件中添加以下依賴庫，并通過npm install安裝

"@deck.gl/core": "6.4", 
"@deck.gl/layers": "6.4", 
"luma.gl": "6.4", 
"sanddance-react": "*", 
"vega-lib": "^4.3.0" 

然后通過一下語句調用：

import * as deck from '@deck.gl/core'; 
import * as layers from '@deck.gl/layers'; 
import * as luma from 'luma.gl'; 
import * as vega from 'vega-lib'; 
import * as SandDance from '@msrvida/sanddance'; 
SandDance.use(vega, deck, layers, luma); 

React應用集成sanddance-react

sanddance-react用于基于React的應用程序的核心SandDance可視化畫布。

在本地react工程的package.json文件中添加以下依賴庫

"@deck.gl/core": "6.4", 
"@deck.gl/layers": "6.4", 
"luma.gl": "6.4", 
"sanddance-react": "*", 
"vega-lib": "^4.3.0" 

然后通過以下JS代碼調用：

import * as deck from '@deck.gl/core'; 
import * as layers from '@deck.gl/layers'; 
import * as luma from 'luma.gl'; 
import * as vega from 'vega-lib'; 
import { SandDance, SandDanceReact } from '@msrvida/sanddance-react'; 
SandDance.use(vega, deck, layers, luma); 

sanddance-explorer

具有UI的核心SandDance可視化畫布，用于啟用數據瀏覽。

在本地工程的package.json文件中添加以下依賴庫

"@deck.gl/core": "6.4", 
"@deck.gl/layers": "6.4", 
"luma.gl": "6.4", 
"sanddance-explorer": "*", 
"vega-lib": "^4.3.0" 

通過下面語句調用：

import * as deck from '@deck.gl/core'; 
import * as layers from '@deck.gl/layers'; 
import * as luma from 'luma.gl'; 
import * as vega from 'vega-lib'; 
import { Explorer, SandDance } from '@msrvida/sanddance-explorer'; 
SandDance.use(vega, deck, layers, luma);