HOLA: Human-like Orthogonal Network Layout

2015 年 IEEE VIS infoVis Best Paper：HOLA: Human-like Orthogonal Network Layout
image.png
该论文主要核心思想“以人为本（hunman-centered）”。在此之前的研究表明美学原则有以下几点：

  • 在有节点处拐弯
  • 更少的边交叉
  • 更对称
  • 更正交

image.png image.png image.png image.png

但本文通过大量用户实验，总结用户对正交网络布局（如上图）的偏好，部分推翻了以前研究的结论。主要有以下几种：

  • 把树状结构放置在外面

image.png

  • 用户更喜欢在边上拐弯，而不是在有节点处拐弯（推翻了以前的结论）

image.png

  • 更紧凑的图
  • 对其到格子上的排布
  • 更少的边交叉
  • 更少的边弯曲
  • 更短的边长
  • 更小的能量

通过上述实验总结，该论文设计了一套正交图布局算法，步骤如下：
image.png

  • 先将图上的树结构剪枝；
  • 使用能量最小化布局法布局剩余部分（核心），（b）中灰色节点为被剪枝的树的根；
  • 将核心部分正交化，弯折边；
  • 逐个放置树结构，树可以放置在相对应的根节点的东、南、西、北四个方向。（c）中的灰色节点是下一个要放置的树的根节点；
  • （d）中所有的树结构都被放置了。但有两个灰色的根没有对齐；
  • 对齐所有节点，并布局树。

下面为几个对比实验（左：该论文结果，右：yfile 结果），可以看出该论文的结果更紧凑、优美：
image.png

任何算法、策略设计都要“以人为本（human-centered）”。用户来源覆盖要广，不仅是业务方，还有包括研究者、学生、设计师、甚至其他职业。也许今后 G6 或 AntV 其他产品在拿不准的可视化设计上，需要进行用户实验，总结结果作为输入。又或者（瞎 yy 中。。），用户实验可以成为 AntV 的既定流程或某种产品。不仅仅做到满足业务需求，也能做到满足大众普遍需求，反而能更好地服务更多业务。
by @十吾(shiwu-5wap2)

ggplot 做的台风可视化

每次台风来，我都有想做一下台风可视化，看了 nasa 的 3D 的台风可视化，偏科学可视化的范畴，无法复用。那么我们目前的可视化工具 L7 和 G2 是否能够轻松的进行可视化？之前我们的同学在 story telling 中尝试过，不是那么容易做到，那么我们来看一下使用 ggplot 怎么做到台风的可视化，可以给我们 G2 和 L7 给一些参考：
image.png
使用了三层图形，地理图层+轨迹+点图，换成矢量图：
image.png
其他维度的分析：
image.png
更多台风的展示：
image.png

这些功能实现的并不复杂，L7 和 G2 也一定能够实现，但是简单方便的实现是我们需要努力的地方。
原文：https://nycdatascience.com/blog/student-works/shiny-test/
by @萧庆(xiaoqing)

达·芬奇手稿

vinci.gif
大西洋古抄本(Codex Atlanticus)是达芬奇存世的手稿集册之最，共含12卷，1119张。本项目是FWA和awwward的获奖作品，将大西洋古抄本进行了数字化概括，将其内容归为代数几何、物理与自然科学、机器工具、建筑与实用艺术、人类科学五大类，并定义了颜色映射。我们不仅能够看到在宏观图景上整部手卷的内容分布情况、从手稿年代分布一窥达芬奇灵感的高峰和低谷，还可以查看每页手稿的具体情况。宏观和微观的数据之美在此结合得不错。
by @sakuya(liuye-szvim)

四步走，墨迹天气雷达数据可视化指南

介绍了矢量化栅格图像的方法（d3-contour）以及使用 tippecanoe 创建矢量瓦片的方法。
相比栅格图像，矢量瓦片具有更好的用户体验，相对于传统可视化，实现了更加平滑、分辨率更高的渲染效果。（中：栅格图像可视化，右：矢量瓦片可视化）。
当然这个案例是 Native 应用，如果使用 WebGL 效果会稍差一些。
640.gif640 (2).gif640 (1).gif
另外在知乎上看到一个问题「python如何画出漂亮的地图？」🔗。里面介绍了 Python 中专门用于地理数据可视化的 folium，底图使用的是 OpenStreetMap，Medium 上也有一篇使用教程 🔗。值得一提的是链式调用风格的 API：

  1. from folium.plugins import HeatMap
  2. df_copy = df[df.month>4].copy()
  3. df_copy['count'] = 1
  4. // OSM 底图
  5. base_map = generateBaseMap()
  6. HeatMap(data=df_copy[['pickup_latitude', 'pickup_longitude', 'count']]
  7.         .groupby(['pickup_latitude', 'pickup_longitude'])
  8.         .sum()
  9.         .reset_index()
  10.         .values.tolist(), radius=8, max_zoom=13)
  11. .add_to(base_map)

image.png
by @沧东(cangdong)

39 studies about human perception in 30 minutes

作者在OpenVIS 2016上的演讲文稿中文翻译，作者搜集了众多关于关于人类是怎样对图形进行感知的研究，以《Information Visualization》中的一个问题：可视化是一门可选还是一种语言，开始介绍人们感知可视化的各种实验研究。列举其中有一些实验：
1）人们是如何识别饼图的某个部分占整理的比例：

image.png
50%的人使用外弧来判断，25%使用面积，25%使用角度
如果使用柱状图呢，人们是怎样识别其中某个部分占整体的部分，实验表明，但分类越来越多，人们判断饼图中的比比例要不识别柱状图中的比例要正确的多，所有使用饼图不仅仅是因为吸引力，还因为它的科学准确

2）象形文字和图画：使用象形文字代替坐标轴上的文字会导致更多的错误
image.png

用堆叠的象形文字替换通用的条形图并不会导致人们理解记忆的准确性下降，反而使用象形文字代替坐轴标轴上的问题会导致错误。
by @翎刀(zqlu)

Cola.js

Cola.js是一个开源的JavaScript库，使用基于约束的优化技术来布局HTML文档和图表。可以用于D3.js、Svg.js及Cytoscape.js，当然，也可以用到G6中。Cola.js中的核心布局是基于C++ libcola库，使用JS重写的。

Cola.js还提供了一个适用于D3.js的适配器，允许使用cola来替代d3-force，与d3-force不同的是，它的布局会收敛到局部最优，是通过一个简单的annealing策略来强制收敛。因此，相比d3-force：

  • Cola实现了更高质量的布局；
  • 在交互式应用中更加稳定，没有抖动；
  • 允许用户指定约束，如对齐和分组；
  • 可以自动生成约束：
    • 避免节点重叠；
    • 为有向图提供流程布局。
  • 对于大图，不易于扩展。

contextmenu.gif
contextmenu1.gif
by @聚则(moyee-bzn)

fontstellations

fontstellations 是一个基于图分析字体关系分析工具。对于视觉设计来说，选择合适的字体是一个非常重要的事情，不同的字体有不同的风格，是需要找有趣好玩的，还是严谨工整的？实际上这样的选择涉及大量的试错，特别是同一体系的衬线和无衬线字体时。通过上面的工具，可以通过字体的家族关系迅速找到想要的字体
image.png
by @镜曦(jingxi-g5ldr)