微軟開源數據可視化神器 SandDance  ！非常酷炫

簡介

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 相應的插件：

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/gPxpfsi1aPnJKDcai2L3FQ

猜你喜歡