Adatmegjelenítés 1 milliárd Shazam zenei felismeréssel

Egyetem közben csatlakoztam a Shazamhoz, részmunkaidős webfejlesztőként. 5 kellemes évet töltöttem a Shazamban. Ez a bejegyzés egy hackday projektről szól, amin dolgoztam. A projekt során egymilliárd Shazam-felismerést kell kitervelni egy üres vászonra, majd megfigyelni az eredményt.

Ez a bejegyzés azt a folyamatot is érinti, amelyet a látvány elkészítéséhez használtam.

Mi a „Shazam elismerés”

Gondolj egy ilyen Shazam-elismerésre. Megnyitja a Shazam nevű mobilalkalmazást, és „meghallgatja” a háttérben játszódó zeneművet. Az elismerés a dal sikeres azonosítása.

Helyadatok

A felhasználó dönthet úgy, hogy megosztja helyadatait a Shazammal. Ezután Shazam az anonimizált helyadatok (földrajzi szélesség és hosszúság) egy részét hozzáférhetővé teszi az alkalmazottak számára, felhasználási esetüktől függően.

Miután anonim helymeghatározó adatok, hogy szemléltesse egy hűvös élmény. Sokat tanított a nagy adatkészletek, a történetet elmesélő vizualizációk és a szép megjelenésű, de mást nem csináló vizualizációk feldolgozására.

A megjelenítés

Egy dolgot tudnia kell, minden megjelenítés ezt az elképzelést követi: Egy pont egy sikeres felismerést jelent. A pontokat földrajzi koordinátarendszerre ábrázoljuk. Ez nem ugyanaz, mint egy Google Map elkészítése, majd a helyjelölők felrajzolása rajta.

Színt használtam az Android és az iOS megkülönböztetésére. Kitalálhatja, melyik melyik? Tipp: Nézze meg a nagyobb városokat. Ön szerint melyik eszköztípus érvényesül ott?

  • Android : Piros
  • iOS : Kék

Ha alaposan megnézi a ponttérképeket, észreveheti az utak egyértelmű meghatározását. Ezt meg lehet magyarázni olyan utasokkal, akik Shazam zenét hallgatnak az autós hangszórókból.

Térképeket is készítettem alternatív színösszeállításokkal.

Interaktív térképek

Úgy gondoltam, hogy jó lenne interaktívan megjeleníteni a térképet. Ugyanúgy húzná / nagyítaná a Google Map-t, mi lenne, ha Shazam-térképet is húzhatna / nagyíthatna? Az interaktivitás ezen eleme ösztönzi az embereket a térképek használatára, felfedezésére és tanulásra. Ahelyett, hogy valami statikus dolog lenne, amelyet soha nem látogat meg újra.

Ehhez több millió térkép "csempét" kellett létrehoznom. Például itt van néhány londoni csempe, amelyet a Google Maps készített.

Minden csempe külön kép. Vegye figyelembe a különböző zoom-szinteket. Mint sejteni lehet, amikor a Google Map-t húzza és nagyítja, az sok különböző képet mutat be Önnek, a képeket térképcsempének nevezzük.

Itt vannak a Shazam Map lapjai.

Összesen több mint 40 GB értékű csempés adatot hoztam létre. Ennek oka az általam megadott nagyítási szint. A nagy zoomszint azt jelenti, hogy a térképet megtekintők magasabb szintre tudnak nagyítani.

Miután a kollégákkal áttekintettük a vizualizációkat, folyamatosan azon tűnődtünk, hogy mi a „hely” a nagy klaszterek helyén. Például volt-e olyan zenei helyszín, ahol az emberek gyakran használták a Shazam-ot?

A kérdés megválaszolásához volt egy ötletem: Mi lenne, ha helymeghatározó szolgáltatást használnék annak megállapítására, hogy jelenleg milyen helyek vannak. Ehhez a Google Maps Helyek API-t használtam. Minden alkalommal, amikor új helyre görget, megkérdezem a Google Maps API-t, hogy feltegyem a kérdést: Mely helyek vannak ezen a helyen?

Ennek a funkciónak a használatakor kezdtük felismerni, hogy a pontok halmaza jellemzően a következőket eredményezi: kávézók, éjszakai klubok, bevásárló központok, kisboltok és mások.

