3D 航线图
使用了 OpenStreetMap & Mapbox 绘制的 3D 航线图,点击两侧的城市标签使用顺滑的相机 flyTo 🔗移动效果。通常对于路径的绘制会忽略高度信息只根据经纬度坐标连线,例如 deck.gl 的 PathLayer 🔗,而对于需要展示高度信息的航线数据,在 shader 中进行墨卡托投影的同时也要考虑将高度(单位米)转换成像素。同理,deck.gl 的 PointCloudLayer 🔗提供了对于 3D 坐标点(球体)的展示。
by @沧东(cangdong)
条件概率可视化
一个下落的球可能击中红色的架子(事件 A)或蓝色的架子(事件 B),P(B|A)描述的是击中了红色架子后,还击中蓝色架子的概率。
by @司马淇(simaqi)
TigerGraph
TigerGraph是一款图数据库,官网上提供了Design Schema功能,注册以后可以免费试用。
TigerGraph中的图编辑器的优点如下:
- node和edge的样式比较好看,元素比较丰富;
- node比较多时,布局方式比较好,不会显得过于混乱;
- 性能较好,很多节点时也不会出现明显卡顿的,且在视窗范围内的操作都比较流畅。
TigerGraph的图编辑器最大不足是在交互方面:创建node和edge的流程繁琐,且全都是通过表单形式创建。
by @聚则(moyee-bzn)
five-years-of-drought
这是一个美国5年干旱情况分布的可视化案例。先来个大图总览。其中六边形的大小表示了干旱发生的频率,颜色的深潜代表了干旱的严重程度。
作者讲述了他为什么想到用六边形来表示。如果用这份数据直接来做可视化,那这个图是长这样的:
虽然看起来好看,读者并不能从中获取多少信息。作者认为热力图上数据叠加的问题是一些区域中的极值具体在哪是找不到的,因此我们只能知道干旱重灾区大概在哪,却不能精确了解到,所以也不能像上图一样标出对应的异常点,做出说明。于是就想到了用六边形来表示。甚至更进一步的,用六边形的大小来表示一个数据维度。
by @青湳(qingnan)
200 years of finance
这件作品通过对4000条金融指标数据的分析和可视化,讲述了200年来金融经济增长的故事。整篇故事分为四个维度:金融数据的增长(data)、金融生态系统的关联性(impact)、金融市场的复杂性(complecity)和金融经济边界的拓展(scope)。
其中对普通读者来说最具故事性和视觉吸引力的当属第二个篇章,讲述了200年中的重大历史事件,如两次世界大战、大萧条、石油危机等,对世界主要工业的影响。在全景视角中,我们仿佛在看一场跨栏比赛,各大工业的增长曲线被呈现为3D的形态,犹如运动员在赛道上,并随着时间的演进向前奔跑,一个个时间节点标示着它们经历的重大事件。在微观视角中,折线的形态实现了3D到2D的平滑切换,在这个视角中,人们可以将注意力更加集中在数据的时序变化特征上。
从这件作品中不仅可以看到如何通过多维视角的方式来组织一个课题宏达、数据复杂的故事,也可以看到即使是简单的图表,通过细致的交互和动画设计、通过巧妙的组合,也能够承载丰富的信息、展现出惊人的视觉吸引力。
by @sayago(sayago)
力导布局优化
d3-force-reuse: 比起大名鼎鼎的力导布局算法库 d3-force,能提升 10% ~ 90% 的渲染性能。d3-force 是每次 tick 都会重新去计算四叉树的 Force approximation,而 d3-force-reuse 则是每 13 次 tick 才会去重新计算。理论来源为 It Pays to Be Lazy: Reusing Force Approximations to Compute Better Graph Layouts Faster 这篇文章,文章中的实验表明迭代频率在 13~14 次能达到性能和效果的最佳平衡,两者的性能对比如下图所示:
by @诸岳(dengfuping)
Tableau 智能配色
今天分享一位 Tableau 高级研究员 Maureen Stone,这是她的 Tableau research 主页。Stone 女士参与了很多令人振奋的研究,拥有很多有意思的研究成果,这里试举一例:
语义化类别颜色分配
图左:Tableau 默认自动颜色分配,做到了映射层面的基本合理,但是缺少了更高层次的考虑。比如,番茄映射为了粉色,玉米映射为了绿色。
图中:人根据自己的经验手动映射颜色,番茄是红色,玉米是黄色。
图右:Tableau 研发出的自动语义化配色算法得出的结果,与人的配色基本接近。
这个工作很好的解决了“自动配色”或者叫“智能配色”的问题。使得 Tableau 做出的图表更加易于被理解。不是生硬的 BI 而是更靠近了 infographics。
by @步茗Neo(neowang)