风行音乐作为一种以消遣文娱为主的公共文化现象，已成为人们日常糊口的一部门。能够说，风行音乐无处不在，它的成长也呈现出史无前例的兴旺形态。今天的数据侠就用风行音乐的阶段性模子，将这几年来音乐形态的改变与风行趋向转化成可视化的新视角，一路来一探事实吧~

　　最初我选择了4个简单的直方图分隔展现过去18年里四个期间的数据，为了让这4个图更容易比力，我添加了滑润密度曲线。下面的图就是我间接通过R挪用ggplot2画图包制造的图（柱状的高度利用了分歧深浅的颜色区分。而为了不让这些直方图鹊巢鸠占吸引太多的眼球，我最终选择了灰色）。

　　可是若何判断未婚配的歌是确实理应婚配不上仍是出此刻Top40中但未被婚配呢？我采用的最初一个设法是利用每周音乐贴士（Tips of the week）。从1970年摆布起头，音乐网站在评选Top40时，还供给了一个20-30条摆布的扩充列表以列出一些不在Top40中，但被DJ认为将在或该当在榜单中的歌曲。

　　本年春天我加入了 Juan Velasco一家很棒的工作坊叫“ Information Graphics for Print and Online”。这家工作坊的一部门工作是绘制消息图。我的三人小团队对Top2000歌曲榜单都很是感乐趣，写下了大约40个可能的设法。

　　对于残剩的430首歌，我浏览了列表中的较长或少见的歌手名或歌曲名，这些是我认为可能是婚配方式没有成效但简直出此刻Top40中的歌曲，例如Top2000中的 Andrea Bocelli& Sarah Brightman对应Top40中的 Sarah Brightman& Andrea Bocelli 。我无法确定剩下的380首歌中有几多曾出此刻Top40里，可是说实话，颠末所有的数据处置以及我对数据的查抄，我认为这种环境低于10%。

　　诚恳说，我其实没有那么厉害，我最好的成就是通关难度在8/10级，而玩得最随手的则是6或者7/10级

　　进而，在雷同阿基米德螺线如许的螺旋线上等距离放置光点，其较好法子是取第N个点，使其满足：

　　以最新的Top2000榜单为核心，将统一年刊行的歌曲堆积在一路，通过蜜蜂群图来可视化。每一个圈（也就是一首歌）的大小由它们在Top40的最高排名来决定，颜色由它们在Top2000的排名决定。此中一些歌曲会添加正文，并高亮提醒，例如排名最高的新歌。

　　所以我也想在12月份也做出雷同的结果图。图中每一步都是一个光点，我根据该步法在歌曲中的位置来点亮响应的光点。在起步阶段，我将光点按照每一首歌曲的2个模式（mode）（单人、双人）(Single and Double)和三个难度层级（level）（根本、熟练、流利）(Basic, Trick, Maniac)投射到图中的各个步伐（step）上。

　　数据的爬取和清洗工作花费了我大要20个小时，构想和草图大要3小时，写代码和作图大要20-30小时（我不断告诉本人要赶长进度，呵呵）。完成这些静态图之后，这些可视化作品老是提示我，本人是何等喜好制造“可打印的”工具啊！

　　Top2000网站在本年12月19日公开分享了一份包含2000首歌的歌名、歌手、刊行年份等特征的Excel文件。

　　下面就是最终的消息图。除了英文版的我还做了一个荷兰语版本，终究数据反映的是荷兰的风行音乐文化。

　　然后，我起头征询懂计较机的伴侣，探索从这些图像中获取数据的方式。可是，Kenneth建议我先给DDR Freak发电子邮件，扣问他们能否有原始数据。对此我有些犹疑，由于DDR Freak的网站曾经至多5年没有任何变更了。可是，我仍是找到了一个电子邮件地址（Jason Ko，DDR Freak建立者），就想说，为什么不写一封信呢？归正也没希望可以或许获得答复。

