Візуалізація даних за допомогою мільярдів музичних розпізнавань Shazam

Навчаючись в університеті, я приєднався до Shazam в якості веб-розробника, що працює за сумісництвом. Я пробув у Шазамі 5 приємних років. Ця публікація стосується одного проекту хаккею, над яким я працював. Проект передбачає нанесення одного мільярда визнань Shazam на чисте полотно, а потім спостереження за результатом.

Цей допис також торкається процесу, який я використовував для створення візуалів.

Що таке "визнання Shazam"

Подумайте про таке визнання Shazam. Ви відкриваєте мобільний додаток Shazam і пропонуєте йому «слухати» музичний твір, який звучить у фоновому режимі. Визнання - це успішна ідентифікація пісні.

Дані про місцезнаходження

Користувач може дозволити спільний доступ до своїх даних про місцезнаходження з Shazam. Shazam потім роблять деякі з знеособлених даних про місцезнаходження (широта і довгота) , доступних для співробітників, в залежності від їх використання.

Наявність анонімних даних про місцезнаходження для візуалізації було крутим досвідом. Це навчило мене багато чого про обробку великих наборів даних, візуалізації, які розповідають історію, та візуалізації, які виглядають красиво, але нічого іншого не роблять.

Візуалізація

Потрібно знати одне, усі візуалізації відповідають цій ідеї: одна крапка - це одне успішне визнання. Точки наносяться на географічну систему координат. Це не те саме, що взяти карту Google, а потім нанести на неї маркери розташування.

Я використовував колір, щоб розрізнити Android та iOS. Чи можете ви здогадатися, що є яке? Підказка: Подивіться на великі міста. Як ви думаєте, який тип пристрою там поширений?

  • Android : Червоний
  • iOS : Синій

Якщо уважно придивитися до точкових карт, то можна помітити чіткі визначення доріг. Це можна пояснити пасажирам, які звучать музику Shazam, що відтворюється з автомобільних колонок.

Я також робив карти з альтернативними кольоровими схемами.

Інтерактивні карти

Я думав, було б цікаво візуалізувати карту інтерактивно. Таким же чином, як ви перетягуєте / масштабуєте карту Google, що робити, якщо ви також можете перетягувати / масштабувати карту Shazam? Цей елемент інтерактивності є тим, що спонукає людей користуватися, досліджувати та вчитися на картах. Замість того, щоб бути просто чимось статичним, чого ви ніколи не переглядаєте.

Для цього мені потрібно було сформувати мільйони «плиток» карти. Наприклад, ось кілька плиток Лондона, взяті з Google Maps.

Кожна плитка - це окреме зображення. Зверніть увагу на різні рівні масштабування. Як ви можете здогадатися, коли ви перетягуєте та масштабуєте карту Google, вона представляє вам багато різних зображень, зображення називаються плитками карти.

Ось плитки карти Шазам.

Загалом я створив дані про плитки на суму понад 40 ГБ. Це пов’язано із встановленим мною рівнем масштабування. Високий рівень масштабування означає, що користувачі, які переглядають карту, можуть збільшити масштаб.

Переглядаючи візуалізацію з колегами, ми продовжували гадати: яке “місце” було в розташуванні великих скупчень. Наприклад, чи це було музичне місце, де люди часто користувались Shazam?

Щоб допомогти відповісти на це запитання, я мав ідею: а якби я скористався службою локації, щоб визначити, які місця зараз присутні. Для цього я використав API Карт Google Maps. Кожного разу, коли ви переходите до нового місця, я запитую API Google Maps, щоб задати питання: Які місця знаходяться в цьому місці?

Використовуючи цю функцію, ми почали розуміти, що скупчення точок, як правило, є результатом: кафе, нічних клубів, торгових центрів, міні-магазинів та інших.

Я також синхронізував карту Mapbox (подібно до Карт Google), тому, коли ви перетягуєте та наближаєте карту Shazam, інша "звичайна" карта також переміщається. Це дозволяє швидко визначити, яке географічне розташування ви зараз переглядаєте

Кодекс

Як і у всьому, що я роблю, я отримую вигоду лише від наполегливої ​​роботи, яку роблять інші в нашій громаді. Вся заслуга Еріка Фішера за їх прекрасну роботу над картами даних. Якщо ви будете слідувати інструкціям із цього сховища Github, ви зможете робити власні візуалізації. Вам знадобиться набір даних, що складається з точок довготи та широти, ви можете знайти щось на Github, наприклад, awesome-public-datasets.

Якщо ви в кінцевому підсумку спробуєте: ось кілька приміток, які я зробив для себе, і які вам можуть стати в нагоді.

По-перше, вам потрібен великий довгий список широт і довгот. Однак, щоб навіть отримати ці дані, можливо, доведеться виконати додаткову роботу. У моєму випадку я отримав це із внутрішнього API Shazam. Для аналізу даних я використовував модуль Node, який називається fast-csv. Використання потоків таким чином робить синтаксичний аналіз великих даних (на гігабайти) простим.

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

Функція 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

Оскільки я так часто створював одні й ті самі статичні карти (наприклад, експериментуючи з кольором), я вирішив написати весь процес. Будучи веб-розробником, я робив це все в Node.js, проте простий сценарій Bash був би чудовим. Спочатку я зробив об’єкт, що містив усі карти, які я хотів зробити.

Тоді це був випадок побудови команди, яку ви бачили раніше, але для кожного запису розташування в цьому блоці JSON, який ви бачите на зображенні вище.

Представляючи

У Шазамі було декілька хакерських днів. Потім через кілька місяців був демонстраційний день. Ви презентували свою роботу в день демонстрації. Показавши людей, цей конкретний проект був добре прийнятий.

Тим розробникам, які створюють додатки з командного рядка або виконують пригоди з рефакторингу коду під час хакерських днів, враховуйте, що аудиторія демонстраційного дня може віддавати перевагу більше наочним демонстраціям, а не технічним (це був мій досвід). Одним із способів цього є: вести блог про те, що ви зробили, і ділитися ресурсами після цього, повністю пропускаючи демо-версію. Або ще краще, з’ясуйте, як передати технічні концепції нетехнічній аудиторії, представити більше візуальних зображень і продовжувати передавати свою демонстрацію живій аудиторії. Це складніше, але корисніше.

Зображення карт даних з високою роздільною здатністю

Примітка. Ви можете збільшити ці зображення за допомогою інтерфейсу Google Photos

  • Світ - Зверніть увагу, у яких країнах / містах часто використовується iOS
  • Великобританія - Зверніть увагу на міста
  • Торонто
  • Сан Франциско
  • Париж

Висновок

Я вдячний Шазаму за те, що він заохочує нас засвоювати нові навички та технології. Також вдячність Еріку Фішеру за розробку проекту datamaps в першу чергу! Якщо у вас є доступ до даних про місцезнаходження, розгляньте безліч цікавих способів їх візуалізації. Ви також можете спробувати використовувати твіти з Twitter API, лише переконайтесь, що до них прикріплені дані про місцезнаходження.

Хочете побачити більше подібного?

Слідуйте за мною у Twitter: @umaar і повідомте мене! Я спробую & твіт чимало ресурсів веб-розробки.

Будь ласка, сподобайтеся і поділіться, якщо вам сподобалось читати мою статтю та залиште коментар зі своїм досвідом візуалізації даних.