简介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 相应的插件:
开源前哨
日常分享热门、有趣和实用的开源项目。参与维护 10万+ Star 的开源技术资源库,包括:Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。