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


下面为几个对比实验(左:该论文结果,右: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:

from folium.plugins import HeatMap
df_copy = df[df.month>4].copy()
df_copy['count'] = 1
// OSM 底图
base_map = generateBaseMap()
HeatMap(data=df_copy[['pickup_latitude', 'pickup_longitude', 'count']]
        .groupby(['pickup_latitude', 'pickup_longitude'])
        .sum()
        .reset_index()
        .values.tolist(), radius=8, max_zoom=13)
.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:

contextmenu.gif

contextmenu1.gif

by @聚则(moyee-bzn)


fontstellations

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

image.png

by @镜曦(jingxi-g5ldr)