这个2017最佳数据可视化案例，竟是个音乐剧freestyle
这个2017最佳数据可视化案例，竟是个音乐剧freestyle
《汉密尔顿》这部红极一时、创造票房奇迹的音乐剧，不仅让奥巴马全家观看了两次，也影响了整个美国百老汇。今年的“GEN数据新闻奖”中的年度数据可视化奖，就被来自《华尔街日报》的作品“汉密尔顿的韵律”（The Rhymes Behind Hamilton）获得。DT君今天就来解析：这部神作是如何对rap复杂押韵结构进行识别和可视化处理的。
▍一个国民音乐剧引发的“脑洞”
最近，由全球编辑协会（Global Editors Network）评选的2017年“GEN数据新闻奖”(DataJournalism Awards)在维也纳霍夫堡宫公布，最具期待的“年度数据可视化奖”，被一部剖析史诗级音乐剧《汉密尔顿》的可视化作品纳入囊中。
这部讲述美国政治先驱汉密尔顿传奇一生的音乐剧，一上映就轰动全美，票房与奖项双丰收，现已成为百老汇票价最高的剧目。《汉密尔顿》是关于几个年轻的造反者如何使得一个不存在的国家逐渐成形的故事，也是对美国“国父”级别人物亚历山大-汉密尔顿传奇人生的演绎。
（图片说明：《汉密尔顿》音乐剧海报）
这部剧一个有别于其他音乐剧的特点，在于它主要以美国流行的rap（说唱）形式贯穿整条故事线的。在剧中这个说唱横行的世界中，语速、唱词、押韵风格才是人物性格、才智最直接的映射。
从音乐角度而言，《汉密尔顿》歌曲的旋律、节奏为何能够如此深的人心？歌词的押韵又是怎样生动地刻画剧中的每一个角色呢？
这个由《华尔街日报》创意并制作的可视化作品“汉密尔顿的韵律”（The Rhymes Behind Hamilton），或许可以提供答案。
（图片说明：“汉密尔顿的韵律”中，对音乐剧押韵的可视化展示）
谁说说唱仅仅是一种freestyle的歌词拼凑？
急速的咬字背后体现的正是创作者对于歌词押韵的掌控能力。上面这张动图把一句rap中的押韵模式完整呈现了出来，每个菱形块都代表一个音节的押韵，颜色与歌词对应，你可以从动效中看出饶舌作曲家的想表达的情感起伏，轻重强弱都是一种态度。
（视频很短，但依旧建议在wifi环境下播放～）
感受到rap的节奏和韵律了吗？
从方格颜色可以看出，歌词中的“squalor”和“scholar”，“ Scots man ” 和 “ dropped in ”的在元音、辅音组成上的一致性。
这种隐藏在歌词中的平仄起伏，是作品作者——《华尔街日报》的数据记者Joel Eastwood和程序开发员Erik Hinton最初的灵感来源，他们将每个词汇之间的押韵模式、加上颜色上的跳跃与对比，最终以可视化的方式呈现在观众眼前。
我们再来感受一段：
不同歌词的韵律，也和剧中角色的人物特点相对应。
上面视频中的rapper是大腹便便的Big Pun，可以听出这段旋律的押韵带有明显的厚重感。其中反复重复的两个音节，如果都是元音，那就是所谓的叠韵；如果有一个辅音，那就是辅音韵。
最后这个视频，色块看似有些杂乱无章，其实是由于旋律的呈现是受到西海岸说唱歌手Kendrick Lamar的启发，表现出明显的弹跳性。
因此这段旋律的可视化呈现上，色彩选取更多样，起伏范围也更广，没有大量出现前几段视频中词汇在元音、辅音组成上的一致性。
在DT君看来，这个作品的独特之处在于生动的展现了一种极少被可视化的听觉感受，通过菱形的形状和颜色的变化，呈现出隐藏在音乐背后的押韵结构，让观众理解创作者在韵律背后传达的人物情感。
▍这个独具创意的作品，起于一简单的Python程序
最初，由于对音乐剧《汉密尔顿》的共同爱好，《华尔街日报》的数据记者Joel Eastwood和程序开发员Erik Hinton，给《华尔街日报》的商业视觉团队贡献了一个选题的“点子”：
如果我们来分析下音乐剧《汉密尔顿》的押韵节奏，可以得到些什么呢？
为此，两个人写了一个简单的Python程序，来匹配相似的语音音节，下面这些图片展示了作者最初的一些思考：
（图片说明：歌词押韵匹配不同色块进行编码）
在最早一版的设计草案中，可视化的基础元素是这样的：给颜色编码，给歌词做注释，伴随着一个复杂的水平的图，来展示押韵结构。
接下来，Erik Hinton在这个基础上增加了算法的深度和复杂性，添加了一个命令行可视化器，通过将每个单词分解成音节，再将它们转换成语音来实现。
例如，“Ha-mil-ton”的三个音节分为声音“HH-AE”，“M-AH-L”和“TON”，这些发音会被分别打分，并会拿来和其他的发音的力度、邻近度、元音、辅音等进行对比，如果得分较高，那么就会被认为是押韵，这些相似的音节则会被算法归为一个“押韵组”。
押韵的算法代码最初是用Python编写的，通过终端进行运行，这样可以快速测试，并根据需要进行修改。
后来在反馈意见基础上，项目开发人员用JavaScript重新做了调整，这样用户甚至可以自己上传歌词并创建自己的可视化旋律。（DT君注：点击阅读原文，进入得奖作品网页即可运用工具制作可视化歌词~）
（图片说明：DT君亲测，碧昂斯《Formation》中的可视化歌词）
▍寻找音乐的最佳可视化方式
为了做好可视化，项目人员开始使用的是Photoshop，Illustrator和After Effects，希望该项目更具有“体验感”，也就是有更多的沉浸式体验。为了增加互动性，他们还加入了动画效果。
这个阶段，项目开发人员开始思考如何将可视化和词汇更好地连接在一起。
（图片说明：“汉密尔顿的韵律”开发过程中，考虑过的词汇动画展现形式之一）
（图片说明：“汉密尔顿的韵律”开发过程中，考虑过的词汇动画展现形式之一）
项目开发人员向团队中的其他人展示了可视化成果后发现，很多人会对图中的颜色和点的含义感到疑惑。因为色块都是被孤立地显示出来，并没有与文本紧密相连。
于是，大家开始尝试通过视觉隐喻来解决问题。
在新的设计中，虚拟了一个五线谱，来帮助用户理解这些点定位在哪里以及这些押韵之间的关联：标签化的Y轴可以帮助把同一个押韵类型的字词整合起来。
但是这样的设计会让读者混乱，因为通常五线谱代表的是音乐和旋律，而这里的五线谱则代表歌词和押韵。为此，设计人员又进行了多次迭代来改进，这才最后得到了上文中我们看到的最终版作品。
（图片说明：借助五线谱的形式来呈现押韵的整合）
▍设计中用过的技术
这个作品从呈现上简单轻快，其实实现难度颇高。这里也给大家列出了这个作品中用到的一些技术：
- 在CMU发音字典（卡耐基梅隆大学发音词典）的基础上的音节分析
- Python、 nltk和networkx等编程语言
- Javascript移植
- 通过SED jsnetworkx来建立押韵音节图之间的关系
- Markov Clustering提供的开源算法
- 通过“模拟退火算法”给同一种押韵类型的字词排序，以显得更有节奏感
- 使用了D3来制作可视化，并且使用了jPlayer资源库的MP3音频
这个作品发表出来后引起了不小的反响：得到了音乐剧创作者Lin Manuel-Miranda，在自己的Twiter上发了推文做推荐，而围绕这部作品，作者甚至还写了一篇论文，入选了斯坦福大学的计算机新闻学会议。
从生活中的一个爱好，一个小想法，到动手“制作”一个开创性的可视化作品，最终载入论文，DT君觉得，这样的作品能把业界大奖囊入怀中也在情理之中了。
一向关注数据人的DT君，也期待中国数据圈的数据侠们能推出更多令人期待的可视化作品。
▍本文参考资料
1.GEN数据大赛官网作品介绍页：
http://community.globaleditorsnetwork.org/node/28419
2.“汉密尔顿的韵律”的创作经过
https://source.opennews.org/articles/hamilton-algorithm/
编译 | 胡世龙 赵楠