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

前面还有好些坑要填,不过最近古柳啃了个较复杂的、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 StackWappalyzer 等,所以在一次次看到那么多漂亮的可视化作品居然都用到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 实现的可视化作品的呢?预知后事如何,请听下回分解。

最后欢迎加我一起交流哈!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容