微软又一个非常酷炫的数据可视化神器开源了

简介

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