　　完成蜜蜂群图（消息图的上部门）后，我认为需要有个玲珑的交互版本，如许你能够将鼠标悬停于圆圈上去看看它是哪首歌。我花了2-3个小时把蜜蜂群图用提醒插件和正文进行了优化。

　　有了这些消息，我就可以或许很快对.stp文件进行反向还原工程（reverse-engineer），同时我也发觉这些文件界面敌对，很容易上手，我最初也确实采用了这些文件来建模。

　　因为排名前十的歌曲圆圈最大，我特地把它们做成了黑胶唱片的外形（其实也就雷同一个红圈上面叠加一个小的白圈）。

　　无论是满足于此刻的成果或者将来更进一步，在这个月里，我最高兴的并非是这些处置流程以及最终的成果，而是热心的目生人们对我（近乎）完满的协助，这表白，确实有些人真的超赞啊！

　　对于最简单的螺旋线－－阿基米德螺线来说，螺旋线半径r(t)和螺旋角t成反比，因此等式能够表达为：

　　就在我陷入窘境时，带着仅有的两个针对界面设想的方针，我进入了梦境：一是要让每一首歌曲都变得紧凑，二是要让视觉化模仿的歌曲可以或许持续播放。当我第二天醒来时，脑海中呈现了螺旋线，并且我确信，这就是我的问题的谜底。螺旋线就象一个个圆圈，很是紧凑，同时也是一个很是根基的持续线条，可以或许把各个步法投射上去，持续播放出来。

　　因而我写了一个小爬虫法式，爬取了近50年的列表，保留了歌手名字、歌曲名称、歌曲界面地址以及排名位置。之后我将数据做了整合，使每一首歌都有唯逐个行数据（歌曲的URL是独一键），并保留了额外的消息，例如达到的最高排名以及在Top40上榜的周数。

　　随后，我为每一首歌曲都加了图例和过滤器（filter）（最早我把图例放在最上方的图片顶部，并作为过滤器用于所有歌曲，可是，我发觉如许做完全没有任何结果，因此转为别离为每一首歌曲配备过滤器）:

　　完成这些简单的元素设想并确定我不会再做任何更改了之后，我利用SVG Crowbar东西保留蜜蜂群图并用Illustrator打开。然后我把图片扭转25度角使其看起来结果更好，而且放上了正文（利用收集线来对齐行和列）。通过数据和Top2000的网站能够获得一些风趣的结论，好比Justin Timberlake在2016年具有一首排名最高的歌曲。

　　我在一个酒吧等人时，一小我坐在了我对面的空位上。于是我乘隙问他数学程度若何，然后，在我们通过电子邮件沟通了几回之后，他（Issac Kelly）给出了利用暴力算法（brute-forced）的解答。

　　这在荷兰比力少见，我最终选择利用每周Top40作为重点研究对象，一方面由于它从1965年起头持续到今日没有中缀，另一方面是它的数据看起来很好抓取。

　　不消担忧你不是荷兰人，Top2000榜单中90%都是英文歌。Queen常常排榜首，还有很多Beatles、U2、Michael Jackson的歌，所以这份列表对你来说可能很熟悉。

　　总的来说，考虑到起步较晚的环境，我对最终成果仍是比力对劲的。此刻，操纵螺旋线，我可以或许对多首歌曲进行对比，（颠末可视化之后）大的螺旋线（较长的歌曲）和细微的螺旋线都变得显而易见。还能一眼看出，对有些我以前喜好的歌曲来说，整首曲子确实有很多处所步伐很是紧凑，仅仅有少数几处中缀，难怪一听这些歌曲我就喘不上来气！

　　此时还有大约600首歌未被婚配。不外这并不是很蹩脚的事，由于不是所有的歌都在Top40中，例如排名第三的歌，Led Zeppelin with Stairway to Heaven ，由于它只刊行了唱片而没有刊行单曲。

