查看原文
其他

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

The following article is from 开源前哨 Author 小秋

简介

SandDance 是微软开源的数据可视化工具,可以直观地探索、理解和呈现数据。通过使用易于理解的视图,可以帮助用户更快速、更方便地观察数据的特点,展示支持事实故事的证据,列举对假设、猜想的支持,更好地去构建数据模型。

SandDance 提供了一种找到与数据交互的有效方法,帮助我们了解可视化数据的细微差别,指导我们如何从多个角度检查数据,如何对数据采取怎样的分析处理。


微软提供了在线的demo,可以尝试一下:

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

项目地址是:

https://github.com/Microsoft/sanddance

SandDance开发

SandDance 是一个组件堆栈,其图层层次结构如下:

  1. Deck.gl:WebGL渲染和画布控件。
  2. Vega:图表布局。
  3. sanddance:单元可视化图表视图以及选择/过滤交互。
  4. sanddance-test-umd:在UMD部署中测试sanddance。
  5. sanddance-test-es6:在ES6部署中测试sanddance。
  6. sanddance-react(可选):React包装器,用于sanddance。
  7. sanddance-vue(可选):Vue包装器,用于sanddance。
  8. sanddance-explorer:基于React的数据探索组件。
  9. sanddance-app:网站上使用的基于React的示例应用程序。

  • 安装
  1. Clone仓库源码
  2. 执行命令npm install
  3. 安装Jekyll用于本地运行

  • 构建
  1. 执行命令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 组件的使用方法。

  1. 添加依赖,将以下内容添加的工程的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"
  1. 示例代码:
<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 相应的插件:


- EOF -


推荐阅读  点击标题可跳转

1、Charts.css:一个数据可视化开源神器

2、这 30 个细节,决定了数据可视化的质量

3、Google 数据可视化团队:数据可视化指南(中文版)


看完本文有收获?请转发分享给更多人

推荐关注「数据分析与开发」,提升数据技能

点赞和在看就是最大的支持❤️

: . Video Mini Program Like ,轻点两下取消赞 Wow ,轻点两下取消在看

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存