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

概述

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

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

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

SandDance使用單元可視化，在數(shù)據(jù)庫(kù)中的行與屏幕上的標(biāo)記之間應(yīng)用一對(duì)一映射。視圖之間的平滑動(dòng)畫(huà)過(guò)渡可幫助我們?cè)谂c數(shù)據(jù)交互時(shí)保持上下文。

WEB使用和集成

Web使用

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

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

Bar圖：

Treemap圖：

Observable中使用

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

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

Power BI中使用

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

VS Code和Azure Data Studio插件

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

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

SandDance本地原生JS使用

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

sanddance-SandDance

可視化核心畫(huà)布組件。

通過(guò)script標(biāo)簽引入該sanddance組件，然后就通過(guò)以下方式使用：

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

通過(guò)Node.js使用：

在項(xiàng)目的package.json文件中添加以下依賴(lài)庫(kù)，并通過(guò)npm install安裝

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

然后通過(guò)一下語(yǔ)句調(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應(yīng)用集成sanddance-react

sanddance-react用于基于React的應(yīng)用程序的核心SandDance可視化畫(huà)布。

在本地react工程的package.json文件中添加以下依賴(lài)庫(kù)

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

然后通過(guò)以下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可視化畫(huà)布，用于啟用數(shù)據(jù)瀏覽。

在本地工程的package.json文件中添加以下依賴(lài)庫(kù)

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

通過(guò)下面語(yǔ)句調(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);