Datavisualisering med 1 milliard Shazam-musikgenkendelser

Mens jeg var på universitetet, kom jeg til Shazam som deltidswebudvikler. Jeg boede på Shazam i 5 behagelige år. Dette indlæg handler om et hackday-projekt, jeg har arbejdet med. Projektet involverer at plotte en milliard Shazam-genkendelser på et blankt lærred og derefter observere resultatet.

Dette indlæg berører også den proces, jeg brugte til at skabe det visuelle.

Hvad er en 'Shazam-anerkendelse'

Tænk på en Shazam-anerkendelse som denne. Du åbner Shazam, mobilappen, og får den til at 'lytte' efter et stykke musik, der spiller i baggrunden. En anerkendelse er den vellykkede identifikation af sangen.

Placeringsdata

En bruger kan tilmelde sig at dele deres placeringsdata med Shazam. Shazam stiller derefter nogle af de anonymiserede placeringsdata (breddegrad og længdegrad) til rådighed for medarbejdere afhængigt af deres brugssag.

At have anonymiserede placeringsdata til visualisering var en sej oplevelse. Det lærte mig meget om behandling af store datasæt, visualiseringer, der fortæller en historie, og visualiseringer, der ser smukke ud, men ikke gør noget andet.

Visualiseringen

Én ting, du skal vide, alle visualiseringer følger denne idé: En prik repræsenterer en vellykket anerkendelse. Prikker plottes på et geografisk koordinatsystem. Dette er ikke det samme som at tage et Google Map og derefter plotte placeringsmarkører over det.

Jeg har brugt farve til at skelne mellem Android og iOS. Kan du gætte, hvilken er hvilken? Tip: Se på de større byer. Hvilken enhedstype tror du er udbredt der?

  • Android : Rød
  • iOS : Blå

Hvis du ser nøje på prikkortene, kan du bemærke klare definitioner for vejene. Dette kan forklares med passagerer, der spiller Shazam-musik fra bilhøjttalere.

Jeg lavede også kort med alternative farveskemaer.

Interaktive kort

Jeg troede, det ville være sjovt at visualisere kortet interaktivt. På samme måde trækker / zoomer du på et Google Map, hvad hvis du også kunne trække / zoome et Shazam-kort? Dette element af interaktivitet er det, der tilskynder folk til at bruge, udforske og lære af kortene. I stedet for bare at være noget statisk, som du aldrig besøger igen.

For at gøre dette havde jeg brug for at generere millioner af kort 'fliser'. For eksempel er her nogle fliser i London taget fra Google Maps.

Hver flise er et separat billede. Vær opmærksom på de forskellige zoomniveauer. Som du måske gætter på, når du trækker og zoomer på et Google Map, præsenterer det mange forskellige billeder for dig, billederne kaldes kortfliser.

Her er fliserne på Shazam Map.

I alt oprettede jeg mere end 40 GB flise-data. Dette skyldes det zoomniveau, jeg havde angivet. Et højt zoomniveau betyder, at de, der ser på kortet, er i stand til at zoome ind på et større niveau.

Efter at have gennemgået visualiseringerne med kolleger undrede vi os stadig: Hvilket "sted" var der, hvor store klynger befandt sig. Var det for eksempel et musiksted, hvor folk ofte brugte Shazam?

For at hjælpe med at besvare dette spørgsmål havde jeg en idé: Hvad hvis jeg brugte en placeringstjeneste til at bestemme, hvilke steder der i øjeblikket er til stede. For at gøre dette brugte jeg Google Maps Places API. Hver gang du ruller til en ny placering, spørger jeg Google Maps API for at stille spørgsmålet: Hvilke steder er der inden for denne placering?

Da vi brugte denne funktion, begyndte vi at indse, at klynger af prikker typisk ville være resultatet af: caféer, natklubber, indkøbscentre, nærbutikker og andre.

