独家｜可视化十亿Shazam音乐识别数据

原文标题：Data Visualisation with 1 Billion Shazam Music Recognitions

作者：Umar Hansa

翻译：冯羽

本文长度为2000字，建议阅读5分钟

Umar Hansa曾经在Shazam工作了五年，本文里他分享了自己参与的一个备受欢迎的骇客马拉松项目——可视化十亿Shazam音乐识别数据——的代码和一些心得，有志于可视化的读者可从中获得一定的启发。

前言

旧金山地区的Shazam音乐识别可视化

当我还在大学的时候，我作为一名兼职网页开发人员加入了Shazam。在这里我度过了五年愉快的日子。这篇博客讲述的是我曾参与的一个骇客马拉松（Hackyday，https://en.wikipedia.org/wiki/Hackathon）项目。该项目涉及将十亿Shazam识别数据绘制到一张空白画布上，然后观察结果。

这篇文章还涉及到我用来创建视觉效果的过程。

什么是“Shazam识别”

Shazam识别大概是这个样子， 你打开Shazam的移动应用程序，并让它“听”一段在后台播放的音乐。一个识别是指成功地识别出这首歌曲的名字。

位置数据

用户可以选择与Shazam共享他们的位置数据。 然后，Shazam会把根据员工的需求，向员工提供一些匿名的位置数据（纬度和经度）。

匿名位置数据可视化是一个很酷的体验。 它教会了我很多关于如何处理大型数据集，如何生成一个有故事情节的可视化，以及看起来很漂亮但不做其他任何事情的可视化。

可视化

有一件事你需要知道，所有的视觉效果都遵循这样一个想法：一个点代表一个成功的识别。 这些点绘制在地理坐标系上。 这与使用Google地图并在其上绘制位置标记不同。

芝加哥、伦敦、纽约，全景可视化

纽约的放大图

我已经使用颜色来区分Android和iOS。 你猜猜是哪个？ 提示：看看各大城市。 你认为哪种设备类型普遍存在？

• Android: 红色

• iOS: 蓝色

如果仔细观察点图，你可以注意到道路的确切范围。这是因为一些乘客正在使用Shazam识别汽车音箱中所播放的音乐。

我还制作了具有替代配色方案的地图。

芝加哥、洛杉矶、纽约、英国

交互式地图

我认为交互方式可视化地图会很有趣。 像拖动/缩放Google地图那样，拖放/缩放Shazam地图会是什么样的感受？ 互动这个要素鼓励人们从地图中使用、探索和学习。你永远不会再访问那些仅仅是静态的东西。

为此，我需要生成数百万个地图块。 例如，这是从Google地图取得的伦敦的一些图块。

每块图块是一个单独的图像。 代表不同的缩放级别。你可能会猜到，当你拖动并放大Google地图时，它会向你呈现许多不同的图像，这些图像被称为地图图块。

这是Shazam地图的图块。

我总共创建了超过40GB的图块数据。 这与我定义的缩放级别有关。 高缩放级别意味着观看地图的人可以放大到更大的水平。

在与同事们一起审查视觉化的同时，我们一直在想：那些聚集的地点是什么？ 例如，这是一个人们经常使用Shazam的音乐场所吗？

为了回答这个问题，我想出一个办法：使用位置服务来确定当前这些地点的周边信息。 为此，我使用Google Maps Places API （https://developers.google.com/ maps/documentation/javascript/places）。 每次滚动到新的地点时，我都会查询Google Maps API，提出问题：这个地点周边有哪些场所？

当使用这个功能时，我们开始意识到，这些地点通常代表着咖啡馆、夜总会、购物中心、便利商店等。

我还同步了Mapbox地图（https://www.mapbox.com/，类似于Google Maps），以便你拖放并放大Shazam地图的时候，另一个常规地图也会移动。 这样你就可以快速找出目前正在查看的地理位置。

代码

