前言

本文翻譯自 data sketch 上 Nadieh Bremer 的一篇文章，講述了一個(gè)優(yōu)秀的可視化項(xiàng)目背后一步步的實(shí)現(xiàn)過(guò)程。由于英文苦手、水平有限，對(duì)一些內(nèi)容的理解與翻譯可能沒(méi)那么準(zhǔn)確，但出于分享的緣故，還是硬著頭皮翻譯了下，有看不懂、無(wú)法理解的部分可閱讀原文。

優(yōu)秀的可視化作品之前也分享過(guò)一些，網(wǎng)上也不少，但可能大家此前很少有了解，創(chuàng)作者是如何一步步創(chuàng)作出那些優(yōu)秀作品的，本篇文章即是帶大家簡(jiǎn)單開(kāi)開(kāi)眼，當(dāng)然看完也并不代表就能作出這樣的作品，真刀真槍地實(shí)踐還得看源碼，之前的文章古柳也說(shuō)過(guò)會(huì)復(fù)現(xiàn)很多優(yōu)秀可視化作品，自然也少不了「百變小櫻」這個(gè)項(xiàng)目，更多實(shí)踐講解下，敬請(qǐng)期待。
原文鏈接：http://www.datasketch.es/june/
百變小櫻可視化作品：http://www.datasketch.es/june/code/nadieh/
源碼：https://github.com/nbremer/datasketches/tree/gh-pages/june/code/nadieh

第一周| 數(shù)據(jù) data

離4月份的項(xiàng)目已經(jīng)過(guò)去了6個(gè)月，我知道我應(yīng)該先做五月份的項(xiàng)目再做六月份的。但是，我還沒(méi)確定五月份項(xiàng)目的切入點(diǎn)，而對(duì)六月份的項(xiàng)目已經(jīng)有了想法。

我開(kāi)始明白我能真正充滿熱情的主題或許有些小眾，沒(méi)有太多人真得知道這個(gè)。我只能希望對(duì)于像我這樣的粉絲來(lái)說(shuō)，本月的探索將是快樂(lè)的。而我為「六月份的勇氣月」Fearless 選擇的主題是「百變小櫻/Cardcaptor Sakura」！

約20年前的日本魔法少女漫畫(huà)，是我擁有的第一部漫畫(huà)，當(dāng)時(shí)在荷蘭幾乎沒(méi)有人知道漫畫(huà)（實(shí)際上現(xiàn)在也是）。我甚至不得不一路前往我省最大的城市購(gòu)買(mǎi)新一冊(cè)漫畫(huà)。我至今仍非常嫉妒漫畫(huà)的每個(gè) panel (我也不知道這個(gè)應(yīng)該翻譯成什么，對(duì)應(yīng)漫畫(huà)里的術(shù)語(yǔ)是什么) 看起來(lái)多么完美和可愛(ài)??我差點(diǎn)在一月份的懷舊月選擇了這個(gè)主題，但后來(lái)還是選擇了 龍珠Z/Dragonball Z。然而，20年過(guò)去了，「百變小櫻」新番最近又重新啟動(dòng)了。因此，在思考這個(gè)「勇氣月」做些什么時(shí)，我無(wú)法動(dòng)搖想要圍繞勇敢、無(wú)所畏懼、善良的魔法少女小櫻/Cardcaptor Sakura（以下簡(jiǎn)稱CCS）做些什么。

我喜歡 CCS 的其中一個(gè)理由是作者 CLAMP 將每一頁(yè)都畫(huà)得很漂亮，尤其是每一章的封面，堪稱小小的藝術(shù)品（上圖是第23章的封面）。因此，我想以某種方式通過(guò)數(shù)據(jù)來(lái)研究封面。此前我從未做過(guò)任何基于圖像數(shù)據(jù)的分析。因此，我想：從每個(gè)封面中抽取3-8種顏色，并進(jìn)行可視化展示，這將是對(duì)我來(lái)說(shuō)有趣且新穎的一件事。