Jeg synkroniserede også et Mapbox-kort (svarende til Google Maps), så når du trækker og zoomer ind på Shazam-kortet, vil det andet 'almindelige' kort også bevæge sig rundt. Dette giver dig mulighed for hurtigt at identificere, hvilken geografisk placering du i øjeblikket ser på

Koden

Som med alt hvad jeg laver, drager jeg kun fordel af hårdt arbejde udført af andre i vores samfund. Al ære til Eric Fischer for deres fremragende arbejde med datamaps. Hvis du følger instruktionerne på det Github-arkiv, kan du lave dine egne visualiseringer. Du skal bruge et datasæt, der består af længde- og breddepunkter, du kan muligvis finde noget på Github, for eksempel fantastiske-offentlige-datasæt.

Hvis du ender med at prøve det: her er et par noter, jeg lavede til mig selv, som du måske finder nyttige.

For det første har du brug for en stor lang liste over breddegrader og længdegrader. Men for selv at få fat i disse data skal du muligvis udføre ekstra arbejde. I mit tilfælde fik jeg det fra en intern Shazam API. Jeg brugte et Node-modul kaldet fast-csv til at analysere data. Brug af streams på denne måde gør det let at analysere store data (gigabyte værd).

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

Den handleRecord Funktionen gør dette:

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

Outputtet ligner:

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

På dette tidspunkt kan du begynde at tilslutte det til datakort (der er detaljerede instruktioner i projektdokumentationen).

Efter dokumentationen længe nok ankom jeg til et punkt, hvor jeg kunne skabe det endelige billede. For at oprette en datamap af London skal du angive afgrænsningsfeltet som placeringskoordinater, som du vil fange:

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

Fordi jeg oprettede de samme statiske kort så ofte (når jeg for eksempel eksperimenterede med farve), besluttede jeg at script hele processen. At være en webudvikler gjorde jeg alt dette i Node.js, men et simpelt Bash-script ville have været fint. Først lavede jeg et objekt, der indeholder alle de kort, jeg ønskede at gengive.

Derefter var det et tilfælde at konstruere den kommando, du så tidligere, men for hver placeringsindgang i den JSON-blok ser du på billedet ovenfor.

Præsenterer

Hos Shazam var der flere hack-dage. Så efter et par måneder var en demo-dag. Du præsenterede dit hack-dagsarbejde på demo-dagen. Viser folk dette projekt blev godt modtaget.

Til de udviklere, der opretter kommandolinjeapplikationer eller går på kode-refactoring-eventyr under hackdage, skal du overveje, at et demo-dagpublikum måske foretrækker flere visuelle demoer snarere end tekniske (dette har været min erfaring). En vej rundt dette er: blog om, hvad du har gjort, og del ressourcerne efter, og spring helt over en live demo. Eller endnu bedre, find ud af, hvordan man destillerer tekniske koncepter til et ikke-teknisk publikum, introducerer flere visuals og fortsæt med at give din demo til et live publikum. Det er sværere, men mere givende.

Billeder i høj opløsning af datakortene

Bemærk: Du kan zoome ind på disse billeder med Google Fotos-grænsefladen

  • Verden - Læg mærke til hvilke lande / byer der har høj iOS-brug
  • Storbritannien - Læg mærke til byerne
  • Toronto
  • San Francisco
  • Paris

Konklusion

Jeg er taknemmelig over for Shazam for at have opfordret os til at lære nye færdigheder og teknologier. Også tak til Eric Fischer for at udvikle datamaps-projektet i første omgang! Hvis du har adgang til placeringsdata, skal du overveje de mange interessante måder at visualisere dem på. Du kan også prøve at bruge tweets fra Twitter API, bare sørg for at de har placeringsdata knyttet til dem.

Vil du se mere som dette?

Følg mig på Twitter: @umaar og lad mig det vide! Jeg prøver at tweete masser af ressourcer til webudvikling.

Du kan lide at dele og dele, hvis du nød at læse min artikel og efterlade en kommentar med dine erfaringer med datavisualisering.