Визуализација података са 1 милијардом музичких признања Схазам

Док сам студирао, придружио сам се Схазаму као хонорарни веб програмер. У Схазаму сам остао пет пријатних година. Овај пост говори о једном хацкдаи пројекту на којем сам радио. Пројекат укључује уцртавање милијарде признања Схазам на празно платно, а затим посматрање резултата.

Овај пост се такође дотиче процеса који сам користио за стварање визуелних слика.

Шта је „Схазам признање“

Замислите овакво признање Схазама. Отворите мобилну апликацију Схазам и пустите је да „преслушава“ музичко дело које свира у позадини. Признање је успешна идентификација песме.

Подаци о локацији

Корисник може да се пријави за дељење података о локацији са Схазамом. Схазам онда прави неке од анонимности податке о локацији (ширина и дужина) на располагању запосленима, у зависности од њихове употребе случај.

Имати анонимне податке о локацији за визуализацију било је супер искуство. Научио ме много о обради великих скупова података, визуализацијама које причају причу и визуализацијама које изгледају лепо, али не раде ништа друго.

Визуализација

Једно морате знати, све визуелизације прате ову идеју: Једна тачка представља једно успешно препознавање. Тачке су уцртане у географски координатни систем. То није исто што и узимање Гоогле мапе и затим цртање маркера локације преко ње.

Користила сам боју за разликовање Андроид-а и иОС-а. Можете ли погодити шта је шта? Напомена: Погледајте главне градове. Шта мислите који тип уређаја тамо превладава?

  • Андроид : Црвена
  • иОС : плава

Ако пажљиво погледате тачкасте мапе, приметићете јасне дефиниције путева. То могу објаснити путници који музику Схазам свирају из звучника аутомобила.

Правио сам и мапе са алтернативним шемама боја.

Интерактивне мапе

Мислио сам да би било забавно интерактивно визуализовати мапу. На исти начин на који бисте превукли / зумирали Гоогле мапу, шта ако бисте могли и превући / зумирати Схазам карту? Овај елемент интерактивности је оно што подстиче људе да користе, истражују и уче на мапама. Уместо да будете само нешто статично до чега никада више не дођете.

Да бих то урадио, требало је да генеришем милионе „плочица“ на мапи. На пример, ево неколико плочица Лондона преузетих са Гоогле мапа.

Свака плочица је засебна слика. Забележите различите нивое зума. Као што можете претпоставити, када вучете и зумирате Гоогле мапу, она вам приказује много различитих слика, слике се називају плочицама на мапи.

Овде су плочице мапе Схазам.

Укупно сам створио податке о плочицама у вредности од преко 40 ГБ. То је због нивоа зума који сам одредио. Висок ниво зумирања значи да они који гледају мапу могу да зумирају већи ниво.

Након прегледа визуализација са колегама, непрестано смо се питали: које је то „место“ на месту великих кластера. На пример, да ли је то било музичко место у којем би људи често користили Схазам?

Да бих помогао да одговорим на ово питање, имао сам идеју: Шта ако бих помоћу услуге локације утврдио која су места тренутно присутна. Да бих то урадио, користио сам АПИ за Гоогле Мапс Плацес. Сваки пут када се померите на нову локацију, постављам питање АПИ-ју Гоогле Мапс да бих поставио питање: Која места се налазе на овој локацији?

Када смо користили ову функцију, почели смо да схватамо да би скуп тачака обично био резултат кафића, ноћних клубова, тржних центара, продавница и других.

Такође сам синхронизовао Мапбок мапу (слично Гоогле мапама), па док повлачите и зумирате карту Схазам, и друга 'редовна' мапа би се кретала. То вам омогућава да брзо препознате коју географску локацију тренутно гледате

Код

Као и у свему што радим, и ја имам користи од напорног рада који раде други у нашој заједници. Свака част Ерику Фисцхеру за њихов одличан рад на мапама података. Ако следите упутства на том Гитхуб спремишту, моћи ћете да направите своје визуелизације. Требаће вам скуп података који се састоји од тачака дужине и ширине, можда ћете пронаћи нешто на Гитхуб-у, на пример, авесоме-публиц-датасетс.

Ако на крају испробате: ево неколико белешки које сам себи направио и које би вам могле бити корисне.

Прво, потребан вам је дугачак списак географских ширина и дужина. Међутим, чак и да бисте дошли до тих података, можда ћете морати да обавите додатни посао. У мом случају сам је добио од интерног Схазам АПИ-ја. Користио сам Ноде модул који се зове фаст-цсв за рашчлањивање података. Коришћење токова на овај начин олакшава рашчлањивање великих података (вредних гигабајта).

csv.fromStream(stream,{headers : true}).on(‘data’, 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

У овом тренутку можете почети да га укључујете у мапе података (у пројектној документацији постоје детаљна упутства).

Пратећи документацију довољно дуго, стигао сам до тачке у којој сам могао да створим коначну слику. Да бисте креирали мапу података из Лондона, наведите гранични оквир као координате локације које желите да снимите:

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

Пошто сам тако често креирао исте статичке мапе (на пример, када сам експериментисао са бојом), одлучио сам да напишем цео процес. Као веб програмер, све сам то урадио у Ноде.јс-у, међутим једноставна Басх скрипта би била у реду. Прво сам направио објекат који садржи све мапе које сам желео да прикажем.

Тада је био случај конструкције команде коју сте раније видели, али за сваки унос локације у том ЈСОН блоку који видите на горњој слици.

Представљање

У Схазам-у је било више хакерских дана. Затим, након неколико месеци, био је демо дан. Представили сте свој рад на данима хаковања на демо дану. Приказивање људи овог одређеног пројекта је одлично прихваћено.

Онима који развијају програме који креирају командну линију или иду на авантуре рефакторирања кода током хакерских дана, узмите у обзир да публика демо дана можда више воли визуелне демонстрације, а не техничке (ово је моје искуство). Један од начина за ово је: блогање о ономе што сте урадили и дељење ресурса након тога, у потпуности прескачући демонстрацију уживо. Или још боље, схватите како дестилирати техничке концепте нетехничкој публици, представити више визуелних елемената и наставити давати свој демонстрацијски приказ живој публици. Теже је, али корисније.

Слике мапа података високе резолуције

Напомена: Ове слике можете зумирати помоћу интерфејса Гоогле Пхотос

  • Свет - приметите које земље / градови имају велику употребу иОС-а
  • Уједињено Краљевство - Обратите пажњу на градове
  • Торонто
  • Сан Франциско
  • Париз

Закључак

Захвалан сам Схазам-у што нас је подстакао да научимо нове вештине и технологије. Такође хвала Ерицу Фисцхеру што је пре свега развио пројекат датамапс! Ако имате приступ подацима о локацији, размислите о многим занимљивим начинима њихове визуализације. Такође можете покушати да користите Твитове са Твиттер АПИ-ја, само припазите да имају повезане податке о локацији.

Да ли желите да видите више оваквих?

Пратите ме на Твиттер-у: @умаар и обавестите ме! Испробавам и објављујем много ресурса за веб развој.

Молимо вас да лајкате и поделите да ли сте уживали читајући мој чланак и оставите коментар са својим искуствима у визуелизацији података.