最初的 CCS 漫畫(huà)有50章，分為兩篇（古柳：補(bǔ)充自百度詞條：庫(kù)洛牌篇和小櫻牌篇）。我瀏覽了全部12卷 CCS，以查看每章封面的圖片（順便一提，你也可以在線閱讀 CCS，例如在這里）。在我買(mǎi)的漫畫(huà)里，封面是黑白印刷的。但是，所有這些章節(jié)的封面都已在幾本 CCS 藝術(shù)書(shū)籍中以全彩色出版。因此，我從 CCS Wiki 頁(yè)面中搜索并下載了相應(yīng)的彩色圖像。

使用 R 語(yǔ)言 中的圖片處理庫(kù) imager，我將圖像加載到 R 中，將每個(gè)像素都轉(zhuǎn)換為以 RGBA 值表示的多維數(shù)組。我將這一復(fù)雜數(shù)組轉(zhuǎn)換為更簡(jiǎn)單的數(shù)據(jù)格式即：(像素?cái)?shù)) * 3 (分別為 r/g/b)。為了弄清楚哪種算法能較好的將像素值聚類成合適的顏色分組，我嘗試了幾件事。首先，我嘗試使用不同的聚類技術(shù)：從標(biāo)準(zhǔn)的均值聚類 K-means 到分層聚類 hierarchical clustering，甚至 tSNE；此外，我還使用 colorspace 庫(kù)，將每個(gè)像素的 RGB 值轉(zhuǎn)換到其他顏色空間（此時(shí)顏色間具有不同的“距離”，因此可以產(chǎn)生不同的聚類效果）。

我將每個(gè)測(cè)試結(jié)果轉(zhuǎn)換成如下所示的條形圖，以查看得到的顏色分組。最終，我發(fā)現(xiàn)使用 K-means 聚類搭配顏色轉(zhuǎn)換成 Lab 時(shí)，效果最佳。

但是，使用 K-means 有個(gè)棘手問(wèn)題是要確定使用多少個(gè)聚類數(shù)來(lái)進(jìn)行分組。起初我嘗試結(jié)合分層聚類來(lái)使用，但最終還是決定用自己的眼睛來(lái)判斷，可能會(huì)更好（雖然更耗時(shí)）！我為每一章都創(chuàng)建了一張下面的圖，該圖顯示了抽取3-11(不想過(guò)多)個(gè)顏色簇時(shí)各自的顏色分布。然后，我將實(shí)際封面與這些分相比較，選擇了最合適的一組：在捕獲所有顏色和很好地融合不同顏色之間取得平衡。其中最佳分組的十六進(jìn)制顏色 hex colors 及其百分比 ％s（柱形高度）保存到 json 中后面會(huì)用到。

為了補(bǔ)充章節(jié)封面的數(shù)據(jù)，我還想收集每章中出現(xiàn)了哪些人物以及每張卡牌在哪章被捕獲的信息（ CCS 是關(guān)于 小櫻/Sakura 收集魔法庫(kù)洛牌 magical Clow cards 的故事）。每章的CCS Wiki頁(yè)面似乎有用，但遺憾的是，這里只有前8章有上述信息。別無(wú)他法，我只能自己重新閱讀所有章節(jié)，并將所需信息慢慢填到 Excel 文件里??。

由于本月的項(xiàng)目最終以“分層”可視化(一圈圈)的形式呈現(xiàn)，所以在整個(gè)創(chuàng)作過(guò)程中我最終將所有這些信息拆分成7個(gè)小文件（每個(gè)章節(jié)/封面中出現(xiàn)的人物，每個(gè)人物出現(xiàn)過(guò)的章節(jié)數(shù)百分比，人物之間的關(guān)系，顏色分布等等）。我更喜歡用 R 語(yǔ)言 預(yù)先準(zhǔn)備好所有數(shù)據(jù)，我發(fā)現(xiàn)這是最簡(jiǎn)單的方式，這樣不會(huì)使我的 JavaScript 代碼太混亂。

第2周| 草圖 sketch