　　我在处置上比力严酷，设定在题目和歌手名婚配时只能有两次变换（不然歌曲 U2的Bad 可能会被转换为肆意一首三个词的歌和2-3个词的歌手）。令人沮丧的是，这种方式只提高了2.5%的婚配率。这侧面申明，我很是需要在每一步处置后快速查抄一下所有已婚配的歌曲，以找犯错误的婚配。

　　最后，在我们同意12月份做音乐项目标时候，我感受相当苍茫。除了也许做点和K-POP（韩国风行音乐）相关的之外，我不晓得该当做什么。合理我和Kenneth Ormandy为找不到头绪而忧愁时，我猛然间想起了DDR（跳舞机游戏：劲舞革命，Dance Dance Revolution）。

　　由于我这个月曾经掉队太多太多，完全没有任何时间，所以我间接拿Issac的暴力算法，用于DDR步伐的编程:

　　那么，其参数等式则为（θcosθ,θsinθ），且在0和θf之间的弧长为：

　　若是你想操纵该数据集，以下是我操纵该数据编制的（超等间接）解析代码（parsing code），及其发生的.json文件。

　　我利用了R言语的stringdist包，用此中的Full Damerau-Levenshtein距离来比对两个榜单的歌曲名与歌手名（它计较了将b转为a时相邻字符发生的删除、插入、替代、转置等需要变换的数量）。

　　糊口在阿姆斯特丹的Nadish和在旧金山糊口的Shirley，配合在客岁12月份完成属于各自的一篇音乐可视化的小项目。他们各自用了4周完成创作，并写了下了两篇”创作笔记”。

　　就在这时，两个奇观呈现了：我把当前面对的窘境发布到Twitter上，成果Andrew Knauft 来协助我，给出了他本人所作出的细致推导。

　　有时我会看到艺术家重温本人过去完成的作品，来审视本人气概的变化（这也是我很爱做的事），我认为这个项目很适合去测验考试一下（在结果草图（sketch）的部门，你能够看到我其实曾经思虑这个设法长达几个月了）。

　　从一起头确定各自的选题，到收集数据完成阶段性结果草图，再到最终实现代码完成验证，他们履历了一些趣事，我们从中既能够看到音乐可视化模子的新视角，也但愿为大师在严冬里带来一丝暖意。

　　接下来是麻烦的处所，将Top40的歌手和歌曲与Top2000相婚配。当然我起首测验考试间接通过精准婚配歌手和歌曲名称来融合两张榜单，成果只要大要60%的歌曲被完全婚配。

　　开初，我用歌曲在Top40榜单的最高排名生成圈圈的大小，用他们在Top2000的排名来分派颜色。可是，却生成了大量几乎不异大小的浅灰色圆圈（请看下图），这看起来并不是很标致。

　　但从我之前对这份数据进行可视化的测验考试中，我曾经晓得在过去的时间里，最受人喜好的年代（歌曲刊行时间）发生了一个很是风趣的变化。因而，我们选择以它作为全体概念，环绕着它来设想消息图的每一个根本部门。

　　DDR已经是我青少年糊口的主要构成部门。2001年，我第一次在伴侣家里见到它。而那时我家附近底子没有能够玩DDR游戏的游戏厅，两天一夜100822为此，我乞求父母给我买一套。然而，说起来容易做起来难，由于其时我家还没有买过任何视频游戏，所以，只采办DDR游戏是不可的，还必需采办配套的PS2游戏机以及响应的游戏垫才能够。我用了两年的时间才说服父母，在那年炎天终究拿到手。之后我几乎天天都要玩几个小时。玩游戏时，我比力喜好在统一首歌、统一难度频频地玩，直到我完全控制为止（这里面的完全控制指的是可以或许持续通关这首歌两次）。我经常玩DDR，直到5年后我上大学为止。

