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