弄清本月可視化怎么設(shè)計(jì)的進(jìn)展很緩慢。這更像多米諾骨牌效應(yīng)，某個(gè)方面更具體的想法會(huì)導(dǎo)致后續(xù)另一方面數(shù)據(jù)探索想法的模糊(古柳：畢竟時(shí)間就那么多)。我從如何可視化顏色開(kāi)始：漫畫(huà)的每章用一簇帶顏色的小圓圈表示，這似乎是合邏輯且有趣的一步；之后，將顏色簇以徑向布局，也是顯而易見(jiàn)的選擇。盡管起初我想做一個(gè)半圓，顏色簇在右，人物信息在左。但是，因?yàn)橛?0章，就需要盡可能多的空間。 因此，這就是為什么我采用分層的方式，內(nèi)圈小圓圈是所有人物，外圈大圓圈是所有章節(jié)的顏色簇，將這兩個(gè)圓圈用線連接起來(lái)，以顯示哪些人物出現(xiàn)在哪些章節(jié)中。

我一直對(duì) CMYK 點(diǎn)打印過(guò)程/CMYK dot printing process 著迷；當(dāng)你近距離觀察時(shí)可以看到單獨(dú)的點(diǎn)，但遠(yuǎn)點(diǎn)觀察，可以看到更大的畫(huà)面（我想我并不是唯一一個(gè)會(huì)用鼻子從字面上觸摸舊雜志、或舊電視（看RGB條紋）的人，對(duì)吧？）。重新創(chuàng)建這種 CMYK點(diǎn)技術(shù)，以可視化展示（印刷）漫畫(huà)，似乎是一種合適的方式，當(dāng)然也更具挑戰(zhàn)。確實(shí)很有挑戰(zhàn)！我不會(huì)在這里進(jìn)行詳細(xì)介紹（你可以在代碼部分了解更多內(nèi)容），但是在下圖的右側(cè)，您可以看到我為了解如何重新創(chuàng)建 CMYK 效果而畫(huà)的一些草稿（需要進(jìn)行旋轉(zhuǎn)操作...）。

本月的另一個(gè)數(shù)學(xué)挑戰(zhàn)是我最終未使用的一些東西......最初，我想用螺旋線將人物內(nèi)圈與章節(jié)外圈相連（從技術(shù)上講，兩個(gè)相連的 SVG 三次貝塞爾曲線/SVG Cubic Bézier Curves）。為確保這些線將始終圍繞內(nèi)圈并看起來(lái)不錯(cuò)，我在素描本中花了大量的時(shí)間和注釋！我總是喜歡畫(huà)出我能想到的近似 SVG 路徑形狀，然后嘗試找出應(yīng)該放置的新點(diǎn)和錨點(diǎn)的位置。真正困難的部分是知道這些點(diǎn)和錨點(diǎn)在數(shù)據(jù)變化時(shí)如何相應(yīng)變化，如何創(chuàng)建適用于所有實(shí)例的“公式”。

下圖專門(mén)展示了在不同情況下如何處理圓切線的計(jì)算。我需要這些信息以用于上面的那些螺旋線。盡管我嘗試了不同的線，但幸運(yùn)的是，我最終項(xiàng)目里只用到了這兩頁(yè)里部分的內(nèi)容以方便地轉(zhuǎn)換線條（更圓的線）。

第三周和第四周| 編程

我首先專注于在屏幕上放置顏色圓圈。主要是因?yàn)槲蚁氡M快看看 CMYK 這一想法的效果如何。多虧了Shirley 這個(gè)多數(shù)據(jù)點(diǎn)引力布局的出色示例，使一切簡(jiǎn)單了很多！但糟糕的是，這些圓圈必須變得很小，才能為所有50個(gè)章節(jié)騰出空間。我開(kāi)始懷疑 CMYK 效果是否能像我希望的那樣在這次特殊設(shè)計(jì)中發(fā)揮作用......

