Tietojen visualisointi 1 miljardilla Shazam-musiikkitunnistuksella

Opiskellessani yliopistossa liityin Shazamiin osa-aikaisesti web-kehittäjänä. Vietin Shazamissa 5 nautittavaa vuotta. Tämä viesti koskee yhtä hackday-projektia, jonka parissa työskentelin. Hankkeeseen kuuluu miljardin Shazam-tunnustuksen piirtäminen tyhjälle kankaalle ja sen seuraaminen.

Tämä viesti koskettaa myös prosessia, jota käytin visualisointien luomiseen.

Mikä on 'Shazam-tunnustus'

Ajattele tällaista Shazam-tunnustusta. Avaat Shazamin, mobiilisovelluksen ja annat sen 'kuunnella' taustalla toistettavaa musiikkikappaletta. Tunnustus on kappaleen onnistunut tunnistaminen.

Sijaintitiedot

Käyttäjä voi halutessaan jakaa sijaintitietonsa Shazamin kanssa. Shazam sitten tekee joitakin n tunnistetiedoista sijaintitietoja (leveys- ja pituusaste) työntekijöiden saatavilla, niiden käytön tapauksessa.

Ottaa tunnistetiedoista paikkatiedot visualisoida oli nasta kokemus. Se opetti minulle paljon suurten tietojoukkojen käsittelystä, tarinaa kertovista visualisoinneista ja visualisoinneista, jotka näyttävät kauniilta, mutta eivät tee mitään muuta.

Visualisointi

Yksi asia, joka sinun on tiedettävä, kaikki visualisoinnit noudattavat tätä ajatusta: Yksi piste edustaa yhtä onnistunutta tunnustusta. Pisteet piirretään maantieteelliselle koordinaattijärjestelmälle. Tämä ei ole sama asia kuin ottaa Google Map ja piirtää sitten sijaintimerkit sen päälle.

Olen käyttänyt väriä erottaakseni Androidin ja iOS: n. Voitteko arvata mikä on mikä? Vihje: Katso suuria kaupunkeja. Mikä laitetyyppi on mielestäsi siellä yleistä?

  • Android : Punainen
  • iOS : Sininen

Jos tarkastelet tarkasti pistekarttoja, voit huomata teiden selkeät määritelmät. Tämä voidaan selittää matkustajilla, jotka Shazamilla soittavat musiikkia auton kaiuttimista.

Tein myös karttoja vaihtoehtoisilla väreillä.

Interaktiiviset kartat

Ajattelin, että olisi hauskaa visualisoida kartta vuorovaikutteisesti. Samalla tavalla kuin vedät / zoomaat Google Mapia, entä jos voisit myös vetää / zoomata Shazam-karttaa? Tämä interaktiivisuuden elementti kannustaa ihmisiä käyttämään, tutkimaan ja oppimaan karttoja. Sen sijaan, että olisit vain jotain staattista, jota et koskaan tarkastele uudelleen.

Tätä varten minun oli luotava miljoonia kartta-ruutuja. Esimerkiksi tässä on joitain Lontoon ruutuja, jotka on otettu Google Mapsista.

Jokainen ruutu on erillinen kuva. Ota huomioon erilaiset zoomaustasot. Kuten saatat arvata, kun vedät ja zoomaat Google-karttaa, se näyttää sinulle monia erilaisia ​​kuvia, kuvia kutsutaan karttaruuduiksi.

Tässä ovat Shazam-kartan laatat.

Kaiken kaikkiaan olen luonut yli 40 Gt: n arvot ruututietoja. Tämä johtuu määrittämästäni zoomaustasosta. Korkea zoomaustaso tarkoittaa, että karttaa katselevat pystyvät zoomaamaan korkeammalle.

Tarkastellessamme visualisointeja kollegoiden kanssa ihmettelimme jatkuvasti: Mikä "paikka" oli suurten klustereiden sijainnissa. Esimerkiksi, oliko se musiikkipaikka, jossa ihmiset usein käyttivät Shazamia?

Auttaakseni vastaamaan tähän kysymykseen minulla oli idea: Entä jos käyttäisin sijaintipalvelua selvittääkseen, mitkä paikat ovat tällä hetkellä. Tätä varten käytin Google Maps Places -sovellusliittymää. Aina kun selaat uuteen sijaintiin, kysyn Google Maps -sovellusliittymältä ja kysyn: Mitkä paikat ovat tässä sijainnissa?

Tätä ominaisuutta käyttäessä aloimme ymmärtää, että pistejoukot muodostuvat tyypillisesti kahviloista, yökerhoista, ostoskeskuksista, lähikaupoista ja muista.

