2019 凯度信息之美奖(The Kantar Information is Beautiful Awards)

传送门 该公众号对 2019 年获奖的作品做了详细的整理和简明扼要的总结,感兴趣的朋友赶紧去看看吧~

今年的获奖作品按照主题分为十大类,分别是“艺术、娱乐与文化”“新闻与时事”“地图、场所与空间”“政治与全球化”“人道主义”“体娱”“人类、语言与身份认同”“可视化与信息设计”“科技”“特别类”。来自以上10个类别的30部作品分别获得2019年度各类别的金银铜大奖,另有8个作品分别获得了“全场大奖”“最佳个体奖”“明日之星奖”“杰出团队奖”“社区选择奖”“最佳非英语类作品奖”“最佳学生作品奖”等7个特别奖项。

image.pngimage.pngimage.png

by @司马淇(simaqi)



Imaging the entire Earth every day

Planet 最初是由一个物理学家和工程师组成的小组,现在则是一家经营着世界上最大的地球成像卫星星座的公司,拥有的成像卫星数量有 150 多颗。从精准农业、应急响应到供应链和基础设施监控,Planet 公司提供的全球图像和分析数据作为 驱动引擎 ,将为各个行业提供明智和可量化的管理方式,并为战略决策提供数据支撑。目前该公司提供的卫星成像精度最大可达 80 厘米。

下图显示了 2018 年 1 月 25 日 Planet 公司成像卫星(白色圆圈)的运动轨迹,这些卫星每天都会持续地绕地球旋转,拍摄得到的照片拼接起来就能得到地球🌏的全貌。缺点是受到云层的影响,部分陆地可能会丢失,需要经过多个周期的拍摄才能获得完整的图像数据。

2020-01-11 12-01-43.2020-01-11 12_05_30.gif

by @诸岳(dengfuping)



概念地图(concept map)

概念地图(concept map)是指学习者对特定主题建构的知识结构的一种视觉化表征,概念地图也叫(mind map)/“心智/思维工具”(mind tool)。

wiki 的定义:“A concept map typically represents ideas and information as boxes or circles, which it connects with labeled arrows in a downward-branching hierarchical structure”


下面是一个非常复杂的概念地图的实现,作者通过列表将左右两侧不同的概念进行区域的划分,通过交互来实现不同概念之间的关联,高效而且生动,可以作为 G6的一个案例来实现。

concept_map.gif


地址:http://www.findtheconversation.com/concept-map/

by @萧庆(xiaoqing)



Manifold:机器学习的模型无关可视化调试工具

和机器学习相关的可视化辅助调试工具不少,但大多都是针对某种具体模型的。今天介绍一个模型无关的可视化调试工具:Manifold,demo

68747470733a2f2f6431613366347370617a7a7270342e636c6f756466726f6e742e6e65742f6d616e69666f6c642f646f63732f4d616e69666f6c645f4865616465722e6a7067.jpeg

by @步茗Neo(neowang)



荷兰音乐流派可视化。

可以看出从 2017 年的第二季度开始荷兰语的 Hip-Hop 音乐(粉红色点)才开始在所有流派中占据了主要地位,其得分及丰富性从那时开始变得更高。

2018 年开始,越来越多荷兰语 Pop/Folk 音乐(深蓝色点)出现。但在 2017 年,它们仅占了百分之一。

2019 年,更多的荷兰语 Pop/Folk 出现了。荷兰语 Hip-Hop 持续地愈发流行。

image.png

by @十吾(shiwu-5wap2)



Taking small steps to bring out the message

这周的文章点评了来自 The Economist 的一个堆叠条形图,图形展示几大零售超市2019年营业收入中来自海外市场的比例:

image.png

这个堆叠条形图不同之处在于对同一分类字段使用了同一种颜色,不同细分只使用了不同的颜色深度。根据图例,其中深色的表示Total、浅色的表示海外市场部分overseas。这个堆叠条形图有什么问题吗?图形主要是表达什么?

文章首先指出的问题:

1) 在堆叠柱形图条形图中,柱子的总长度才是表示total的,所以这里图例实际是标错了,深色部分是表示国内部分,所以第一步应该改成如下,注意图例变化

image.png

2) 图表设计者想表达的是突出外海市场部分(原始图形中Total of which overseas),但在这里,因为海外部分是浅色,想要看出或者比较海外部分的数据不是很容易,因此第二步修改是调整堆叠的顺序,将深色图例表示海外市场部分,这样海外市场部分就中0刻度开始,很容易读取和比较,同时深色部分也更加吸引注意力:

image.png

从最后优化后的图形可以看到,沃尔玛仅海外市场部分的营业收入就比其他三家的总收入都多。

by @翎刀(zqlu)


 

利用深度学习实现手绘数据可视化的生成

之前有同学也分享过 Sketchify (把任何以SVG为渲染技术的可视化转化为手绘风格)。基于 AntV 的 DEMO:https://codepen.io/gangtao/full/wvvRwzp

image.png


由于实现原理是基于 Rough.js 使用手绘风格的 SVG 元素替换原有元素,因此对于 Canvas 绘制版本就无效了。近期原作者利用深度学习完成了 Canvas 版本的手绘风效果转换,原理如下:

  1. 用相同的数据分别生成原始的和手绘风格的数据可视化图数据。这一步使用 headless browser 基于 SVG 版本的 Sketchify 分别渲染原始和手绘风格的效果图并截图保存。
  2. 利用深度神经网络(pix2pix),使用该数据训练一个模式,输入是数据图,输出的手绘风格的图。这样就可以训练一个生成手绘风格数据可视化的神经网络了。以上训练过程在 paperspace(一个免费的线上深度学习环境)上进行。

image.png

  1. 对于任何新的数据图,输入该网络就可以输出一个手绘风格的图。下图中左图是原始图,中间的 fakeB 是pix2pix 模型根据原始图生成的结果,右侧是 Sketchify 实际生成的 SVG 对照组。可以看出几乎无差别。

image.png


当然这个 pix2pix 版本限制也是很明显的,后续也有一些改进方向:

  1. 相比 SVG 版本只能输出静态效果图片,无法包含交互。
  2. 利用 GPGPU 能力,用 Keras 训练该模型并导入 tensorflow.js,直接部署到浏览器。https://www.tensorflow.org/js/tutorials/conversion/import_keras?hl=zh_cn

by @沧东(cangdong)