前面還有好些坑要填，不過(guò)最近古柳啃了個(gè)較復(fù)雜的、Vue 實(shí)現(xiàn)的可視化作品的源碼，雖然還有很多內(nèi)容沒(méi)看，但最核心部分涉及的各組件都有跟著實(shí)現(xiàn)了下，如何work的也過(guò)了遍，心里有數(shù)多了，于是就想趁熱簡(jiǎn)單分享下、小結(jié)下。目前實(shí)現(xiàn)的效果如下。
鏈接：www.codex-atlanticus.it/#/
在很久之前的「可視化作品分享：第3期 | 好評(píng)來(lái)襲 - 2020.10.17」一文里，古柳就有提到，大概幾年前偶然看亞賽大人的微博才最早知道的這個(gè)作品。
鏈接：https://weibo.com/2148509850/Hs2T76OAN
而且因?yàn)椴畈欢嗍峭瑫r(shí)知道「大西洋古抄本」和2.5D的「中國(guó)科技城市」這兩個(gè)內(nèi)容豐富、栩栩如生的作品，所以在古柳記憶里自然地將它們綁定在一起，每次想起都會(huì)一同浮現(xiàn)。
鏈接：https://weibo.com/2148509850/HzuYZ5eTo
鏈接：https://www.abacusnews.com/china-tech-city
說(shuō)起來(lái)，對(duì)于那些看過(guò)的可視化作品，古柳心中有個(gè)簡(jiǎn)單粗暴的劃分就是，以一年多前真的正兒八經(jīng)、下定決定學(xué) D3.js，并且開(kāi)始輸出相關(guān)內(nèi)容和建交流群等為界，對(duì)在那之前和之后接觸的作品有著非常不同的印象，會(huì)很自然而然被區(qū)分開(kāi)。
想起以前還是啥也不會(huì)時(shí)，潛移默化地接觸了許多作品，使得古柳對(duì)可視化逐漸生發(fā)出喜歡，除了上面兩個(gè)，再舉兩個(gè)例子。
鏈接：http://histography.io/
鏈接：http://www.species-in-pieces.com/
而想不到現(xiàn)在終于能復(fù)現(xiàn)出其中一些復(fù)雜且優(yōu)秀的作品，就覺(jué)得一切很神奇。
這兩天和一位新加上的自稱“還什么也不會(huì)，無(wú)論是代碼方面，還是設(shè)計(jì)方面，都只是一個(gè)羨慕的旁觀者”的群友聊天時(shí)，古柳說(shuō)道“也許一年后啥都能實(shí)現(xiàn)了”，雖然沒(méi)多解釋，看起來(lái)像很稀疏平常的一句話，卻一定程度就是古柳當(dāng)下真實(shí)的感想。
其實(shí)不論以前還是現(xiàn)在，一直有安裝查看網(wǎng)頁(yè)用到哪些技術(shù)棧的 Chrome 插件——UI Stack、Wappalyzer 等，所以在一次次看到那么多漂亮的可視化作品居然都用到D3.js，因而知道了這個(gè)庫(kù)的強(qiáng)大與流行。
而上面兩個(gè)作品，雖然沒(méi)用到 D3.js，但借助插件古柳也得以知曉它們都是 Vue 框架實(shí)現(xiàn)的，只不過(guò)以前一直不會(huì)前端，曾經(jīng)覺(jué)得這么復(fù)雜的源碼、這么棒的作品可能一輩子都沒(méi)機(jī)會(huì)搞懂并復(fù)現(xiàn)出來(lái)(哪怕一兩個(gè)月前也還是這樣的想法)，更何談做出類似優(yōu)秀的作品。
拿“一輩子如何如何”這樣的話來(lái)說(shuō)事，可能有些夸張與矯情，但卻是清晰記得有過(guò)這樣的想法。哪怕后來(lái)學(xué)了 D3.js，復(fù)現(xiàn)過(guò)簡(jiǎn)單的作品，也能自己搗鼓些小作品，但總覺(jué)得止步于靜態(tài)圖和click/hover/mouseenter之類的簡(jiǎn)單交互效果，一直不會(huì)復(fù)雜交互，長(zhǎng)久存在的瓶頸無(wú)從突破。
記得去年10月份復(fù)現(xiàn) Wendy Shijia 的「埃舍爾畫(huà)廊」作品那次，群友老涂說(shuō)覺(jué)得我復(fù)現(xiàn)完水平大幅度提升，但自己卻知道并沒(méi)有。
看起來(lái)復(fù)現(xiàn)出來(lái)的效果很接近了，但其實(shí)很多地方做的仍不好，而常規(guī)的布局、繪制元素那些其實(shí)和之前實(shí)踐過(guò)的都沒(méi)有太大差別，也不是在這次里提升或掌握的，知道 D3.js 的繪圖流程，其實(shí)就沒(méi)有太難的地方。具體實(shí)現(xiàn)過(guò)程見(jiàn)：「Wendy Shijia 的「 Escher's Gallery」可視化作品復(fù)現(xiàn)系列文章(三) - 2021.12.17」
時(shí)光荏苒，從那次之后雖然繼續(xù)有過(guò)不少實(shí)踐，但一直感覺(jué)進(jìn)步不大，復(fù)雜交互方面也一直沒(méi)有太多涉足。
拿比較近的一個(gè)作品，即紀(jì)念并祝福乃團(tuán)成員「松村沙友理」畢業(yè)快樂(lè)的B站視頻播放量可視化來(lái)說(shuō)，因?yàn)樘脹](méi)寫(xiě)過(guò)tooltip，連最簡(jiǎn)單的交互都很是生疏，于是一直犯懶擱置著沒(méi)加交互、更沒(méi)完善并開(kāi)源。其它具體實(shí)現(xiàn)過(guò)程見(jiàn)：「用可視化的方式祝福小偶像畢業(yè)快樂(lè)（下） - 2021.05.10」
后來(lái)雖有再優(yōu)化過(guò)，也只是加上月份信息和 legend 圖例，還是因?yàn)橐陡褰o傻蘋果??的應(yīng)援組而被指出可以優(yōu)化下的。
不過(guò)還沒(méi)確認(rèn)是否最終有收錄到會(huì)寄給??的紀(jì)念冊(cè)里，并給配上日文注釋說(shuō)明等等，有待后續(xù)跟進(jìn)。
文章也蠻長(zhǎng)了，其實(shí)想說(shuō)的就是復(fù)雜交互一直是古柳的一個(gè)瓶頸，一直無(wú)從克服。那這回又是如何突然有那么大的進(jìn)步，復(fù)現(xiàn)出那么復(fù)雜的而且還是 Vue 實(shí)現(xiàn)的可視化作品的呢？預(yù)知后事如何，請(qǐng)聽(tīng)下回分解。
最后歡迎加我一起交流哈！
