简介SandDance 是微软开源的数据可视化工具，能够直观地摸索、了解和出现数据。通过应用易于了解的视图，能够帮忙用户更疾速、更不便地察看数据的特点，展现反对事实故事的证据，列举对假如、猜测的反对，更好地去构建数据模型。
SandDance 提供了一种找到与数据交互的无效办法，帮忙咱们理解可视化数据的细微差别，领导咱们如何从多个角度检查数据，如何对数据采取怎么的剖析解决。
微软提供了在线的demo，能够尝试一下：
https://microsoft.github.io/S...
我的项目地址是：
https://github.com/Microsoft/...
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 等。