　　在这里，我发觉独一纷歧样的处所就是，它没有利用圆括号(...)，而是利用大括号 {...} 来代表1/16拍，嵌套大括号{{...}}来暗示1/24拍（虽然在我的编码中，我假定为1/32拍），等等。

　　(问答收集平台Stack Exchange：该公式能够将光点放置在阿基米德螺线上，并连结其间距为相等的弧长）

　　由于我12月份中大部门时间都出行在外，所以，我想做得相对简单些。几周前，我已经看到过teamLAB（日本科身手术集体）的水晶宇宙（Crystal Universe），被其美景所震动！

　　在工作坊的第二天，我们在之前的概念上设想了挪动端手机版本的交互图。这一次我们引入了一张很长的可滑动的蜜蜂群图，理论上你能够点击播放每一首歌，并查看额外消息。

　　因而我抓取了所丰年份的列表，然后像Top40那样处置了一遍。这个方式婚配了8%摆布我确定是在Top40中从未呈现的歌曲（可是它们已经在扩充列表中被提到过）。

　　所以，在我初度测验考试了两年后，我起头再次关心Top2000并将一些看法进行可视化处置。

　　当你和荷兰人谈论“12月的音乐”，他们很有可能想到Top2000，这是一个从圣诞节起头到12月31日午夜之间播放的年度音乐榜单。我其其实之前就接触过这份数据。那是我的第二个正式小我项目，其时对于d3（交互式数据可视化的Java库）我仍是个新手。

　　这个月我终究起头集中精神做一个静态海报。无论若何我仍是预备利用d3来建立焦点部门-蜜蜂群图。然后我把它拖进Illustrator。底部的直方图我将间接用R生成导入Illustrator，所以说这是多种东西协作的成果。

　　对于该文件格局，能够很是简单做如下注释：0暗示没有箭头，2暗示向下箭头，4向左，6向右，8向上。凡是，缺省设定是每个字符为1/8拍，可是圆括号(...)里面字符为1/16拍，方括号 [...]里面字符为1/24拍，依此类推。

　　最初，底栏中是一些迷你图表，凸起展现了1999、2008、2016年版本的Top2000榜单中被选歌曲的刊行年份分布。这强调了一个现实即1999年，大部门歌曲都是在70年代刊行的，可是它们慢慢地进入了下几个十年。

　　可是，接下来我陷入了窘境。是的，有了这些线段，我此刻能够把一行的模式/难度层级与另一行区别开来。可是这并没有给我带来什么益处，这些步伐过分分离，我无法在一个屏幕上看到整首歌曲，并判断此中能否具有什么令人感乐趣的纪律。此外，我也无法揣度，该界面的其他部门要若何接入，以便人们浏览、选择歌曲，从而领会该歌曲。

　　一个小提醒：不要对SVG（可缩放矢量图）矢量图的外侧描边，由于当对一个元素描边的时候，笔画的宽度会笼盖在元素的轮廓上。而在这个项目中我需要让整个灰色圆圈都被看到而不是被描边盖住一部门（这种环境对于小圆圈很是较着），所以我在灰色圆圈后面画了稍微大几个像素的彩色圆圈模仿彩色的描边。下面的动图中这种“大一点”的圆圈就是利用了这种布景圆圈的画法，以此使得灰色圆圈能够连结实在半径。

　　我还想晓得分歧刊行年代的歌曲分布在90年代和00年代发生的变化。这是一个额外的细节，是对数据更深切的理解。我想把这些发觉放在主图的下面，可是犹疑利用哪种可视化的体例来表示这个消息。2年前我曾经有了汗青的Top 2000数据，所以我只需把2015和2016的数据添加进去，然后做成可视化图。从一起头我就感觉该当像直方图那样呈现，可是能否该当做滑润处置？该展现哪些年份的数据？是以堆叠仍是分隔的形式？

　　然而，Jason在18分钟后答复了我（留意：是18分钟），并附上了一个包罗他手头上所有歌曲的压缩文件。他其实是太牛了！他的压缩文件包有几种分歧的数据格局，包罗：.dwi（跳舞乐曲文件）和.stp（他们本人的专利模式文件）。

　　浏览了剩下的歌曲后，我发觉两张榜单有时候用词的长度有差别，好比John Lennon-Plastic Ono Band 对应John Lennon。所以我起头在两张榜单中搜刮部门婚配的歌曲，只需这首歌曲名和歌手名的所有单词都能被另一张榜单的某一项包含即可。这种方式协助我又婚配了10%的歌曲。

　　相反，我想让这些点（节奏）在沿着螺旋线行进，并连结不异间距，我认识到，问题并没有我想象那么简单:

　　其实，我决定做一个消息图的另一个缘由是这个月时间比力紧，12月7号了我才完成11月的数据草图，我其时打算去伦敦过一个短暂的假期（8个月了，我在那里再次碰见了Shirley），我们一路渡过了12月的最初几天。并且我做静态视图一贯很快，即便这些还部门基于我还不太熟悉的d3。

　　利用d3v4（数据可视化软件D3.js V4版本）能够定义横跨x和/或y轴的力，使得建立蜜蜂群图变得十分简单。这里我利用程度轴向的利巴歌曲按照刊行年份进行汇聚。我花了好几个迭代来找出x轴和y轴标的目的的力均衡（为了避免圆圈的堆叠，我加了偏移量）。最终这些歌曲在年代轴上分布地很是完满也没有呈现有些歌曲偏离刊行年代太远的环境。

　　于是，我敏捷地查找螺旋图案背后的数学道理，并很是高兴地发觉，阿基米德螺线（Archimedean spiral，螺旋线的一种，此中各个螺旋线之间的距离相等）的半径就是它的螺线角。

　　所以我互换了这两个法则（即大小利用Top 2000的排名决定，颜色深浅则由Top40的排名决定），结果立竿见影。然后我对想要正文的圆圈（歌曲）进行标识表记标帜。遭到黑胶唱片那强烈黑色的灵感开导，我想用口角来展示，只利用红色标识表记标帜有些趣事的歌曲，蓝色标识表记标帜列表里具有最多歌曲的艺术家或者乐队（披头士乐队）。针对David Bowie and Prince这两个出名歌手本年（2016年）辞世的凶讯，我特地用黄色和紫色进行了标识表记标帜。

　　说了这么多，我还不是100%对劲。因为我要做得紧凑一些，所以牺牲了对歌曲内部纪律的关心。授狐而DDR最风趣的处所之一是，一首歌里会有一些成套步法频频呈现，但目前这个可视化模子是很难找到如许的步法的。即便给我足够多的时间，我也无法确定本人可否找到既能够展示歌曲间的纪律又能够看到歌曲内部纪律的可视化模子来。

　　认识到这一点后，我如遭雷击，由于我曾经近十年没有接触积分了。我用了一个小时在我的笔记本上草草演算，试图解出公式中的各个步调，以便可以或许弄大白若何推导出最初的公式。可惜我没那么幸运。

　　说做就做，当我第一次去搜刮相关消息时，找到的数据之多令我很是兴奋，包罗几百首（也可能是几千首）DDR歌曲，且至多有三种难度级别、多种BPMs（一分钟内歌曲的节奏数）和Groove Radar（合拍雷达，DDR的一个难度目标值，以图表形式怀抱步法与音乐合拍的难易度，包罗五个方面：Stream, Voltage, Air, Chaos, and Freeze），这可是相当大的数据量！（趁便说一句，我可从来不晓得也有人称号pentagon为Groove Radar，我也是方才Google了一下才晓得。）即便在我最斗胆的梦里，也毫不会想到能够获得645首歌里面的所有步法。可是，我却找到了令人称奇的DDR Freak站点，以及他们的步法表，如下：