Synkronoin myös Mapbox-kartan (samanlainen kuin Google Maps), jotta kun vedät ja zoomaat Shazam-karttaan, myös toinen 'tavallinen' kartta liikkuu. Tämän avulla voit nopeasti tunnistaa maantieteellisen sijainnin, jota olet parhaillaan katsomassa

Koodi

Kuten kaikesta, mitä teen, minäkin hyötyn vain muiden tekemästä kovasta työstä yhteisössämme. Kaikki ansiot Eric Fischerille heidän erinomaisesta työstään tietokartoissa. Jos noudatat kyseisen Github-arkiston ohjeita, voit tehdä omia visualisointeja. Tarvitset tietojoukon, joka koostuu pituus- ja leveysasteista, saatat löytää jotain Githubista, esimerkiksi mahtavia-julkisia-aineistoja.

Jos päätät kokeilla sitä: tässä on muutama itselleni tekemäni muistiinpano, joka saattaa olla hyödyllinen.

Ensinnäkin tarvitset suuren pitkän luettelon leveys- ja pituusasteista. Kuitenkin, jotta edes saisit tietoja, sinun on ehkä tehtävä ylimääräistä työtä. Minun tapauksessani sain sen sisäiseltä Shazam-sovellusliittymältä. Käytin solmumoduulia nimeltä fast-csv tietojen jäsentämiseen. Striimien käyttäminen tällä tavalla tekee suurten tietojen (gigatavujen arvoinen) jäsentämisen helpoksi.

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

HandleRecord toiminto tekee tämän:

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

Tulos näyttää tältä:

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

Tässä vaiheessa voit aloittaa sen liittämisen datakarttoihin (projektin dokumentaatiossa on yksityiskohtaiset ohjeet).

Noudattamalla riittävän kauan dokumentaatiota pääsin pisteeseen, jossa voin luoda lopullisen kuvan. Voit luoda Lontoon datakartan määrittämällä rajoitusruudun sijaintikoordinaateiksi, jotka haluat kaapata:

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

Koska olen luonut samat staattiset kartat niin usein (kun kokeilen esimerkiksi värejä), päätin komentaa koko prosessin. Koska olin web-kehittäjä, tein tämän kaiken Node.js: ssä, mutta yksinkertainen Bash-komentosarja olisi ollut hieno. Ensin tein objektin, joka sisältää kaikki kartat, jotka halusin tehdä.

Sitten kyseessä oli aiemmin näkemäsi komento, mutta jokaiselle JSON-lohkon sijaintimerkinnälle, jonka näet yllä olevassa kuvassa.

Esittäminen

Shazamissa oli useita hakkerointipäiviä. Muutaman kuukauden kuluttua oli demopäivä. Esitit hakupäivän työn demopäivänä. Tämän projektin näyttäminen ihmisille otettiin hyvin vastaan.

Niille kehittäjille, jotka luovat komentorivisovelluksia tai suorittavat koodin korjausseikkailuja hakkerointipäivinä, harkitse, että demopäivän yleisö voi mieluummin mieluummin visuaalisia esittelyjä kuin teknisiä (tämä on ollut kokemukseni). Yksi tapa kiertää tämä on: blogi siitä, mitä olet tehnyt, ja jaa resurssit sen jälkeen, ohittaen live-esittely kokonaan. Tai vielä parempi, selvitä, miten tislaat teknisiä käsitteitä ei-tekniselle yleisölle, esittele lisää grafiikkaa ja jatka demosi antamista live-yleisölle. Se on vaikeampaa, mutta palkitsevampaa.

Korkean resoluution kuvat datakartoista

Huomaa: Voit zoomata näitä kuvia Google Kuvat -käyttöliittymällä

  • World - Huomaa, missä maissa / kaupungeissa on paljon iOS-käyttöä
  • Iso-Britannia - Huomaa kaupungit
  • Toronto
  • San Francisco
  • Pariisi

Johtopäätös

Olen kiitollinen Shazamille siitä, että hän kannusti meitä oppimaan uusia taitoja ja tekniikoita. Kiitos myös Eric Fischerille datamaps-projektin kehittämisestä! Jos sinulla on pääsy sijaintitietoihin, harkitse monia mielenkiintoisia tapoja visualisoida niitä. Voit myös kokeilla Twitter-sovellusliittymän twiittejä, vain varmista, että heihin on liitetty sijaintitiedot.

Haluatko nähdä lisää tällaisia?

Seuraa minua Twitterissä: @umaar ja kerro minulle! Yritän & tweetin paljon verkkokehitysresursseja.

Tykkää ja jaa, jos nautit artikkelini lukemisesta ja jätä kommentti kokemuksistasi tietojen visualisoinnissa.