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

概述

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

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

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

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

WEB使用和集成

Web使用

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

可以在瀏覽器中支持將TXT、CSV、JSON 格式的數(shù)據(jù)上傳至 SandDance，隨后就能用多樣的方式呈現(xiàn)分析結(jié)果：

Bar圖：

Treemap圖：

Observable中使用

SandDance也支持在Observable網(wǎng)站在線使用：

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

Power BI中使用

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

VS Code和Azure Data Studio插件

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

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

SandDance本地原生JS使用

除了使用各種開放源代碼庫之外，該版本還包含可在本機JavaScript或React應用程序中工作的幾個組件。借助這種新的體系結(jié)構(gòu)，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" 

然后通過一下語句調(diào)用：

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代碼調(diào)用：

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可視化畫布，用于啟用數(shù)據(jù)瀏覽。

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

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

通過下面語句調(diào)用：

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);