盡管如此，我還是先投入 Veltman 的令人驚嘆的代碼，在這里他已經(jīng)將 CMYK 點(diǎn)效果巧妙地編碼成 SVG 模式（順便提下，我開(kāi)始在Pinterest / DataViz | D3.js Demos - Nadieh Bremer上收集自己喜歡的 d3.js 內(nèi)容），所以我有個(gè)視覺(jué)化的“書(shū)簽”方便檢索。重寫(xiě)代碼，為每種顏色創(chuàng)建一種單獨(dú)的圖案，然后我得到一個(gè)充滿了基于 CMYK 顏色圓圈的圓環(huán)。但是仔細(xì)檢查后，我發(fā)現(xiàn)了一些我不喜歡的東西，盡管里面的圓圈看起來(lái)確實(shí)像我想要的，但它們?nèi)匀皇?SVG 元素。它們已經(jīng)完美地被剪裁成一個(gè)圓圈，就像被剪裁的圖案。但是我希望我的 CMYK 點(diǎn)的邊緣更平滑；以及我還想嘗試下使圓圈部分重疊，并使顏色進(jìn)一步混合，這些都是當(dāng)前的實(shí)現(xiàn)無(wú)法達(dá)到的。

因此，我在網(wǎng)上進(jìn)行了廣泛搜索，以查找其他示例。我已經(jīng)預(yù)料到使用HTML5 Canvas 或許能行。我確實(shí)找到了兩個(gè)示例：canvas-halftoning.html和COLOR HALFTONE FILTER FOR CANVAS 2D，并花了3-4個(gè)小時(shí)將其合并到一起，其中進(jìn)行了大量的測(cè)試和調(diào)整......

最終，我得到了視覺(jué)上的另一種可選方案，并且看起來(lái)像是我想要的。首先是平滑的邊緣，點(diǎn)在邊緣部分會(huì)變小，但是整個(gè) CMYK 點(diǎn)仍然是完整的點(diǎn)，而且，我還可以在兩個(gè)圓的 CMYK 效果都可見(jiàn)的情況下，畫(huà)出彼此重疊的圓。

然后我將其應(yīng)用到50個(gè)章節(jié)中的所有圓圈上......預(yù)料之中，圓圈太小，以至于沒(méi)有“足夠的CMYK”。有時(shí)很難感受到圓圈的真實(shí)顏色，因?yàn)樗话贁?shù)的CMYK點(diǎn)??。

好吧，（可視化）設(shè)計(jì)有時(shí)候就是這樣，花費(fèi)數(shù)小時(shí)完成的工作可能最后也不一定生效。因此，我將一個(gè)簡(jiǎn)單的版本整理出來(lái)：Canvas CMYK Halftone effect，沒(méi)準(zhǔn)哪天還能用上，并且再次看看最初的 SVG 版本。那些粗糙的外邊緣該如何處理？ ...嗯...加上粗筆觸如何？是的，這對(duì)我來(lái)說(shuō)就足夠了，哈哈??

我以為內(nèi)圈和外圈之間的連線可能是接下來(lái)要解決的最困難的事情，但是要正確地做到這一點(diǎn)，我首先需要內(nèi)圈。使用d3的弧線和餅圖布局(d3.arc()/d3.pie()，Donut Chart)，可以輕松地繪制出我草圖中預(yù)想的那種薄薄的甜甜圈圖donut chart。在進(jìn)行外部線條處理之前，我首先想看看內(nèi)圈人物之間的連接/關(guān)系是否在“視覺(jué)上生效”。因?yàn)槿绻簧?，我可能不得不考慮其他總布局。

是時(shí)候再次編寫(xiě)一些自定義 SVG 路徑了！下圖展示了路徑優(yōu)化的過(guò)程，從左上到右下，最初版本是最簡(jiǎn)單的直線，最終版本由圓形組成(路徑形狀更巧妙)，使用 SVG arc 指令，重用了 「十一月奇幻小說(shuō)」 一文中為小圓弧編寫(xiě)的代碼。

然后我根據(jù)連接的關(guān)系類型（如家人、愛(ài)人）為線條上色，這使我看到那里不會(huì)因?yàn)橛刑嗑€條而無(wú)法獲得洞見(jiàn)，沒(méi)有視覺(jué)上的負(fù)擔(dān)。OK，接下來(lái)就可以處理外部線條了......

