簡介

SandDance 是微軟開源的數據可視化工具，可以直觀地探索、理解和呈現數據。通過使用易于理解的視圖，可以幫助用戶更快速、更方便地觀察數據的特點，展示支持事實故事的證據，列舉對假設、猜想的支持，更好地去構建數據模型。

SandDance 提供了一種找到與數據交互的有效方法，幫助我們了解可視化數據的細微差別，指導我們如何從多個角度檢查數據，如何對數據采取怎樣的分析處理。

微軟提供了在線的demo，可以嘗試一下：

https://microsoft.github.io/SandDance/app/

項目地址是：

https://github.com/Microsoft/sanddance

SandDance開發

SandDance 是一個組件堆棧，其圖層層次結構如下：

Deck.gl：WebGL渲染和畫布控件。

Vega：圖表布局。

sanddance：單元可視化圖表視圖以及選擇/過濾交互。

sanddance-test-umd：在UMD部署中測試sanddance。

sanddance-test-es6：在ES6部署中測試sanddance。

sanddance-react（可選）：React包裝器，用于sanddance。

sanddance-vue（可選）：Vue包裝器，用于sanddance。

sanddance-explorer：基于React的數據探索組件。

sanddance-app：網站上使用的基于React的示例應用程序。

安裝

Clone倉庫源碼

執行命令npm install

安裝Jekyll用于本地運行

構建

執行命令npm run build

運行。執行以下命令

1. npm run deploy

2. cd docs

3. jekyll serve

運行后訪問以下地址：

http://127.0.0.1:4000/SandDance/

http://127.0.0.1:4000/SandDance/tests

sanddance-vue

簡單介紹一下 sanddance-vue 組件的使用方法。

添加依賴，將以下內容添加的工程的package.json文件中，然后運行命令npm install：

“@deck.gl/core”： “^8.3.7”，

“@deck.gl/layers”： “^8.3.7”，

“@msrvida/sanddance-vue”： “^3”，

“@luma.gl/core”： “^8.3.1”，

“vega”： “^5.17.0”

示例代碼：

《template》

《div id=“app”》

《SandDanceVue v-bind:data=“data” v-bind:insight=“insight” /》

《/div》

《/template》

《script》

import * as deck from “@deck.gl/core”;

import * as layers from “@deck.gl/layers”;

import * as luma from “@luma.gl/core”;

import * as vega from “vega”;

import SandDanceVue， { SandDance } from “@msrvida/sanddance-vue”;

SandDance.use（vega， deck， layers， luma）;

const data = ［{ a： 1 }， { a： 2 }， { a： 3 }］;

const insight = {

chart： “barchartV”，

columns： {

x： “a”，

z： “a”

}，

size： {

height： 500，

width： 500

}，

view： “3d”

};

export default {

name： “App”，

components： {

SandDanceVue

}，

data： （） =》 {

return {

data，

insight

};

}

};

《/script》

《style》

.sanddance-VueViewer {

height： 700px;

border： 1px solid black;

}

《/style》

《style src=“@msrvida/sanddance/dist/css/sanddance.css” /》

SandDance 相應的插件：

編輯：jq