12_SandDance沙之舞

内容简介：可视化是数据分析的利器，俗话说：千言万语不如一张图。有了自己的搜索引擎，再能与可视化技术相结合，那不是更好，可谓锦上添花吧。ok，今天最后一讲，我们聊一聊单元可视化（unit visualization）。啥没听过，其实单元可视化说白了就是把数据中每一个点都单独绘制，不是渲染到整个一张图上，好处就是有利于最终每一个数据的内在属性，特别是数据量很大的时候，通过不同的统计方法变换，有利于发现异常数据点。

1、啥叫沙之舞——SandDance

2019年一次参观微软中国总部Center One的时候，偶然发现了他们的一个内研软件可视化显示全球地震活动（图1）。每个地震源在屏幕上显示的栩栩如生，全球的板块边界构造，俯冲过程尽收眼底，当时觉得很有意思，就拍照留了下来。

图1 微软北京Center One的全球地震可视化

后来，在与微软亚研院领导交流过程中，了解到这个软件名字叫SandDance（感觉很贴切，切换显示时候的过渡效果就像沙子在屏幕上舞蹈），这个软件是微软美国研究院创新车库2011年11月开始研发的一个可视化项目，好消息是该软件2019年11月已经在Github上面开源。整个项目大量采用了Typescript语法，发布出来的版本对算法进行了重新封装，更加模块化和适合二次集成，优于针对显示硬件的优化，据报道对于几十万量级的数据量显示毫无压力。

2、单元可视化

单元可视化能够维持视觉元素的独立性，并且保持视觉元素与数据单元的一一对应关系的可视化技术。这种算法将数据集中每一个数据项使用一个单独的视觉元素进行映射，与单元可视化相对立的可视化类型是聚合可视化，它将多个数据项映射到一个不可分割的视觉元素。

单元可视化是可视化中常见的一类可视化形式，它的特点是将数据集中每一个数据项使用一个单独的视觉元素进行映射。对于特定类型的任务以及数据集，单元可视化能够提供更多的信息，更符合用户认知的心理模型，但是单元可视化的设计空间并没有被完整地探索，同时现有的可视化的语法无法完整地定义单元可视化(D. Ren等，2017；D. Park等，2018)。

3、怎么使用呢？

SandDance是基于Web运行的（图2），不是常规的下载安装运行那种。要想本地运行（谁让网慢呢），还需要构建一下本地环境，想动手的小伙伴们，请听我一一道来。

图2 SandDance的可视化渲染效果

配置方法：整体说来，你要在本地搭建一套JavaScript的运行环境，SandDance支持React（不知道？那你后面好好要看看了），因此需要先搭建本地的Node环境，步骤如下：
1、安装npm环境
这里略去具体步骤，很简单，基本下载安装就好了...，然后查看node和npm的版本（npm就是包管理器和python的pip一个道理）：

node -v
npm -v

上面两个命令运行无误后，应该能看到对应的版本号，不报错就没问题了。

2、安装react

先说一下，在国内速度慢，几百m的脚手架工程，需要加速一下包管理器下载过程，可以设置淘宝镜像（对就是你买东西的那个淘宝，电商除了赚钱IT技术玩的也是很溜的）

npm config set registry https://registry.npm.taobao.org

验证是否设置成功

npm config get registry

或者华为的也可以

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

然后：

npm install -g create-react-app

在本机建立目录

create-react-app quackdance
cd quackdance
npm start

如果一切顺利，打开浏览器输入localhost:3000应该能启动react界面

3、下载github上的sanddance工程

找到Github项目地址
，下载压缩文件包Zip到本地。解压后里面仅有一个目录内容需要用到（如果你不需要修改里面代码的情况下），就是目录SandDance-master\docs\app，下的这些文件，这是后面本地运行的关键。

4、脚手架工具生成的目录结构

第2步骤，在新建的quackdance目录下会生成一个脚手架工程（啥叫脚手架工程？说白了就是前端开发没啥工具，windows下记事本，linux下vi，安装各种组件，各种目录配置很麻烦，通过create-react-app可以生成一个统一的目录结构，然后根据下面的json文件设置，给你自动去下载和配置本地环境），首先要配置SandDance需要的依赖环境。

（1)配置package.json
加入sanddance需要的依赖包，然后npm install
在dependencies 部分加入（原来的别动）：

"@deck.gl/core": "6.4",
"@deck.gl/layers": "6.4",
"@msrvida/sanddance-explorer": "^2",
"luma.gl": "6.4",
"office-ui-fabric-react": "6.204.4",
"vega": "^5.8"

（2)找到下面文件

src目录下的app.js,index.js文件;public目录下的index.html

Index.js文件是入口，修改和配置里面的代码，加入：

import * as deck from '@deck.gl/core';
import * as layers from '@deck.gl/layers';
import * as luma from 'luma.gl';
import * as fabric from 'office-ui-fabric-react';
import * as vega from 'vega';
import { Explorer, use } from '@msrvida/sanddance-explorer';
fabric.initializeIcons();
use(fabric, vega, deck, layers, luma);
const data = [
  { a: 1, b: "c1" },
  { a: 1, b: "c2" },
  { a: 2, b: "c3" },
  { a: 3, b: "c4" }
];
const explorerProps = {
    logoClickUrl: 'https://microsoft.github.io/SandDance/',
    mounted: explorer => {
        explorer.load(data);
    }
};
ReactDOM.render(React.createElement(Explorer, explorerProps), document.getElementById('app'));

这个时候运行，多半会出现最后面那个app找不到的错误。

（3) Copy关键文件

进入本地的public目录，copy刚才下载sanddance工程中的SandDance-master\docs\app目录下的全部文件，覆盖index.html。

最后再运行npm start应该就可以启动sanddance界面了（图3）。

图3 本地运行效果

下面是我本地运行的版本信息：

图4 SandDance应用的版本信息

一句话总结：单元可视化这个方法在地震领域的应用还在探索中，无论是科研还是科普都有应用价值，故事总是要一点点展开的，感兴趣请关注“地学小哥”的简书号，别忘了关注和点赞呦！

ps:如果是系统内的盆友们，小哥为大家已经准备好了环境一睹为快，直接戳这里：http://10.2.14.70:8080/

参考文献：
[1] Github上微软开源的SandDance工具包, https://github.com/Microsoft/SandDance
[2] D. Park, S. M. Drucker, R. Fernandez and N. Elmqvist, “Atom: A Grammar for Unit Visualizations,” IEEE Transactions on Visualization and Computer Graphics, 24(12):3032-3043, Dec 2018.
[3] D. Ren, S. Amershi, B. Lee, J. Suh and J. D. Williams, “Squares: Supporting Interactive Performance Analysis for Multiclass Classifiers,” IEEE Transactions on Visualization and Computer Graphics, 23(1):61-70, Jan 2017.