我創(chuàng)建的最夸張的線條是連接人物與圓圈另一側(cè)的章節(jié)，這條線將不得不繞過(guò)內(nèi)圈，而不觸碰到其他人物的名字。我想我可以通過(guò)組合2條三次貝塞爾曲線Cubic Bézier Curve來(lái)實(shí)現(xiàn)這一目標(biāo)。但是，依照數(shù)據(jù)，使其中一條曲線如所想的繪制就已經(jīng)夠麻煩，兩條曲線更是兩倍以上的麻煩。o_O

對(duì)于困難的 SVG 路徑，我總是首先沿線條路徑自身放置小圓圈（下圖中的紅色圓圈）+ 錨點(diǎn)（藍(lán)色、綠色和橙黃色的圓圈，由于另一個(gè)原因，我放置了粉色的圓圈，但太過(guò)技術(shù)性所以這里不做解釋了）

經(jīng)過(guò)一番手動(dòng)調(diào)整后，我得到了還算喜歡的長(zhǎng)線條版路徑。我保存了這些設(shè)置，然后又做了版短線條的。接著，檢查這兩種方式所有設(shè)置的不同，這給了我如何提煉公式的靈感，以便無(wú)論起點(diǎn)和終點(diǎn)如何變化，都能生成不錯(cuò)的線條。但是，如我所言，這次并沒(méi)有我想的那么簡(jiǎn)單...

唉，我甚至不敢回想我是怎么一步步得到想要的線條的。我的草稿中大多數(shù)注釋都和這部分有關(guān)。因?yàn)楫?dāng)線逆時(shí)針而不是順時(shí)針旋轉(zhuǎn)時(shí)，需要做些略微不同的事情。如果您把所有事情都搞砸了，那么就像會(huì)像下圖這樣......

經(jīng)過(guò)多少個(gè)小時(shí)的測(cè)試、繪制、思考和調(diào)整，我才使所有線條都至少圍繞中心排列。盡管這里線條的細(xì)微細(xì)節(jié)仍然相當(dāng)奇怪。

我沒(méi)有記錄“創(chuàng)建線條”這部分耗時(shí)多久，但大概在8到10個(gè)小時(shí)之間。之后，當(dāng)我將所有線條可視化，效果如下（這里顯示了每個(gè)人物出現(xiàn)的所有章節(jié)）：

好吧，看起來(lái)還是很混亂！線條太多以致無(wú)法獲取任何洞見(jiàn)。這意味著我將不得不創(chuàng)建某種懸浮交互效果，當(dāng)鼠標(biāo)懸浮在人物或章節(jié)上時(shí)，顯示相應(yīng)部分的線條。

到目前為止，在這些線條上花費(fèi)了太多時(shí)間。因此，我想繼續(xù)添加章節(jié)和卷號(hào)。內(nèi)部的甜甜圈圖也啟發(fā)了我在章節(jié)部分嘗試類似的方式。一個(gè)包含50個(gè)大小相等部分的甜甜圈圖，并在每一部分放置一個(gè)數(shù)字表示章節(jié)號(hào)。我對(duì)最終結(jié)果感到滿意，并且快速推進(jìn)。

對(duì)于漫畫(huà)的卷（通常為±4章），一開(kāi)始我也帶著相同的想法：一個(gè)更薄的甜甜圈圖，將其放在圓圈簇外側(cè)。但我對(duì)此并不滿意，與此同時(shí)，還有些事情困擾著我。現(xiàn)在，我要在頁(yè)面上放置更多元素，并且所有這些元素似乎都具有“統(tǒng)一性”，除了那些內(nèi)部線條??

也許像我在一月份 Dragonball Z 的可視化中所做的那樣，通過(guò)使它們變細(xì)，讓它們具有更多的“主體內(nèi)容”？再次花許多時(shí)間來(lái)調(diào)整我的線條公式......盡管我認(rèn)為它確實(shí)比我以前使用的相同寬度的線條有所改善：

