Datenvisualisierung mit 1 Milliarde Shazam-Musikerkennungen

Während meines Studiums kam ich als Teilzeit-Webentwickler zu Shazam. Ich war für 5 angenehme Jahre in Shazam. Dieser Beitrag handelt von einem Hackday-Projekt, an dem ich gearbeitet habe. Das Projekt beinhaltet das Zeichnen einer Milliarde Shazam-Erkennungen auf eine leere Leinwand und das anschließende Beobachten des Ergebnisses.

Dieser Beitrag geht auch auf den Prozess ein, mit dem ich die Grafiken erstellt habe.

Was ist eine Shazam-Anerkennung?

Stellen Sie sich eine solche Shazam-Anerkennung vor. Sie öffnen Shazam, die mobile App, und lassen sie auf ein Musikstück hören, das im Hintergrund abgespielt wird. Eine Anerkennung ist die erfolgreiche Identifizierung des Liedes.

Standortdaten

Ein Benutzer kann sich dafür entscheiden, seine Standortdaten mit Shazam zu teilen. Shazam stellt den Mitarbeitern dann je nach Anwendungsfall einige der anonymisierten Standortdaten (Längen- und Breitengrad) zur Verfügung.

Mit anonymisierten Standortdaten sichtbar zu machen war eine coole Erfahrung. Es hat mir viel über die Verarbeitung großer Datenmengen, Visualisierungen, die eine Geschichte erzählen, und Visualisierungen beigebracht, die hübsch aussehen, aber nichts anderes tun.

Die Visualisierung

Eines müssen Sie wissen: Alle Visualisierungen folgen dieser Idee: Ein Punkt steht für eine erfolgreiche Erkennung. Punkte werden auf einem geografischen Koordinatensystem aufgezeichnet. Dies ist nicht dasselbe wie eine Google Map zu nehmen und dann Standortmarkierungen darüber zu zeichnen.

Ich habe Farbe verwendet, um zwischen Android und iOS zu unterscheiden. Kannst du erraten was was ist? Tipp: Schauen Sie sich die großen Städte an. Welcher Gerätetyp ist Ihrer Meinung nach dort vorherrschend?

  • Android : Rot
  • iOS : Blau

Wenn Sie sich die Punktkarten genau ansehen, können Sie klare Definitionen für die Straßen feststellen. Dies kann durch Passagiere erklärt werden, die Shazam'ing-Musik aus Autolautsprechern spielen.

Ich habe auch Karten mit alternativen Farbschemata gemacht.

Interaktive Karten

Ich dachte, es würde Spaß machen, die Karte interaktiv zu visualisieren. Auf die gleiche Weise, wie Sie eine Google Map ziehen / zoomen würden, was wäre, wenn Sie auch eine Shazam-Karte ziehen / zoomen könnten? Dieses Element der Interaktivität ermutigt die Menschen, die Karten zu verwenden, zu erkunden und daraus zu lernen. Anstatt nur etwas Statisches zu sein, das Sie nie wieder besuchen.

Dazu musste ich Millionen von Kartenkacheln generieren. Hier sind zum Beispiel einige Kacheln von London, die aus Google Maps stammen.

Jede Kachel ist ein separates Bild. Beachten Sie die verschiedenen Zoomstufen. Wenn Sie eine Google Map ziehen und zoomen, werden Ihnen möglicherweise viele verschiedene Bilder angezeigt. Die Bilder werden als Kartenkacheln bezeichnet.

Hier sind die Kacheln der Shazam-Karte.

Insgesamt habe ich Kacheldaten im Wert von über 40 GB erstellt. Dies liegt an der von mir angegebenen Zoomstufe. Eine hohe Zoomstufe bedeutet, dass diejenigen, die die Karte anzeigen, in eine größere Stufe zoomen können.

Bei der Überprüfung der Visualisierungen mit Kollegen haben wir uns immer wieder gefragt: Welcher „Ort“ befand sich an der Stelle großer Cluster? War es zum Beispiel ein Musiklokal, in dem die Leute häufig Shazam benutzen?

Um diese Frage zu beantworten, hatte ich eine Idee: Was wäre, wenn ich mithilfe eines Ortungsdienstes feststellen würde, welche Orte derzeit vorhanden sind? Zu diesem Zweck habe ich die Google Maps Places-API verwendet. Jedes Mal, wenn Sie zu einem neuen Standort scrollen, frage ich die Google Maps-API nach der Frage: Welche Orte befinden sich an diesem Standort?

Bei der Verwendung dieser Funktion wurde uns klar, dass Punktgruppen in der Regel das Ergebnis von Cafés, Nachtclubs, Einkaufszentren, Convenience-Stores und anderen sind.

Ich habe auch eine Mapbox-Karte synchronisiert (ähnlich wie bei Google Maps), sodass sich beim Ziehen und Zoomen in die Shazam-Karte auch die andere "normale" Karte bewegt. Auf diese Weise können Sie schnell feststellen, welchen geografischen Standort Sie gerade suchen

