关于ide:微软又一个数据可视化神器开源了非常酷炫

27次阅读

共计 1786 个字符，预计需要花费 5 分钟才能阅读完成。

简介 SandDance 是微软开源的数据可视化工具，能够直观地摸索、了解和出现数据。通过应用易于了解的视图，能够帮忙用户更疾速、更不便地察看数据的特点，展现反对事实故事的证据，列举对假如、猜测的反对，更好地去构建数据模型。

SandDance 提供了一种找到与数据交互的无效办法，帮忙咱们理解可视化数据的细微差别，领导咱们如何从多个角度检查数据，如何对数据采取怎么的剖析解决。

微软提供了在线的 demo，能够尝试一下：

https://microsoft.github.io/S…

我的项目地址是：

https://github.com/Microsoft/…

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 组件的应用办法。

增加依赖，将以下内容增加的工程的 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" />