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

微軟數(shù)據(jù)可視化工具SandDance已經(jīng)開源

概述

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

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

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

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

WEB使用和集成

Web使用

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

微軟數(shù)據(jù)可視化工具SandDance已經(jīng)開源

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

微軟數(shù)據(jù)可視化工具SandDance已經(jīng)開源

Bar圖：

微軟數(shù)據(jù)可視化工具SandDance已經(jīng)開源

Treemap圖：

微軟數(shù)據(jù)可視化工具SandDance已經(jīng)開源

Observable中使用

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

微軟數(shù)據(jù)可視化工具SandDance已經(jīng)開源

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

Power BI中使用

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

微軟數(shù)據(jù)可視化工具SandDance已經(jīng)開源

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查詢結(jié)果。

微軟數(shù)據(jù)可視化工具SandDance已經(jīng)開源

SandDance本地原生JS使用

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

sanddance-SandDance

可視化核心畫布組件。

通過script標(biāo)簽引入該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使用：

在項(xiàng)目的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應(yīng)用集成sanddance-react

sanddance-react用于基于React的應(yīng)用程序的核心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);

微軟數(shù)據(jù)可視化工具SandDance已經(jīng)開源