我所做的一切只是受益于我们社区其他人所做的努力。 埃里克·费舍尔（Eric Fischer，https://github.com/ericfischer）在datamaps项目（https://github.com/ericfischer/datamaps）上做出了很大的贡献。 如果你按照Github资源库中的说明进行操作，你可以创建自己的可视化项目。 你需要一个包含经度和纬度信息的地点数据集，你可以在Github上找到这样的数据集，例如awesome-public-datasets（https://github.com/caesar0301/awesome-public-datasets）。

如果你想尝试一下：这里有一些我为自己制作的笔记，可能会对你有所帮助。

首先，你需要获得一个很长的包括纬度和经度的明细表。 即便是要掌握这些数据，你也可能不得不做些很多额外的工作。 在我这个项目里，我使用内部Shazam API来获取数据。 我使用了一个名为fast-csv（https://github.com/C2FO/fast-csv）的Node模块来解析数据。这种流处理的方法使得解析大量数据（千兆字节）变得很简单。

csv.fromStream(stream,{headers : true}).on(‘data’, handleRecord);

handleRecord函数（记录处理函数）做这些工作：

function handleRecord(record) {

const location = tag.location.latitude + ‘,’ + tag.location.longitude;

console.log(location);

}

输出数据如下：

lat,lon

-22.1028,166.1833

29.8075,-95.4113

51.2168,-0.8045

27.3007,-82.5221

20.5743,-100.3793

-36.0451,146.9267

26.7554,-81.4237

到此，你可以开始将输出数据插入数据地图中（项目文档中有详细的说明）。

按照文档说明一直做下去，我终于可以创建最终图像了。为了创建伦敦的数据地图，我用边界盒子（Bounding box）指定要捕获的位置坐标：

./render -A -- output 14 51.641353 -0.447693 51.333508 0.260925 > london.png

因为我经常创建相同的静态地图（例如，当用颜色进行实验时），我决定对整个过程进行脚本化。作为一名Web开发人员，我在Node.js中完成了所有这些工作，但是一个简单的Bash脚本会很好。首先，我制作了一个包含我想要渲染的所有地图的对象。

呈现所有地图的数据结构

接着就是使用之前你所看到的命令，但要使用位置数据时就调用你在上面这幅图所看到的JSON块。

展示

在Shazam，有很多个骇客马拉松项目。 然后，每隔几个月，就是一个演示日。 你可以在演示日展示你的项目工作。我们这个项目很受欢迎。

考虑到演示日观众可能更喜欢更多的视觉演示，而不是技术（这是我的经验），那些在骇客马拉松项目中创建命令行应用程序或进行代码重构冒险的开发人员，可以讲述关于你所做的并分享资源之后，完全跳过一个现场演示。 或者更好的办法是，找到一个方法将技术概念提炼给非技术观众，引入更多的视觉效果，并向现场观众展示你的演示。 这个更难，但更有价值。

数据地图的高分辨率图片

注意：你可以使用Google相册接口放大这些图像。

• World

  （https://photos.app.goo.gl/tIm9mmst7qU1aH242）

  注意哪些国家/地区的iOS使用率很高

• United Kingdom 

  （https://photos.app.goo.gl/EEkLzfrpjKmKYm7j1）

  注意城市

• Toronto

  （https://photos.app.goo.gl/CQlMePnEUXHN6eqF2）

• San Francisco

  （https://photos.app.goo.gl/Mnn5fcDGrUElXjCO2）

• Paris

  （https://photos.app.goo.gl/IwXHWw9ve3DGufc82）

结论

感谢Shazam鼓励我们学习新的技能和技术。 还要感谢Eric Fischer首先开发了数据地图项目！ 如果你可以访问位置数据，请考虑许多有趣的可视化方式。 你也可以尝试使用Twitter API中的Tweets，只需确保他们附有位置数据。

原文链接：

https://medium.com/@umaar/data-visualisation-with-1-billion-shazam-music-recognitions-90728df3a8c9

更多精彩内容，请关注清华-青岛数据科学研究院微信官方公众平台“THU数据派”