當(dāng)我實(shí)現(xiàn)懸浮交互時(shí)，效果不錯(cuò)。例如看看某一章出現(xiàn)了哪些人...

...或?qū)⑹髽?biāo)懸浮在人物上以查看他們出現(xiàn)的所有章節(jié)...

...但是，我只是覺(jué)得就設(shè)計(jì)而言，其余的視覺(jué)效果還是不太好。??！接下來(lái)該怎么辦！投入了這么多時(shí)間了！??

突然，在知道我的螺旋線不合適后，我很快對(duì)這些線條有了新的想法。我甚至忘了是什么啟發(fā)了我的靈感，它似乎憑空而來(lái)（盡管事實(shí)并非如此）。除了使它們環(huán)繞，我還可以使它們沿著圓形路徑繪制。有點(diǎn)像地鐵線或房屋中的管道，只不過(guò)變成徑向布局。

這個(gè)想法實(shí)際上很容易實(shí)現(xiàn)。我可以遍歷要繪制的每條線，生成由[半徑, 弧度]/[radius，angle] 組成的數(shù)組，并將其傳給 d3.radialLine() 函數(shù)。同時(shí)設(shè)置插值函數(shù)使邊緣彎曲。與之前的三次貝塞爾曲線相比，計(jì)算半徑和角度的數(shù)組并傳給 d3.radialLine() 不知簡(jiǎn)單了多少倍。（雖然享受解決幾何難題確實(shí)有幫助）。當(dāng)然，所有這些在第一次嘗試時(shí)沒(méi)有馬上成功，但值得慶幸的是，我可以用到螺旋線中做過(guò)的一些工作。下圖均在1小時(shí)內(nèi)完成，進(jìn)展不錯(cuò)。??

然后我使用非常有用的 .context 方法將所有這些線條轉(zhuǎn)換成 HTML5 canvas，這在 d3 的許多繪圖函數(shù)中都可用（例如 d3.radialLine() ），這樣懸浮交互就更流暢了！

通過(guò)線條的變化，我覺(jué)得當(dāng)懸浮在某個(gè)人物或章節(jié)上時(shí)，所得的線條在結(jié)束位置均以“直角”呈現(xiàn)（我希望這更有道理的，呵呵）。另外一個(gè)好處是，沒(méi)有更多的線條發(fā)生重疊！

細(xì)心的人會(huì)注意到，我實(shí)際上實(shí)現(xiàn)了兩種略有不同的線條“類型”。默認(rèn)情況，不懸浮，或懸浮在人物與顏色簇上時(shí)，會(huì)繪制一種；當(dāng)鼠標(biāo)懸浮在章節(jié)上時(shí)，會(huì)繪制另一個(gè)?？勺孕袊L試，看看區(qū)別。

由于可視化的一部分與各章的封面有關(guān)，而且我知道大多數(shù)打開(kāi)這個(gè)頁(yè)面的人可能并不知道 CCS，所以我想收錄其中的某些圖像。而且恰好在中央有一個(gè)不錯(cuò)的圓形區(qū)域：) 我花了些時(shí)間才從所有50個(gè)章節(jié)的封面中手動(dòng)“切出”了一個(gè)漂亮的方形圖像，那時(shí)我還在機(jī)場(chǎng)和飛機(jī)上（從“信息就是美麗獎(jiǎng)” Beautiful Awards 回來(lái)的一個(gè)美好夜晚，那次我們的 data sketches 拿了金獎(jiǎng)！Woohoo!）

以上可視化中包含了所有這些元素和信息層后，我確實(shí)需要加個(gè)圖例。由于最近的兩個(gè)給客戶的項(xiàng)目中，我寫(xiě)了許多代碼來(lái)創(chuàng)建自定義圖例（例如，Article 19 上的這個(gè)項(xiàng)目）因而，我不想再來(lái)一遍，于是改用 Illustrator 創(chuàng)建圖例，這比用代碼實(shí)現(xiàn)節(jié)省了很多的時(shí)間。

