迄今复现过最复杂的可视化作品之「大西洋古抄本」(上)

前面还有好些坑要填，不过最近古柳啃了个较复杂的、`Vue` 实现的可视化作品的源码，虽然还有很多内容没看，但最核心部分涉及的各组件都有跟着实现了下，如何work的也过了遍，心里有数多了，于是就想趁热简单分享下、小结下。目前实现的效果如下。  
链接：www.codex-atlanticus.it/#/  

在很久之前的「可视化作品分享：第3期 | 好评来袭 - 2020.10.17」一文里，古柳就有提到，大概几年前偶然看`亚赛大人`的微博才最早知道的这个作品。  
链接：https://weibo.com/2148509850/Hs2T76OAN

而且因为差不多是同时知道`「大西洋古抄本」`和2.5D的`「中国科技城市」`这两个内容丰富、栩栩如生的作品，所以在古柳记忆里自然地将它们绑定在一起，每次想起都会一同浮现。   
链接：https://weibo.com/2148509850/HzuYZ5eTo   
链接：https://www.abacusnews.com/china-tech-city

说起来，对于那些看过的可视化作品，古柳心中有个简单粗暴的划分就是，以一年多前真的正儿八经、下定决定学 `D3.js`，并且开始输出相关内容和建交流群等为界，对在那之前和之后接触的作品有着非常不同的印象，会很自然而然被区分开。

想起以前还是啥也不会时，潜移默化地接触了许多作品，使得古柳对可视化逐渐生发出喜欢，除了上面两个，再举两个例子。  
链接：http://histography.io/  
链接：http://www.species-in-pieces.com/  

而想不到现在终于能复现出其中一些复杂且优秀的作品，就觉得一切很神奇。

这两天和一位新加上的自称“还什么也不会，无论是代码方面，还是设计方面，都只是一个羡慕的旁观者”的群友聊天时，古柳说道`“也许一年后啥都能实现了”`，虽然没多解释，看起来像很稀疏平常的一句话，却一定程度就是古柳当下真实的感想。

其实不论以前还是现在，一直有安装查看网页用到哪些技术栈的 Chrome 插件——`UI Stack`、`Wappalyzer` 等，所以在一次次看到那么多漂亮的可视化作品居然都用到`D3.js`，因而知道了这个库的强大与流行。

而上面两个作品，虽然没用到 `D3.js`，但借助插件古柳也得以知晓它们都是 `Vue` 框架实现的，只不过以前一直不会前端，曾经觉得`这么复杂的源码、这么棒的作品可能一辈子都没机会搞懂并复现出来`(哪怕一两个月前也还是这样的想法)，更何谈做出类似优秀的作品。

拿“一辈子如何如何”这样的话来说事，可能有些夸张与矫情，但却是清晰记得有过这样的想法。哪怕后来学了 `D3.js`，复现过简单的作品，也能自己捣鼓些小作品，但总觉得止步于静态图和`click/hover/mouseenter`之类的简单交互效果，一直不会复杂交互，`长久存在的瓶颈无从突破`。

记得去年10月份复现 `Wendy Shijia` 的`「埃舍尔画廊」`作品那次，群友老涂说觉得我复现完`水平大幅度提升`，但自己却知道并没有。

看起来复现出来的效果很接近了，但其实很多地方做的仍不好，而常规的布局、绘制元素那些其实和之前实践过的都没有太大差别，也不是在这次里提升或掌握的，知道 `D3.js` 的绘图流程，其实就没有太难的地方。具体实现过程见：「Wendy Shijia 的「 Escher's Gallery」可视化作品复现系列文章(三) - 2021.12.17」

时光荏苒，从那次之后虽然继续有过不少实践，但一直感觉进步不大，复杂交互方面也一直没有太多涉足。

拿比较近的一个作品，即纪念并祝福乃团成员`「松村沙友理」`毕业快乐的B站视频播放量可视化来说，因为太久没写过`tooltip`，连最简单的交互都很是生疏，于是一直犯懒搁置着没加交互、更没完善并开源。其它具体实现过程见：「用可视化的方式祝福小偶像毕业快乐（下） - 2021.05.10」

后来虽有再优化过，也只是加上月份信息和 legend 图例，还是因为要投稿给傻苹果🍎的应援组而被指出可以优化下的。

不过还没确认是否最终有收录到会寄给🍎的纪念册里，并给配上日文注释说明等等，有待后续跟进。

文章也蛮长了，其实想说的就是复杂交互一直是古柳的一个瓶颈，一直无从克服。那这回又是如何突然有那么大的进步，复现出那么复杂的而且还是 `Vue` 实现的可视化作品的呢？预知后事如何，请听下回分解。

最后欢迎来`「可视化交流群」` 多多交流，加古柳微信`「xiaoaizhj」`备注`「可视化加群」`拉你进群哈！

欢迎关注古柳的公众号`「牛衣古柳」`，并设置星标，以便第一时间收到更新。