Der Code

Wie bei allem, was ich tue, profitiere ich nur von der harten Arbeit anderer in unserer Gemeinde. Wir danken Eric Fischer für die hervorragende Arbeit an Datenkarten. Wenn Sie den Anweisungen in diesem Github-Repository folgen, können Sie Ihre eigenen Visualisierungen erstellen. Sie benötigen einen Datensatz, der aus Längen- und Breitengraden besteht. Möglicherweise finden Sie auf Github etwas, z. B. fantastische öffentliche Datensätze.

Wenn Sie es am Ende ausprobieren: Hier sind ein paar Notizen, die ich für mich selbst gemacht habe und die Sie vielleicht nützlich finden.

Zunächst benötigen Sie eine große lange Liste von Breiten- und Längengraden. Um diese Daten überhaupt zu erhalten, müssen Sie möglicherweise zusätzliche Arbeit leisten. In meinem Fall habe ich es von einer internen Shazam-API erhalten. Ich habe ein Knotenmodul namens fast-csv verwendet, um Daten zu analysieren. Die Verwendung von Streams auf diese Weise erleichtert das Parsen großer Datenmengen (im Wert von Gigabyte).

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

Die handleRecord- Funktion führt Folgendes aus :

function handleRecord(record) { const location = tag.location.latitude + ‘,’ + tag.location.longitude; console.log(location);}

Die Ausgabe sieht ungefähr so ​​aus:

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

An diesem Punkt können Sie beginnen, es in Datenkarten einzufügen (detaillierte Anweisungen finden Sie in der Projektdokumentation).

Nachdem ich die Dokumentation lange genug verfolgt hatte, kam ich zu einem Punkt, an dem ich das endgültige Bild erstellen konnte. Geben Sie zum Erstellen einer Datenkarte von London den Begrenzungsrahmen als Standortkoordinaten an, die Sie erfassen möchten:

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

Da ich so oft dieselben statischen Karten erstellt habe (zum Beispiel beim Experimentieren mit Farben), habe ich beschlossen, den gesamten Prozess zu skripten. Als Webentwickler habe ich das alles in Node.js gemacht, aber ein einfaches Bash-Skript wäre in Ordnung gewesen. Zuerst habe ich ein Objekt erstellt, das alle Karten enthält, die ich rendern wollte.

Dann wurde der Befehl erstellt, den Sie zuvor gesehen haben, aber für jeden Standorteintrag in diesem JSON-Block sehen Sie im obigen Bild.

Präsentieren

In Shazam gab es mehrere Hack-Tage. Dann, nach ein paar Monaten, war ein Demo-Tag. Sie haben Ihre Hack-Day-Arbeit am Demo-Tag vorgestellt. Den Leuten zu zeigen, dass dieses spezielle Projekt gut aufgenommen wurde.

Wenn Entwickler Befehlszeilenanwendungen erstellen oder an Hack-Tagen Abenteuer zur Code-Umgestaltung unternehmen, sollten Sie berücksichtigen, dass ein Publikum am Demo-Tag möglicherweise eher visuelle als technische Demos bevorzugt (dies war meine Erfahrung). Eine Möglichkeit, dies zu umgehen, ist: Bloggen Sie über das, was Sie getan haben, und teilen Sie die Ressourcen danach, wobei Sie eine Live-Demo vollständig überspringen. Oder noch besser: Finden Sie heraus, wie Sie technische Konzepte für ein nicht-technisches Publikum destillieren, mehr visuelle Elemente einführen und Ihre Demo weiterhin einem Live-Publikum präsentieren können. Es ist schwieriger, aber lohnender.

Hochauflösende Bilder der Datenkarten

Hinweis: Sie können diese Bilder über die Google Fotos-Oberfläche vergrößern

  • Welt - Beachten Sie, welche Länder / Städte eine hohe iOS-Nutzung haben
  • Vereinigtes Königreich - Beachten Sie die Städte
  • Toronto
  • San Francisco
  • Paris

Fazit

Ich bin Shazam dankbar, dass er uns ermutigt hat, neue Fähigkeiten und Technologien zu erlernen. Vielen Dank auch an Eric Fischer für die Entwicklung des Datamaps-Projekts! Wenn Sie Zugriff auf Standortdaten haben, sollten Sie die vielen interessanten Möglichkeiten zur Visualisierung berücksichtigen. Sie können auch versuchen, Tweets über die Twitter-API zu verwenden. Stellen Sie lediglich sicher, dass Standortdaten angehängt sind.

Möchten Sie mehr davon sehen?

Folgen Sie mir auf Twitter: @umaar und lassen Sie es mich wissen! Ich versuche und twittere viele Webentwicklungsressourcen.

Bitte liken und teilen Sie, wenn Sie meinen Artikel gerne gelesen haben, und hinterlassen Sie einen Kommentar zu Ihren Erfahrungen in der Datenvisualisierung.