我最初將它們放置在可視化圖表的下方，但是（本月已習(xí)慣了這種情況），這并不是最終的圖例......

但是扯回來(lái)，既然圖表本身快要完成了，我將重點(diǎn)放在一般的頁(yè)面布局和注釋說(shuō)明上。對(duì)于布局，我遇到了很多麻煩，甚至提出了一些看起來(lái)很有趣的東西。老實(shí)說(shuō)，我對(duì)最終結(jié)果仍然不滿意，但我還不能真正為它設(shè)計(jì)網(wǎng)頁(yè)，而只能設(shè)計(jì)數(shù)據(jù)可視化，hehe??

隨后為了使該布局兼容移動(dòng)設(shè)備和電腦端顯示...??由于不是什么值得記述的內(nèi)容，就此略過(guò)，只需知道我又花了許多時(shí)間和精力即可。

我加上了些我想強(qiáng)調(diào)的、有趣的故事看點(diǎn)，以便大家閱讀所有章節(jié)時(shí)能有所了解。使用 Susie Lu 出色的 d3-annotation 庫(kù)，將這些添加到圓圈周圍非常簡(jiǎn)單，尤其是使用超級(jí)方便的編輯模式 editmode，我可以拖動(dòng)注釋，獲取合適的位置，然后將這些硬編碼的位置寫(xiě)到代碼中。

但是在放置完所有注釋后（上圖為合適的視覺(jué)效果），我對(duì)結(jié)果仍不滿意。通常，我喜歡在要注釋的線上加上文字注釋。但是，這樣會(huì)引入太多視覺(jué)重量visual weight。

因此，我想用從主圓圈向外輻射的短線，并將注釋放在與顏色簇中心對(duì)齊的外圍。而且，盡管 d3-annotation 庫(kù)提供了諸多便捷，但是卻不包含上述特殊設(shè)計(jì)，因此，我自己創(chuàng)建短線，然后使用編輯模式（參見(jiàn)下圖的虛線小圓圈，您可以隨意拖動(dòng)這些圓）將注釋精確地放在我想要的位置。

在我覺(jué)得可視化已經(jīng)差不多完成后，我和一些朋友分享了該作品，以征求反饋，也獲得了改善交互理解方面的很棒的建議。其中，還有一個(gè)人給我分享了一個(gè)更好的圖例的案例，可視化里展示了每圈并解釋每圈的真正含義，這比我之前那三個(gè)獨(dú)立的圖例要好得多，所以我在 Illustrator 中重畫(huà)了個(gè)圖例。

花費(fèi)許多的時(shí)間和精力后，我終于做出了這個(gè)可視化項(xiàng)目，與大家分享:)，鏈接在此：Cardcaptor Sakura - Fifty chapters of adorable cuteness

這個(gè)月我花了86個(gè)小時(shí)來(lái)完成這個(gè)項(xiàng)目。但是，大部分時(shí)間都花在了最終沒(méi)用上的事情上。例如在基于 CMYK 畫(huà)布的點(diǎn)效果上花了±5小時(shí)，在螺旋線上花了±15小時(shí)，在最終可能沒(méi)人會(huì)點(diǎn)擊查看的頁(yè)面布局上花了±6小時(shí)（除非您點(diǎn)頁(yè)面上的“read more”），以及在水平滾動(dòng)的、愚蠢的 Chrome bug 上花了±2個(gè)小時(shí)（以及如何“修復(fù)”）。

盡管如此，我對(duì)可視化的結(jié)果還是很滿意的 :)，我覺(jué)得我之前沒(méi)有看到過(guò)類似的徑向可視化作品。data sketches 總是嘗試新的想法，所以當(dāng)某個(gè)想法結(jié)果不錯(cuò)時(shí)總是件值得高興的事^ _ ^希望您在交互這個(gè)可視化項(xiàng)目時(shí)會(huì)喜歡，即使您此前從未聽(tīng)說(shuō)過(guò)「百變小櫻」（很棒的漫畫(huà)！相信我！）。