Находясь в университете, в университете я присоединился к Shazam как Way Web Developer. Я останавливался в Shazam за 5 приятных лет. Этот пост около одного Главный день Проект я работал. Проект включает заговор о признании одного миллиарда шазамов на пустой холст, а затем наблюдение за результатом.
Этот пост также касается процесса, который я использовал для создания визуальных эффектов.
Что такое «распознавание Shazam»
Думайте о признании в Shazam, как это. Вы открываете Shazam, мобильное приложение и имеете его «слушать» для музыкального произведения, который играет на заднем плане. Признание – это успешное определение песни.
Данные местоположения
Пользователь может отказаться от совместных данных их местоположения с Shazam. Шазам тогда делает некоторые из анонимно Данные местоположения (широта и долгота) доступны для сотрудников, в зависимости от случая их использования.
Наличие анонимно Данные местоположения для визуализации было прохладный опыт. Это научило меня много о обработке больших наборов данных, визуализации, которые рассказывают историю и визуализации, которые выглядят красиво, но ничего не делают.
Визуализация
Одна вещь, которую вам нужно знать, все визуализации следуют этой идеей: одна точка представляет собой одно успешное распознавание. Точки построены на географическую систему координат. Это не то же самое, что предпринимая карту Google, а затем построение маркеров местоположения над ним.
Я использовал цвет, чтобы дифференцировать между Android и iOS. Можете ли вы догадаться, что это? Подсказка: посмотрите на крупные города. Какой тип устройства вы думаете, что там распространен?
- Android : Красный
- IOS : Синий
Если вы внимательно смотрите на карта точек, вы можете заметить четкие определения для дорог. Это можно объяснить пассажирами, которые демонстрируют музыку, играя из автомобильных колонов.
Я также сделал карты с альтернативными цветовыми схемами.
Интерактивные карты
Я думал, что было бы удовольствием визуализации карты интерактивно. Точно так же вы будете перетаскивать/увеличить карту Google, что, если вы также можете перетащить карту Shazam? Этот элемент интерактивности – это то, что поощряет людей использовать, исследовать и учиться на картах. А не просто что-то статичное, которое вы никогда не пережили.
Для этого мне нужно было генерировать миллионы карты «плиток». Например, вот некоторые плитки Лондона, взятые из Google Maps.
Каждая плитка – это отдельное изображение. Примите к сведению различные уровни зума. Как вы можете догадаться, когда вы будете тянуть и увеличить карту Google, он представляет вам много разных изображений, изображения называются плитками карты.
Вот плитки казальной карты.
Всего я создал более 40 ГБ данных плитки. Это из-за уровня зума, который я указал. Высокий уровень масштабирования означает, что те, которые просматривают карту, способные масштабировать на больший уровень.
Рассмотрев визуализацию с коллегами, мы удивляемся: какое «место» было в расположении больших кластеров. Например, было ли это музыкальным местом, где люди часто бывали использовать Shazam?
Чтобы помочь ответить на этот вопрос, у меня была идея: что, если я использовал службу местоположения, чтобы определить, какие места в настоящее время присутствуют. Для этого я использовал Google Maps Места API Отказ Каждый раз, когда вы прокрутите в новое место, я запросил Google Maps API, чтобы задать вопрос: в каких местах в этом месте?
При использовании этой функции мы начали осознавать, что кластеры точек обычно являются результатом: кафе, ночных клубов, торговых центров, магазинов и других.
Я также синхронизировал Mapbox Карта (похоже на карты Google), так как вы будете тянуть и увеличить карту Shazam, другая «регулярная» карта также переместится. Это позволяет быстро определить, какое географическое положение вы в настоящее время смотряте на
Код
Как и со всем, что я делаю, я только получаю только тяжелую работу, проделанную другими в нашем сообществе. Все кредиты идут в Эрик Фишер Для их отличной работы на DataMaps Отказ Если вы следуете инструкциям на этом репозитории GitHub, вы сможете сделать свои собственные визуализации. Вам понадобится набор данных, состоящий из очков долготы и широты, вы можете найти что-то на GitHub, например, потрясающие общедоступные наборы данных Отказ
Если вы в конечном итоге пробули: вот несколько заметок, которые я создал для себя, которую вы можете найти полезными.
Во-первых, вам нужен большой длинный список широтов и продольных. Однако даже получить эти данные, вам может придеться выполнить дополнительную работу. В моем случае я получил его с внутреннего Shazam API. Я использовал модуль узла под названием Fast-CSV разбирать данные. Использование потоков в этой моде делает анализ больших данных (Gigabytes стоит) простой для этого.
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
На данный момент вы можете начать подключить его к отображениям данных (в рамках проектной документации есть подробные инструкции).
Следуя документации достаточно долго, я прибыл в точку, где я могу создать окончательное изображение. Чтобы создать DATAMAP London, укажите ограничивающую коробку в качестве координат местоположения, которые вы хотите захватить:
./render -A -- output 14 51.641353 -0.447693 51.333508 0.260925 > london.png
Поскольку я так часто создал те же статические карты (когда экспериментирую с цветом, например), я решил сценарию весь процесс. Будучи веб-разработчиком, я сделал это все в Node.js, однако простой сценарий Bash был бы в порядке. Во-первых, я сделал объект, содержащий все карты, которые я хотел рендер.
Тогда это был случай построения команды, который вы видели ранее, но для каждого ввода местоположения в этом блоке JSON видите на изображении выше.
Представление
В Шазаме было несколько дней взлома. Затем через несколько месяцев был демонстрационный день. Вы представили свой день взлома на демонстрацию демонстрации. Показаны людьми, этот конкретный проект был хорошо принят.
Для этих разработчиков создают приложения командной строки или отправляются на рефакторинг кода приключений в руки в последние дни, считают, что аудитория демонстрации может предпочитать больше визуальных демонстраций, а не технических (это был мой опыт). Один из способов вокруг этого есть: блог о том, что вы сделали, и делитесь ресурсами после того, как пропускают живую демонстрацию. Или еще лучше, выясните, как дистиллировать технические концепции нетехнической аудитории, ввести больше визуальных визуальных визуальных визуалов и продолжать давать вашу демонстрацию живой аудитории. Это сложнее, но более полезное.
Изображения высокого разрешения карты данных
Примечание. Вы можете увеличить эти изображения с интерфейсом Google Photos
- Мир – Уведомление, какие страны/города имеют высокое использование iOS
- Великобритания – Обратите внимание на города
- Торонто
- Сан-Франциско
- Париж
Заключение
Я благодарен Shazam для поощрения нас изучать новые навыки и технологии. Также благодаря Эрику Фишеру для разработки проекта DataMaps в первую очередь! Если у вас есть доступ к данным местоположения, рассмотрите многие интересные способы визуализации его. Вы также можете попробовать использовать твиты из Twitter API, просто убедитесь, что у них есть данные о местонахождении, прилагаемые к ним.
Хотите видеть больше так?
Следуй за мной в Twitter: @umaar И дайте мне знать! Я пытаюсь Tweet Out много ресурсов веб-разработки.
Пожалуйста, хотите и поделитесь, если вам понравилось читать мою статью и оставить комментарий с вашим опытом в визуализации данных.