CSIG-VIS 2021高峰论坛 -- 笔记

王庆红
890 阅读9分钟

本次高峰论坛在天津大学举行，在公司的提议下，申请去参加了该会议。举办日期是2021年4月19日，由于工作时间原因，今天才完成笔记整理。

以下是我记录的会议内容和自己的一些感想。

从树到地图：探索层级数据的可视化设计空间 --袁晓如

报告内容

层次数据的介绍

袁教授首先讲了层次数据概念，以及世界上第一张组织结构图【George Holt Henshaw, 1855】。

image.png

展示了treevis.net网站，这是一个专门做层次数据可视化的集锦网站。目前已收集318种树形可视化方式。

image.png 既然有这么多的树形结构布局，说明层次数据的设计空间还是很大的。

现有的问题

目前市场上主要有两种可视化方案：

  • 各种可视化图标库，例如D3、AntV、EChart等。需要编程基础。
  • 可视化工具，例如Tableau，PowerBI等。虽然不需要编程基础，但是对于如此多的树形结构，去做细致调整也要花费很大的精力。(深有同感~)

接下来袁教授就列出了层次数据设计空间的两个挑战：

  • 如何定义树可视化形式的通用组件。

  • 如何支持构建多样的可视化形式。 image.png 通过分析树可视化的组成，抽象公共组件，以最大覆盖率为准则，最终将树可视化拆分成了以下三个部分：

  • 布局：如左右、上下、包含布局等。

  • 坐标系：如笛卡尔积坐标系，极坐标系等

  • 视觉元素：主要是树可视化中点和线的形态，如线：直线、曲线、直角，点：方形、三角、圆形等。

GoTree语法

实践证明，根据坐标系、布局、视觉元素，可以去较好的描述一棵树。并介绍了他们实验室的对此的研究成果：GoTree语法。

下图是GoTree的使用语法，可以看到非常的语义化。

image.png 用这套语法非常容易的创建树可视化，另外标注出的地方说明还可以在一个树可视化里有多种布局方案。这点属实是降低了开发的复杂度。

GoTree只考虑到二维维度，可以绘制出treevis.net上面的100余种可视化，覆盖面很大。

Tree Illustrator

实验室根据GoTree语法还做出了可交互界面：Tree Illustrator。

image.png

利用这个系统可以快速的树可视化。还可以自由的创造，产生新的树可视化形式。以下是Tree Illustrator系统产出的一些树可视化。

image.png

接下来又有了新的挑战。将GoTree语法自由组合的话，能产生1000多万种树的表达形式。从这么多图中如何找到用户需要的图呢？

交互式探索地图

从不同的用户场景和目标为出发点，袁教授提出了交互式探索地图的概念。通过分层可视探索，最终找到符合用户的树形图。

image.png

BarCodeTree(BCT)

为了对比多个浅层和稳定的树形结构，袁教授又介绍了一种新的树结构比较的可视化形式：BarCodeTree(BCT)。

如下图，通过节点的值映射到条形码的宽度，实现对三个不同树的对比。

image.png

BCT还有一些变种形式，感兴趣的同学可以去北大可视化与可视分析实验室去查阅相关文献。

R-map

最后袁教授通过社交媒体转发路径可视化介绍了隐喻地图的的树可视化R-Map。

image.png 以上就是两种地图：探索式交互地图、R-map，和层次数据的可视化讨论：GoTree、BTC、Tree Illustrator。

相关论文：

  • GoTree: A Grammar of Tree Visualizations
  • Tree Illustrator: Interactive Construction of Tree Visualizations
  • BarcodeTree: Scalable Comparison of Multiple Hierarchies
  • R-Map: A Map Metaphor for Visualizing Information Reposting Process in Social Media.

智能可视化设计与数据故事生成 -- 曹楠

报告内容

信息可视化基础知识

曹教授首先介绍了一个通用的信息可视化的参考模型：

image.png

接下来介绍了信息可视化的五个步骤：

一、抽象数据

通过数据清洗、数据变换、数据抽象等步骤将原始数据变成了有结构的图数据。

二、可视化设计

  • 设计准则：信（准确表达）、达（高效传达，达到目的）、雅（可视化之美）。
  • 可视化编码：图形符号以及属性（也就是视觉通道）展示数据元素与属性。
  • 常见的视觉通道：颜色、形状、大小、角度、位置、透明度、纹理、弯曲、面积、长度等等。

三、可视化布局

计算数据在空间上的分布，逐渐的优化效果。

四、渲染

通过webGL、Canvas、Svg等技术在不同的终端上绘制图形。

五、交互与动画

针对大数据量或者复杂数据的可视化，加入适当的交互，可以提高用户的体验。

当数据发生变化时，设计良好的动画，不让用户失去焦点。

目前存在的问题

市场上现存有大量的可视化图标库、工具、框架，但是各有各自的门槛。于是想搞自动化辅助可视化设计。