Szinkronizáltam egy Mapbox térképet is (hasonlóan a Google Maps-hez), hogy amikor áthúzza és nagyítja a Shazam térképet, a másik „normál” térkép is mozogni fog. Ez lehetővé teszi, hogy gyorsan azonosítsa, milyen földrajzi helyet keres jelenleg

A kód

Mint minden tevékenységemben, csak én is profitálok a közösségünkben végzett mások kemény munkájából. Minden elismerés Eric Fischert illeti az adatbázis-térképeken végzett kiváló munkájáért. Ha betartja az adott Github-adattár utasításait, akkor saját vizualizációkat készíthet. Szüksége lesz egy hosszúsági és szélességi pontokból álló adatkészletre, találhat valamit a Githubon, például awesome-public-datasets.

Ha végül kipróbálja: íme néhány jegyzet, amelyet magamnak készítettem, és amelyeket hasznosnak találhat.

Először nagy, hosszú szélességi és hosszúsági listára van szükség. Ahhoz azonban, hogy ezeket az adatokat még birtokba is vegye, plusz munkát kell végeznie. Esetemben egy belső Shazam API-tól kaptam. Az adatok elemzéséhez a fast-csv nevű Node modult használtam. Az adatfolyamok ilyen módon történő felhasználása egyszerűvé teszi a nagy adatok (gigabájt értékű) elemzését.

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

A handleRecord függvény ezt teszi:

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

A kimenet a következőképpen néz ki:

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

Ezen a ponton elkezdheti csatlakoztatni az adattérképekhez (a projekt dokumentációjában részletes útmutatás található).

Elég sokáig követve a dokumentációt eljutottam egy olyan pontra, ahol elkészíthettem a végső képet. London adatlapjának létrehozásához adja meg a határoló mezőt koordinátaként, amelyeket rögzíteni szeretne:

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

Mivel nagyon gyakran készítettem ugyanazokat a statikus térképeket (amikor például színnel kísérleteztem), úgy döntöttem, hogy az egész folyamatot leírom. Webfejlesztő lévén, mindezt a Node.js-ben tettem meg, azonban egy egyszerű Bash szkript rendben lett volna. Először készítettem egy objektumot, amely tartalmazza az összes megjeleníteni kívánt térképet.

Akkor a korábban látott parancs összeállításáról volt szó, de a fenti képen látható JSON-blokk minden helybejegyzéséhez.

Bemutatás

Shazamnál több hack-nap volt. Néhány hónap múlva demó volt. A bemutató napon bemutatta hack napi munkáját. Az emberek bemutatása ezt a projektet jól fogadta.

Azok számára a fejlesztők számára, akik parancssori alkalmazásokat hoznak létre, vagy hack-napok alatt kódjavító kalandokat folytatnak, fontolják meg, hogy a bemutatónapi közönség inkább vizuális demókat részesít előnyben, nem pedig technikai jellegűek (ez volt az én tapasztalatom). Ennek egyik módja: blogoljon arról, hogy mit tett, és ossza meg az erőforrásokat, teljesen kihagyva az élő bemutatót. Vagy még jobb, kitalálni, hogyan lehet ledolgozni a technikai fogalmakat egy nem technikai közönség számára, bevezetni több látványt, és továbbra is átadni a bemutatót élő közönségnek. Nehezebb, de kifizetődőbb.

Nagy felbontású képek az adattérképekről

Megjegyzés: Nagyíthatja ezeket a képeket a Google Fotók kezelőfelületével

  • Világ - Figyelje meg, mely országokban / városokban van magas az iOS használat
  • Egyesült Királyság - Figyelje meg a városokat
  • Toronto
  • San Francisco
  • Párizs

Következtetés

Hálás vagyok Shazamnak, ami arra ösztönzött minket, hogy új készségeket és technológiákat tanuljunk. Köszönet Eric Fischernek is, aki elsősorban a datamaps projektet fejlesztette ki! Ha hozzáférése van a helyadatokhoz, fontolja meg a megjelenítés sok érdekes módját. Megpróbálhatja használni a Twitter API-ból származó tweeteket is, csak győződjön meg róla, hogy helyadatok vannak csatolva hozzájuk.

Szeretne még ilyeneket látni?

Kövessen a Twitteren: @umaar, és tudassa velem! Sok webfejlesztési erőforrást próbálok ki és tweetelni.

Kérjük, kedvelje és ossza meg, ha tetszett olvasni a cikkemet, és hagyjon megjegyzést az adatmegjelenítés tapasztalataival kapcsolatban.