2017最佳數(shù)據(jù)可視化案例，竟是個(gè)音樂劇freestyle
來源：THU數(shù)據(jù)派 時(shí)間：2017-07-05 11:51:36 作者：Joel & Erik
【導(dǎo)讀】《漢密爾頓》這部紅極一時(shí)、創(chuàng)造票房奇跡的音樂劇，不僅讓奧巴馬全家觀看了兩次，也影響了整個(gè)美國(guó)百老匯。今年的“GEN數(shù)據(jù)新聞獎(jiǎng)”中的年度數(shù)據(jù)可視化獎(jiǎng)，就被來自《華爾街日?qǐng)?bào)》的作品“漢密爾頓的韻律”（The Rhymes Behind Hamilton）獲得。今天我們就來解析：這部神作是如何對(duì)rap復(fù)雜押韻結(jié)構(gòu)進(jìn)行識(shí)別和可視化處理的。
一個(gè)國(guó)民音樂劇引發(fā)的“腦洞”
最近，由全球編輯協(xié)會(huì)（Global Editors Network）評(píng)選的2017年“GEN數(shù)據(jù)新聞獎(jiǎng)”(Data Journalism Awards)在維也納霍夫堡宮公布，最具期待的“年度數(shù)據(jù)可視化獎(jiǎng)”，被一部剖析史詩(shī)級(jí)音樂劇《漢密爾頓》的可視化作品納入囊中。
這部講述美國(guó)政治先驅(qū)漢密爾頓傳奇一生的音樂劇，一上映就轟動(dòng)全美，票房與獎(jiǎng)項(xiàng)雙豐收，現(xiàn)已成為百老匯票價(jià)最高的劇目?！稘h密爾頓》講述了幾個(gè)年輕的造反者如何使得一個(gè)不存在的國(guó)家逐漸成形的故事，也是對(duì)美國(guó)“國(guó)父”級(jí)別人物亞歷山大-漢密爾頓傳奇人生的演繹。
（圖片說明：《漢密爾頓》音樂劇海報(bào)）
這部劇一個(gè)有別于其他音樂劇的特點(diǎn)，在于它主要以美國(guó)流行的rap（說唱）形式貫穿整條故事線。在劇中這個(gè)說唱橫行的世界中，語(yǔ)速、唱詞、押韻風(fēng)格才是人物性格、才智最直接的映射。
從音樂角度而言，《漢密爾頓》歌曲的旋律、節(jié)奏為何能夠如此深入人心？歌詞的押韻又是怎樣生動(dòng)地刻畫劇中的每一個(gè)角色呢？
這個(gè)由《華爾街日?qǐng)?bào)》創(chuàng)意并制作的可視化作品“漢密爾頓的韻律”（The Rhymes Behind Hamilton），或許可以提供答案。
（圖片說明：“漢密爾頓的韻律”中，對(duì)音樂劇押韻的可視化展示）
誰說說唱僅僅是一種freestyle的歌詞拼湊？
急速的咬字背后體現(xiàn)的正是創(chuàng)作者對(duì)于歌詞押韻的掌控能力。上面這張動(dòng)圖把一句rap中的押韻模式完整呈現(xiàn)了出來，每個(gè)菱形塊都代表一個(gè)音節(jié)的押韻，顏色與歌詞對(duì)應(yīng)，你可以從動(dòng)效中看出饒舌作曲家的想表達(dá)的情感起伏，輕重強(qiáng)弱都是一種態(tài)度。
感受到rap的節(jié)奏和韻律了嗎？
從方格顏色可以看出，歌詞中的“squalor”和“scholar”，“Scotsman”和“droppedin”的在元音、輔音組成上的一致性。
這種隱藏在歌詞中的平仄起伏，是作品作者——《華爾街日?qǐng)?bào)》的數(shù)據(jù)記者JoelEastwood和程序開發(fā)員ErikHinton最初的靈感來源，他們將每個(gè)詞匯之間的押韻模式、加上顏色上的跳躍與對(duì)比，最終以可視化的方式呈現(xiàn)在觀眾眼前。
我們?cè)賮砀惺芤欢危?/p>
不同歌詞的韻律，也和劇中角色的人物特點(diǎn)相對(duì)應(yīng)。
上面視頻中的rapper是大腹便便的BigPun，可以聽出這段旋律的押韻帶有明顯的厚重感。其中反復(fù)重復(fù)的兩個(gè)音節(jié)，如果都是元音，那就是所謂的疊韻；如果有一個(gè)輔音，那就是輔音韻。
最后這個(gè)視頻，色塊看似有些雜亂無章，其實(shí)是由于旋律的呈現(xiàn)是受到西海岸說唱歌手KendrickLamar的啟發(fā)，表現(xiàn)出明顯的彈跳性。
因此這段旋律的可視化呈現(xiàn)上，色彩選取更多樣，起伏范圍也更廣，沒有大量出現(xiàn)前幾段視頻中詞匯在元音、輔音組成上的一致性。
在DT君看來，這個(gè)作品的獨(dú)特之處在于生動(dòng)的展現(xiàn)了一種極少被可視化的聽覺感受，通過菱形的形狀和顏色的變化，呈現(xiàn)出隱藏在音樂背后的押韻結(jié)構(gòu)，讓觀眾理解創(chuàng)作者在韻律背后傳達(dá)的人物情感。
這個(gè)獨(dú)具創(chuàng)意的作品，起于一個(gè)簡(jiǎn)單的Python程序
最初，由于對(duì)音樂劇《漢密爾頓》的共同愛好，《華爾街日?qǐng)?bào)》的數(shù)據(jù)記者JoelEastwood和程序開發(fā)員ErikHinton，給《華爾街日?qǐng)?bào)》的商業(yè)視覺團(tuán)隊(duì)貢獻(xiàn)了一個(gè)選題的“點(diǎn)子”：
如果我們來分析下音樂劇《漢密爾頓》的押韻節(jié)奏，可以得到些什么呢？
為此，兩個(gè)人寫了一個(gè)簡(jiǎn)單的Python程序，來匹配相似的語(yǔ)音音節(jié)，下面這些圖片展示了作者最初的一些思考：
（圖片說明：歌詞押韻匹配不同色塊進(jìn)行編碼）
在最早一版的設(shè)計(jì)草案中，可視化的基礎(chǔ)元素是這樣的：給顏色編碼，給歌詞做注釋，伴隨著一個(gè)復(fù)雜的水平的圖，來展示押韻結(jié)構(gòu)。
接下來，ErikHinton在這個(gè)基礎(chǔ)上增加了算法的深度和復(fù)雜性，添加了一個(gè)命令行可視化器，通過將每個(gè)單詞分解成音節(jié)，再將它們轉(zhuǎn)換成語(yǔ)音來實(shí)現(xiàn)。
例如，“Ha-mil-ton”的三個(gè)音節(jié)分為聲音“HH-AE”，“M-AH-L”和“TON”，這些發(fā)音會(huì)被分別打分，并會(huì)拿來和其他的發(fā)音的力度、鄰近度、元音、輔音等進(jìn)行對(duì)比，如果得分較高，那么就會(huì)被認(rèn)為是押韻，這些相似的音節(jié)則會(huì)被算法歸為一個(gè)“押韻組”。
押韻的算法代碼最初是用Python編寫的，通過終端進(jìn)行運(yùn)行，這樣可以快速測(cè)試，并根據(jù)需要進(jìn)行修改。
后來在反饋意見基礎(chǔ)上，項(xiàng)目開發(fā)人員用JavaScript重新做了調(diào)整，這樣用戶甚至可以自己上傳歌詞并創(chuàng)建自己的可視化旋律。（注：點(diǎn)擊閱讀原文，進(jìn)入得獎(jiǎng)作品網(wǎng)頁(yè)即可運(yùn)用工具制作可視化歌詞~）
（圖片說明：DT君親測(cè)，碧昂斯《Formation》中的可視化歌詞）
尋找音樂的最佳可視化方式
為了做好可視化，項(xiàng)目人員開始使用的是Photoshop，Illustrator和AfterEffects，希望該項(xiàng)目更具有“體驗(yàn)感”，也就是有更多的沉浸式體驗(yàn)。為了增加互動(dòng)性，他們還加入了動(dòng)畫效果。
這個(gè)階段，項(xiàng)目開發(fā)人員開始思考如何將可視化和詞匯更好地連接在一起。
（圖片說明：“漢密爾頓的韻律”開發(fā)過程中，考慮過的詞匯動(dòng)畫展現(xiàn)形式之一）
（圖片說明：“漢密爾頓的韻律”開發(fā)過程中，考慮過的詞匯動(dòng)畫展現(xiàn)形式之二）
項(xiàng)目開發(fā)人員向團(tuán)隊(duì)中的其他人展示了可視化成果后發(fā)現(xiàn)，很多人會(huì)對(duì)圖中的顏色和點(diǎn)的含義感到疑惑。因?yàn)樯珘K都是被孤立地顯示出來，并沒有與文本緊密相連。
于是，大家開始嘗試通過視覺隱喻來解決問題。
在新的設(shè)計(jì)中，虛擬了一個(gè)五線譜，來幫助用戶理解這些點(diǎn)定位在哪里以及這些押韻之間的關(guān)聯(lián)：標(biāo)簽化的Y軸可以幫助把同一個(gè)押韻類型的字詞整合起來。
但是這樣的設(shè)計(jì)會(huì)讓讀者混亂，因?yàn)橥ǔＮ寰€譜代表的是音樂和旋律，而這里的五線譜則代表歌詞和押韻。為此，設(shè)計(jì)人員又進(jìn)行了多次迭代來改進(jìn)，這才最后得到了上文中我們看到的最終版作品。
（圖片說明：借助五線譜的形式來呈現(xiàn)押韻的整合）
設(shè)計(jì)中用過的技術(shù)
這個(gè)作品從呈現(xiàn)上簡(jiǎn)單輕快，其實(shí)實(shí)現(xiàn)難度頗高。這里也給大家列出了這個(gè)作品中用到的一些技術(shù)：
在CMU發(fā)音字典（卡耐基梅隆大學(xué)發(fā)音詞典）的基礎(chǔ)上的音節(jié)分析
Python、nltk和networkx等編程語(yǔ)言
Javascript移植
通過SED jsnetworkx來建立押韻音節(jié)圖之間的關(guān)系
Markov Clustering提供的開源算法
通過“模擬退火算法”給同一種押韻類型的字詞排序，以顯得更有節(jié)奏感
使用了D3來制作可視化，并且使用了jPlayer資源庫(kù)的MP3音頻
這個(gè)作品發(fā)表出來后引起了不小的反響：得到了音樂劇創(chuàng)作者LinManuel-Miranda，在自己的Twiter上發(fā)了推文做推薦，而圍繞這部作品，作者甚至還寫了一篇論文，入選了斯坦福大學(xué)的計(jì)算機(jī)新聞學(xué)會(huì)議。
從生活中的一個(gè)愛好，一個(gè)小想法，到動(dòng)手“制作”一個(gè)開創(chuàng)性的可視化作品，最終載入論文，DT君覺得，這樣的作品能把業(yè)界大獎(jiǎng)囊入懷中也在情理之中了。
一向關(guān)注數(shù)據(jù)人的DT君，也期待中國(guó)數(shù)據(jù)圈的數(shù)據(jù)俠們能推出更多令人期待的可視化作品。
本文參考資料
1.GEN數(shù)據(jù)大賽官網(wǎng)作品介紹頁(yè)：
http://www.21jieyan.cn
2.“漢密爾頓的韻律”的創(chuàng)作經(jīng)過
http://www.21jieyan.cn
責(zé)任編輯：陳近梅