Wendy Shijia 的「 Escher‘s Gallery」可视化作品复现系列文章(一)

最新推荐文章于 2021-08-20 21:58:47 发布

古柳_DesertsX

最新推荐文章于 2021-08-20 21:58:47 发布

阅读量344

点赞数

分类专栏：数据可视化文章标签：可视化数据可视化 d3.js

本文链接：https://blog.csdn.net/Deserts_X/article/details/109378815

版权

数据可视化专栏收录该内容

14 篇文章

订阅专栏

有成就感的一周

上周古柳用 D3.js 复现了 Wendy Shijia 的 Escher's Gallery/埃舍尔画廊 这个很棒的可视化作品，期间不断优化到尽量与原作 Tableau 版本相一致的效果。
网页演示：https://desertsx.github.io/dataviz-in-action/02-eschers-gallery/index.html
开源代码(可点 Star 支持)：https://github.com/DesertsX/dataviz-in-action

之后在万能的「可视化交流群」群友的牵线下，加上 Wendy 微信，请她指正复现作品。

补充一句，Wendy 是今年刚被选为的大中华区第一位 Tableau public 大使，其作品也值得好好鉴赏与学习。
相关链接：https://public.tableau.com/profile/wendy.shijia#!/

后面古柳把这次复现作品分享到推特上，本以为要沉，没想到反响还行。之前文章里多次提到的 Nadieh Bremer 大神也点了喜欢；Shirely Wu 以及 「Fullstack D3 and Data Visualization」 一书的作者 Amelia Wattenberger 也转发了推文，一直以来从她们的作品/代码/文章里学习了很多，这次能让她们看到我的复现也是很开心的一件事，值得截图留念！

没准能复现，是真的还是错觉？

上周真的是很有成就感的一周！当然那都是后话了，将时间拉回到还没开始复现之前。其实，论理本应在「MeToomentum 可视化作品复现系列文章(一)」之后，继续更新该系列文章。

但某天重新看 Wendy 的 Escher's Gallery 作品时，突然觉得有思路(常看常新)，没准能复现出来，也在10月15日于群里发过想法，埋下想实践下的种子，并且为了不被群友「山鬼」的思路影响，暂时让他"不要剧透给我，让我继续头铁，试试先"。等复现出来后，回过头再问，发现方法也类似。

作品解读

在动手复现前，有必要先介绍下这个可视化作品到底如何解读、用了什么数据、怎么进行映射的。

说来惭愧，在「可视化作品分享：第1期 | 好评来袭」一文里分享这个作品时，只是单纯地觉得很好看，甚至因为在推特评论区还是哪看到有说像葡萄架于是也这么“引用”，回看倍感汗颜。

其实，Wendy 在回复别人的评论中有讲到，其灵感源自于 Escher 的作品。借助视错觉与镶嵌的手法，以 Escher 的艺术风格来可视化 Escher 的全部470件作品(原汤化原食，哦，好像不对)，不得不令人佩服其创意。

PS: 图中的 JiangBin 就是前文提到的帮忙牵线并加上 Wendy 的群友 姜老师，也是位 Tableau 大佬哦！在此感谢其搭线。相关链接：https://twitter.com/ShijiaWendy/status/1297950623141203968

无独有偶，这里再分享下 「Frames of Mind」 这个用毕加索的风格来展示其所有作品数据的可视化作品，有异曲同工之妙。

顺带安利下阿里 AntV 团队每周一更新的数据可视化周刊「墨者修齐」，说出来你可能不信，「可视化交流群」里也有该团队里的成员哈，互相学习。
「墨者修齐 2019-01-14·可视化年度总结的总结、毕加索、垂直折叠」相关链接：https://www.yuque.com/mo-college/weekly/ny35wg
Frames of Mind 相关链接：https://www.nationalgeographic.com/magazine/2018/05/genius-picasso-art-categories-infographic/

扯回来，明白了该作品的创作理念后，继续解读下：从左到右依次为 Escher 不同时期的作品，其中每件作品精确到年；虽然咋看起来每个(不完整的)正方体是一个整体，但其实3个面表示3个不同作品，所以最小的视觉元素其实是1个面，也就是缺了1/4的正方形，且鼠标悬浮到每个面会显示详细信息；不同风格的作品以不同颜色区别，右上角有各类风格作品数的柱形图；另外一些有名的作品会用一小块白色专门标注，不过由于不清楚这里的有名作品是不是 Wendy 另外整理融合进来的，因为原始数据(自己爬取的)里没有这一维度属性，因而后续复现时暂且不专门标出有名作品；

最后，主体图的背景里还有很多未填充颜色的“空白作品”，复现时可能会觉得无关紧要，去掉这部分也无妨，但“没有艺术修养”的古柳，还是直觉地认为这部分也是表现 Escher 艺术风格不可或缺的存在(还未向 Wendy 求证)，因而最后即便代码里用一些不够优雅的方式实现，也还是尽量做了还原，若有人看源码时觉得这部分费解，需注意这里的说明。
源码(可点 Star 支持)：https://github.com/DesertsX/dataviz-in-action/blob/master/02-eschers-gallery/app.js

他山之石，可以攻玉

解读完作品，总算到正儿八经复现部分(好吧也没有，等下一篇继续)。

时间回到上周末10月18日下午，古柳终于准备开始动手实践，来验证下自己的思路到底是否可行。其实，这个作品对古柳而言，主要难点就是怎么拼出这个类正方体的图形，毕竟之前没怎么自己用 SVG 画过图形。只要解决这个问题，后面部分古柳不觉得有啥可以称得上难点的地方，无非布局排列需要理清楚，但有自信花点时间就能搞定。

那到底该如何拼出这个图形呢？其实这次并非完全从零开始自行摸索，而是想起以前 CSS Tricks 上的 「Use and Reuse Everything in SVG… Even Animations!」 这篇文章，里面就实现了单个立方体/cube，并且使用 <use> 标签重用立方体进行堆叠，如此看起来完全可以用到这次复现上。
链接：https://css-tricks.com/use-and-reuse-everything-in-svg-even-animations/

说起来这篇文章是挺早以前看到的，那时可能古柳对 D3.js 也还不怎么熟悉，也没细看文章内容，真看估计也看不懂，但仍留下了 cube 元素的实现与 <use> 标签似乎挺有用的这一粗略印象。

另外一桩事

而回过头想想，这次看 Wendy 作品时能想起这篇文章或许可作参考、用来打通核心步骤，可能还有另外一个原因......

国庆的时候想着可以找些平面设计/视觉传达方面的电子书扫扫盲、学习学习。之后在其中一本名为「日式平面美学」的书里了解到许多日本平面设计师。

看到简介感兴趣的直接谷歌搜索其代表作品，然后搜到 五十岚威畅 设计的夏日爵士音乐节海报 サマージャズ，其用小方块拼凑出 JAZZ 3D 字体的方式，使古柳豁然开朗，因为自己也有个个人想做的作品，此前毫无头绪，看到此图得到启发。虽然至今仍未尝试，且如果能用 D3.js 实现的话，也多半是直接照搬此图创意，所以暂且先不过多展开。
相关链接：「五十岚威畅：只为结构动情」：https://www.taihuoniao.com/topic/view/180284