通过回溯了信息可视化设计的过程，发现自动化的难点就在于可视化设计与布局这一步骤上，其他的步骤基本是都可以程序化的。

规律的设计空间

自动可视化设计的关键在于设计空间。

设计空间是由各种设计元素所构成的集合。例如插图的设计空间包括：背景、配置、图像、文案等。设计空间往往是多维的。

可视化图表的设计空间包括：

  • 布局算法
  • 交互方式
  • 数据映射。

这点和袁教授上面讲的goTree语法很类似，goTree的设计空间就是布局、坐标、视觉元素。

一个规律的设计空间可以让设计变的有规律可循，这点我个人是很喜欢的。虽然可能灵感会创造出伟大作品，但是我觉得有规律能程序化的东西有迹可循，而且还能量产。搞定了设计空间，自动化设计的基础就搞定了。

接着根据hans rosling's 200 countries 200 years 4 minutes这个经典的视频介绍了数据故事的概念。

数据故事的7种表现形式对应的设计空间

image.png

确定了数据故事的设计空间要素

  • 主题挖掘：如何挖掘数据中的信息点
  • 视觉传达：如何正确的表达数据
  • 叙事结构：如何利用图表转接叙事结构
  • 情感表达：如何用视觉符号表达情感

Calliope·Data

该实验室通过收集大量的高质量数据故事素材，得到了一系列的信息。例如常用的图表、配色、组合等。

并做出了自己的设计空间集合：里面有大量的针对于不同的意图，给出的各种可视化建议，例如如何强调、如何对比数据等。

感兴趣的可以来这里看查看该实验室的论文：videoexplorer.idvxlab.com/。

最后曹教授展示了他们自动化设计的成果Calliope·Data，通过上传数据，自动生成数据故事。给大家截个一个该网站生成的数据故事截图，还挺有趣。

image.png 还可以设计不同的模式，例如资料卡模式，手机模式等等。

image.png

image.png

相关论文：

  • Narrative Visualization: Telling Stories with Data. [Edward Segel and Jeffrey Heer]
  • Visualization Analysis and Design [Tamara Munzner]
  • Communicating with Motion: A Design Space for Animated Visual Narratives in Data Videos[Yang Shi, Xingyu Lan, Jingwen Li, Zhaorui Li, Nan Cao]

还有~

后面还有三位教授的讲解

  • 竞技体育数据的可视分析 -- 巫英才
  • 数据可视化技术及其应用 -- 吴亚东
  • 数据可视化技术与应用 -- 陈为 都是可视化领域的重量级专家，但是很遗憾，我后面的随课笔记丢失在了返京途中，没有办法一一展开去记录，只能笼统的说下了。

巫英才教授主要是在做体育方面的可视化研究，用可视化的方式去分析战术，配合调整运动员训练等。在数据收集很有难度。巫教授展示的乒乓球、足球案例都很令人记忆深刻。

吴亚东教授首先介绍了可视化的概念和领域划分，以及可视化的应用。接下来介绍了自己实验室的一些研究应用，主要是在白酒领域：生产过程、生产原理等。也展示了一些可视化沉浸方案的视频，有一个可视化地下实验室的视频很棒，我第一时间想的是打CS🤣。

陈为教授主要是介绍了人工智能和可视化的结合，以及可视化技术的重要性。

记忆很深刻的是浙江大学可视化实验室和CCTV-13台合作的一个数据新闻的视频，非常的酷。可惜记不得视频的名字了。

另外可视分析技术是美国管制清单上的限制出口技术。之前在陈为教授的《数据可视化》一书中看到以下的话：

我国的数据采集、分析与应用应当通过自主研发，不能任由国外垄断公司来采集和处理，否则将危及国民生活与国防安全。我国急需对可视分析的基础理论和方法展开研究，对涉及国家重大工程、国家安全、国民经济等重要领域的可视分析研究应自主进行。

令我想起了WPS和Offic。还有点小小的使命感。

我的收获

  • 随着硬件的发展，沉浸式可视化的应用会逐渐的广泛起来，AR/VR等技术会给可视化带来更大的发展空间。

  • 自动化、智能化、配置语义化，会将可视化的门槛越来越低，但是和工业界倡导的低代码、无代码领域一样，还是需要一段的发展时间。

  • 可视化越来越走近人的生活中，例如央视新闻13和浙江大学合作的视频。更加坚定的将可视化作为自己的发展方向。

  • 了解了关于解决一种数据结构的可视化研究历程： 选择数据结构 -> 定义设计空间 -> 形成语法 -> 交互界面 -> 可视探索地图。如果以后想做类似的事情，有了参考对象。

  • 学习了BCT和R-Map两种之前不了解的树可视化形式。

  • 在学校里听课的感觉真好~

End~

avatar
文章
阅读
粉丝